From cfeb8c0bb3030c0266160793a7a606eabf6fb1a4 Mon Sep 17 00:00:00 2001
From: Julien Torrent <julien.torrent@outlook.com>
Date: Fri, 15 Oct 2021 10:28:58 +0200
Subject: [PATCH] feat: allow users to put custom url when adding apps

---
 cypress/support/server.js           |  2 +-
 src/components/item/form/AppForm.js | 49 +++++++++++++----------------
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/cypress/support/server.js b/cypress/support/server.js
index e75961828..a354afa96 100644
--- 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
index 510ae91c2..e9e50c265 100644
--- 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,25 +20,15 @@ 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 (
@@ -45,19 +36,23 @@ const AppForm = ({ onChange, item }) => {
       <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>
   );
 };