feat: allow users to put custom url when adding apps

graasp · Oct 15, 2021 · cfeb8c0 · cfeb8c0
1 parent 1823b80
commit cfeb8c0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 28 deletions.
diff --git a/cypress/support/server.js b/cypress/support/server.js
@@ -106,7 +106,7 @@ export const mockGetAppListRoute = (apps) => {
     (req) => {
       req.reply(apps);
     },
-  ).as('useApps');
+  ).as('getApps');
 };
 
 

diff --git a/src/components/item/form/AppForm.js b/src/components/item/form/AppForm.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import { InputLabel, Select, MenuItem, FormControl, makeStyles } from '@material-ui/core';
+import { makeStyles, TextField } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
 import BaseItemForm from './BaseItemForm';
 import { buildAppExtra, getAppExtra } from '../../../utils/itemExtra';
 import { hooks } from '../../../config/queryClient';
@@ -19,45 +20,39 @@ const useStyles = makeStyles((theme) => ({
 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 entries = data ?
-  data?.map(elt => (
-    <MenuItem value={elt.url}>
-      <img className={classes.img} src={elt.extra.image} alt={elt.name} />
-      {elt.name}
-    </MenuItem>
-  ))
-  :
-  <MenuItem />;
-
-
   const url = getAppExtra(item?.extra)?.url;
 
   return (
     <div>
       <Typography variant="h6">{t('Create an App')}</Typography>
       <BaseItemForm onChange={onChange} item={item} />
 
-      <FormControl fullWidth>
-        <InputLabel>{t('App url')}</InputLabel>
-        <Select
-          id={ITEM_FORM_APP_URL_ID}
-          margin="dense"
-          label={t('App url')}
-          value={url}
-          onChange={handleAppUrlInput}
-          fullWidth
-        >
-          {entries}
-        </Select>
-      </FormControl>
+      <Autocomplete
+        id={ITEM_FORM_APP_URL_ID}
+        freeSolo
+        options={data?.toArray()}
+        getOptionLabel={(option) => option.name ?? option}
+        value={url}
+        onChange={handleAppUrlInput}
+        onInputChange={handleAppUrlInput}
+        renderOption={(option) => (
+          <>
+            <img className={classes.img} src={option.extra.image} alt={option.name} />
+            {option.name}
+          </>
+        )}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        renderInput={(params) => <TextField {...params} label="Combo box" />}
+      />
     </div>
   );
 };