added autocomplete when selecting a project

Signed-off-by: Lykke Axlin <lykkeaxlin@hotmail.com>

Co-authored-by: klaraab <klarabroman@live.se>

plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx

@@ -58,25 +58,32 @@ export const AddProjectDialog = ({
     setSelectedEntity(entity);
   };
 
+  const handleCloseDialog = () => {
+    setSelectedEntity(catalogEntities ? catalogEntities[0] : null);
+    handleClose();
+  };
+
   const handleSave: SubmitHandler<FormValues> = async (
     getValues: any,
     reset: any,
   ) => {
     const formValues = getValues();
 
-    await bazaarApi.updateMetadata(
-      selectedEntity!,
-      selectedEntity!.metadata.name,
-      formValues.community,
-      formValues.announcement,
-      formValues.status,
-    );
+    if (selectedEntity) {
+      await bazaarApi.updateMetadata(
+        selectedEntity,
+        selectedEntity.metadata.name,
+        formValues.community,
+        formValues.announcement,
+        formValues.status,
+      );
 
-    fetchBazaarProjects();
-    fetchCatalogEntities();
+      fetchBazaarProjects();
+      fetchCatalogEntities();
 
-    handleClose();
-    reset(defaultValues);
+      handleClose();
+      reset(defaultValues);
+    }
   };
 
   return (
@@ -88,13 +95,13 @@ export const AddProjectDialog = ({
       open={open}
       projectSelector={
         <ProjectSelector
-          value={selectedEntity?.metadata.name || ''}
+          value={selectedEntity?.metadata?.name || ''}
           onChange={handleListItemClick}
-          isFormInvalid={false}
+          isFormInvalid={selectedEntity === null}
           entities={catalogEntities || []}
         />
       }
-      handleClose={handleClose}
+      handleClose={handleCloseDialog}
     />
   );
 };

plugins/bazaar/src/components/ProjectSelector/ProjectSelector.tsx

@@ -15,11 +15,9 @@
  */
 
 import React from 'react';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
 import { Entity } from '@backstage/catalog-model';
+import { Autocomplete } from '@material-ui/lab';
+import { TextField } from '@material-ui/core';
 
 type Props = {
   entities: Entity[];
@@ -35,32 +33,22 @@ export const ProjectSelector = ({
   isFormInvalid,
 }: Props) => {
   return (
-    <FormControl fullWidth>
-      <InputLabel id="demo-simple-select-outlined-label">
-        Select a project
-      </InputLabel>
-      <Select
-        required
-        labelId="demo-simple-select-outlined-label"
-        id="demo-simple-select-outlined"
-        value={value}
-        error={isFormInvalid && value === ''}
-        label="Project"
-      >
-        {entities?.map(entity => {
-          const projectName = entity.metadata.name;
-          return (
-            <MenuItem
-              button
-              onClick={() => onChange(entity)}
-              key={projectName}
-              value={projectName}
-            >
-              {projectName}
-            </MenuItem>
-          );
-        })}
-      </Select>
-    </FormControl>
+    <Autocomplete
+      defaultValue={entities[0]}
+      options={entities}
+      getOptionLabel={option => option?.metadata?.name}
+      renderOption={option => <span>{option?.metadata?.name}</span>}
+      renderInput={params => (
+        <TextField
+          error={isFormInvalid && value === ''}
+          helperText={
+            isFormInvalid && value === '' ? 'Please select a project' : ''
+          }
+          {...params}
+          label="Select a project"
+        />
+      )}
+      onChange={(_, data) => onChange(data!)}
+    />
   );
 };