Merge pull request #219 from graasp/218/appsDropdown

feat: replace url textfield by dropdown
graasp · Oct 22, 2021 · 705361f · 705361f
2 parents b41bc1c + dbac48d
commit 705361f
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 50 deletions.
diff --git a/cypress/fixtures/apps.js b/cypress/fixtures/apps.js
@@ -1,3 +1,4 @@
+import { APP_NAME } from './apps/apps';
 import { ITEM_TYPES } from '../../src/enums';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER } from './members';
@@ -16,7 +17,7 @@ export const GRAASP_APP_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
+    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333', name: APP_NAME },
   },
   creator: CURRENT_USER.id,
 };
@@ -28,6 +29,7 @@ export const GRAASP_APP_PARENT_FOLDER = {
   path: 'bdf09f5a_5688_11eb_ae93_0242ac130002',
   extra: {
     image: 'someimageurl',
+    name: APP_NAME
   },
 };
 
@@ -39,7 +41,10 @@ export const GRAASP_APP_CHILDREN_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
+    [ITEM_TYPES.APP]: { 
+      url: 'http://localhost.com:3333',
+      name: APP_NAME 
+    },
   },
   creator: CURRENT_USER.id,
 };
@@ -53,6 +58,7 @@ export const APP_USING_CONTEXT_ITEM = {
   extra: {
     [ITEM_TYPES.APP]: {
       url: `${API_HOST}/${buildAppItemLinkForTest('app.html')}`,
+      name: APP_NAME
     },
   },
   creator: CURRENT_USER.id,

diff --git a/cypress/fixtures/apps/apps.js b/cypress/fixtures/apps/apps.js
@@ -0,0 +1,11 @@
+export const APP_NAME = "test app";
+
+export const APPS_LIST = [
+    {
+        name: APP_NAME,
+        url: "http://localhost.com:3333",
+        extra: {
+            image: "https://pbs.twimg.com/profile_images/1300707321262346240/IsQAyu7q_400x400.jpg"
+        }
+    }
+];
diff --git a/cypress/integration/item/create/createApp.spec.js b/cypress/integration/item/create/createApp.spec.js
@@ -7,42 +7,85 @@ import { CREATE_ITEM_PAUSE } from '../../../support/constants';
 import { createItem } from './utils';
 
 describe('Create App', () => {
-  it('create app on Home', () => {
-    cy.setUpApi();
-    cy.visit(HOME_PATH);
-
-    if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
-    }
-
-    // create
-    createItem(GRAASP_APP_ITEM, ITEM_LAYOUT_MODES.LIST);
-
-    cy.wait('@postItem').then(() => {
-      // check item is created and displayed
-      cy.wait(CREATE_ITEM_PAUSE);
-      // should update view
-      cy.wait('@getOwnItems');
+  describe('create app on Home', () => {
+    it('Create app on Home with dropdown', () =>{
+      cy.setUpApi();
+      cy.visit(HOME_PATH);
+
+      if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
+        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      }
+
+      // create
+      createItem(GRAASP_APP_ITEM, ITEM_LAYOUT_MODES.LIST);
+
+      cy.wait('@postItem').then(() => {
+        // check item is created and displayed
+        cy.wait(CREATE_ITEM_PAUSE);
+        // should update view
+        cy.wait('@getOwnItems');
+      });
     });
-  });
 
-  it('create app in item', () => {
-    cy.setUpApi(SAMPLE_ITEMS);
-    const { id } = SAMPLE_ITEMS.items[0];
+    it('Create app on Home by typing', () =>{
+      cy.setUpApi();
+      cy.visit(HOME_PATH);
 
-    // go to children item
-    cy.visit(buildItemPath(id));
+      if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
+        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      }
 
-    if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
-      cy.switchMode(ITEM_LAYOUT_MODES.LIST);
-    }
+      // create
+      createItem(GRAASP_APP_ITEM, { type: true });
 
-    // create
-    createItem(GRAASP_APP_ITEM, ITEM_LAYOUT_MODES.LIST);
+      cy.wait('@postItem').then(() => {
+        // check item is created and displayed
+        cy.wait(CREATE_ITEM_PAUSE);
+        // should update view
+        cy.wait('@getOwnItems');
+      });
+    });
+  });
 
-    cy.wait('@postItem').then(() => {
-      // expect update
-      cy.wait('@getItem').its('response.url').should('contain', id);
+  describe('create app in item', () => {
+    it('Create app with dropdown', () => {
+      cy.setUpApi(SAMPLE_ITEMS);
+      const { id } = SAMPLE_ITEMS.items[0];
+
+      // go to children item
+      cy.visit(buildItemPath(id));
+
+      if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
+        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      }
+
+      // create
+      createItem(GRAASP_APP_ITEM, ITEM_LAYOUT_MODES.LIST);
+
+      cy.wait('@postItem').then(() => {
+        // expect update
+        cy.wait('@getItem').its('response.url').should('contain', id);
+      });
+    });
+
+    it('Create app by typing', () => {
+      cy.setUpApi(SAMPLE_ITEMS);
+      const { id } = SAMPLE_ITEMS.items[0];
+
+      // go to children item
+      cy.visit(buildItemPath(id));
+
+      if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.LIST) {
+        cy.switchMode(ITEM_LAYOUT_MODES.LIST);
+      }
+
+      // create
+      createItem(GRAASP_APP_ITEM, { type: true });
+
+      cy.wait('@postItem').then(() => {
+        // expect update
+        cy.wait('@getItem').its('response.url').should('contain', id);
+      });
     });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -11,6 +11,7 @@ import {
   MODE_LIST_BUTTON_ID,
 } from '../../src/config/selectors';
 import {
+  mockGetAppListRoute,
   mockCopyItem,
   mockCopyItems,
   mockDeleteItem,
@@ -66,6 +67,7 @@ import './commands/item';
 import './commands/navigation';
 import { CURRENT_USER, MEMBERS } from '../fixtures/members';
 import { SAMPLE_FLAGS } from '../fixtures/flags';
+import { APPS_LIST } from '../fixtures/apps/apps';
 
 Cypress.Commands.add(
   'setUpApi',
@@ -108,6 +110,8 @@ Cypress.Commands.add(
     const cachedMembers = JSON.parse(JSON.stringify(members));
     const allItems = [...cachedItems, ...recycledItems];
 
+    mockGetAppListRoute(APPS_LIST);
+
     mockGetOwnItems(cachedItems);
 
     mockGetSharedItems({ items: cachedItems, member: currentMember });

diff --git a/cypress/support/commands/item.js b/cypress/support/commands/item.js
@@ -13,6 +13,7 @@ import {
   ITEM_FORM_LINK_INPUT_ID,
   ITEM_FORM_DOCUMENT_TEXT_SELECTOR,
   ITEM_FORM_APP_URL_ID,
+  buildItemFormAppOptionId,
   FOLDER_FORM_DESCRIPTION_ID,
 } from '../../../src/config/selectors';
 
@@ -122,12 +123,16 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'fillAppModal',
-  ({ name = '', extra = {} }, { confirm = true } = {}) => {
+  ({ name = '', extra = {} }, { confirm = true, type = false } = {}) => {
     cy.fillBaseItemModal({ name }, { confirm: false });
 
-    cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(
-      `{selectall}${getAppExtra(extra)?.url}`,
-    );
+    cy.get(`#${ITEM_FORM_APP_URL_ID}`).click();
+
+    if(type){
+      cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(getAppExtra(extra)?.url);
+    }else{
+      cy.get(`#${buildItemFormAppOptionId(getAppExtra(extra)?.name)}`).click();
+    }
 
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();

diff --git a/cypress/support/server.js b/cypress/support/server.js
@@ -35,6 +35,7 @@ import {
 } from '../fixtures/apps';
 
 const {
+  buildAppListRoute,
   buildCopyItemRoute,
   buildDeleteItemRoute,
   buildEditItemRoute,
@@ -96,6 +97,19 @@ export const redirectionReply = {
   body: null,
 };
 
+export const mockGetAppListRoute = (apps) => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: `${API_HOST}/${buildAppListRoute}`,
+    },
+    (req) => {
+      req.reply(apps);
+    },
+  ).as('getApps');
+};
+
+
 export const mockGetCurrentMember = (
   currentMember = MEMBERS.ANNA,
   shouldThrowError = false,

diff --git a/src/components/common/PinButton.js b/src/components/common/PinButton.js
@@ -17,12 +17,12 @@ const PinButton = ({ item }) => {
 
   const handlePin = () => {
     setPinned(!isPinned);
-    
+
     editItem.mutate({
       id: item.id,
       name: item.name,
       settings: {
-        isPinned: !isPinned
+        isPinned: !isPinned,
       },
     });
   };

diff --git a/src/components/item/form/AppForm.js b/src/components/item/form/AppForm.js
@@ -1,34 +1,66 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
+import { makeStyles, TextField } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
 import BaseItemForm from './BaseItemForm';
 import { buildAppExtra, getAppExtra } from '../../../utils/itemExtra';
-import { ITEM_FORM_APP_URL_ID } from '../../../config/selectors';
+import { hooks } from '../../../config/queryClient';
+import {
+  ITEM_FORM_APP_URL_ID,
+  buildItemFormAppOptionId,
+} from '../../../config/selectors';
+
+const useStyles = makeStyles((theme) => ({
+  img: {
+    verticalAlign: 'middle',
+    margin: theme.spacing(1),
+    height: '30px',
+  },
+}));
 
 const AppForm = ({ onChange, item }) => {
   const { t } = useTranslation();
 
-  const handleAppUrlInput = (event) => {
-    onChange({ ...item, extra: buildAppExtra({ url: event?.target?.value }) });
+  const handleAppUrlInput = (event, newValue) => {
+    const url = newValue?.url ?? newValue;
+    onChange({ ...item, extra: buildAppExtra({ url }) });
   };
 
+  const classes = useStyles();
+  const { useApps } = hooks;
+  const { data } = useApps();
+
   const url = getAppExtra(item?.extra)?.url;
 
   return (
-    <>
+    <div>
       <Typography variant="h6">{t('Create an App')}</Typography>
       <BaseItemForm onChange={onChange} item={item} />
-      <TextField
+
+      <Autocomplete
         id={ITEM_FORM_APP_URL_ID}
-        margin="dense"
-        label={t('App url')}
+        freeSolo
+        options={data?.toArray()}
+        getOptionLabel={(option) => option.name ?? option}
         value={url}
         onChange={handleAppUrlInput}
-        fullWidth
+        onInputChange={handleAppUrlInput}
+        renderOption={(option) => (
+          <div id={buildItemFormAppOptionId(option.name)}>
+            <img
+              className={classes.img}
+              src={option.extra.image}
+              alt={option.name}
+            />
+            {option.name}
+          </div>
+        )}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        renderInput={(params) => <TextField {...params} label={t('App url')} />}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
@@ -42,7 +42,7 @@ const ItemSettings = ({ item }) => {
       id: item.get('id'),
       name: item.get('name'),
       settings: {
-        showChatbox: event.target.checked
+        showChatbox: event.target.checked,
       },
     });
   };
@@ -52,7 +52,7 @@ const ItemSettings = ({ item }) => {
       id: item.get('id'),
       name: item.get('name'),
       settings: {
-        isPinned: event.target.checked
+        isPinned: event.target.checked,
       },
     });
   };

diff --git a/src/config/selectors.js b/src/config/selectors.js
@@ -88,6 +88,8 @@ export const DOCUMENT_ITEM_TEXT_EDITOR_ID = 'documentItemTextEditor';
 export const DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR = `#${DOCUMENT_ITEM_TEXT_EDITOR_ID} .ql-editor`;
 export const CREATE_ITEM_APP_ID = 'createItemApp';
 export const ITEM_FORM_APP_URL_ID = 'itemFormAppUrl';
+export const buildItemFormAppOptionId = (name) =>
+  `${name.replaceAll(/\s/g, '-')}`;
 export const TEXT_EDITOR_CLASS = 'ql-editor';
 export const buildSaveButtonId = (id) => `saveButton-${id}`;
 export const MEMBER_PROFILE_MEMBER_ID_ID = 'memberProfileMemberId';