Provider configurations UI fixes (#374)

* Provider configurations UI fixes

* Create .changeset/nice-donkeys-stare.md

.changeset/nice-donkeys-stare.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-cms": patch
+---
+
+Provider configurations UI fixes

apps/cms/package.json

@@ -22,7 +22,7 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@saleor/app-sdk": "0.37.1",
     "@saleor/apps-shared": "workspace:*",
-    "@saleor/macaw-ui": "^0.6.7",
+    "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.43.0",
     "@urql/exchange-auth": "^1.0.0",
     "clsx": "^1.2.1",

apps/cms/src/modules/channels/ui/channel-configuration-form.tsx

@@ -137,7 +137,7 @@ export const ChannelConfigurationForm = ({
             );
 
             return (
-              <ListItem key={providerInstance.name} className={styles.item}>
+              <ListItem key={providerInstance.id} className={styles.item}>
                 <ListItemCell className={styles.itemCell}>
                   <ProviderIcon providerName={providerInstance.providerName} />
                   {providerInstance.name}

apps/cms/src/modules/provider-instances/ui/provider-icon.tsx

@@ -1,12 +1,31 @@
+import { makeStyles } from "@saleor/macaw-ui";
 import { getProviderByName } from "../../providers/config";
 import Image from "next/image";
+import clsx from "clsx";
 
 interface ProviderIconProps {
   providerName: string;
+  small?: boolean;
 }
 
-export const ProviderIcon = ({ providerName }: ProviderIconProps) => {
+const useStyles = makeStyles((theme) => ({
+  small: {
+    width: theme.spacing(2.5),
+  },
+}));
+
+export const ProviderIcon = ({ providerName, small = false }: ProviderIconProps) => {
+  const styles = useStyles();
+
   const provider = getProviderByName(providerName);
 
-  return provider ? <Image src={provider.iconSrc} alt={`${provider.label} icon`} /> : null;
+  return provider ? (
+    <Image
+      src={provider.iconSrc}
+      alt={`${provider.label} icon`}
+      className={clsx({
+        [styles.small]: small,
+      })}
+    />
+  ) : null;
 };

apps/cms/src/modules/provider-instances/ui/provider-instance-configuration-form.tsx

@@ -57,8 +57,6 @@ export const ProviderInstanceConfigurationForm = <TProvider extends CMSProviderS
     resolver: zodResolver(schema),
   });
 
-  console.log("form", providerInstance);
-
   React.useEffect(() => {
     resetField("providerName" as Path<ProvidersSchema[TProvider]>, {
       defaultValue: provider.name,
@@ -89,11 +87,6 @@ export const ProviderInstanceConfigurationForm = <TProvider extends CMSProviderS
             Error validating form
           </Typography>
         )}
-        <input
-          type="hidden"
-          {...register("id" as Path<ProvidersSchema[TProvider]>)}
-          value={providerInstance?.id}
-        />
         <input
           type="hidden"
           {...register("providerName" as Path<ProvidersSchema[TProvider]>)}
@@ -147,6 +140,21 @@ export const ProviderInstanceConfigurationForm = <TProvider extends CMSProviderS
             />
           </Grid>
         ))}
+        {providerInstance ? (
+          <Grid item xs={12}>
+            <TextField
+              {...register("id" as Path<ProvidersSchema[TProvider]>)}
+              label="Configuration id"
+              type="text"
+              name="id"
+              fullWidth
+              helperText="Automatically generated unique identifier for the configuration instance."
+              disabled={true}
+            />
+          </Grid>
+        ) : (
+          <input type="hidden" {...register("id" as Path<ProvidersSchema[TProvider]>)} />
+        )}
         <Grid item xs={12} className={providerInstance ? styles.footerComplex : styles.footer}>
           {providerInstance && (
             <Button variant="secondary" disabled={loading} onClick={() => onDelete(getValues())}>

apps/cms/src/modules/provider-instances/ui/provider-instance-configuration.tsx

@@ -199,7 +199,7 @@ export const ProviderInstanceConfiguration = ({
             <br />
             <ProviderInstanceConfigurationForm
               provider={selectedProvider}
-              providerInstance={activeProviderInstance}
+              providerInstance={!newProviderInstance ? activeProviderInstance : null}
               loading={loading.saving}
               onSubmit={saveProviderInstance}
               onDelete={deleteProviderInstance}

apps/cms/src/modules/provider-instances/ui/provider-instances-list.tsx

@@ -4,6 +4,8 @@ import { SingleProviderSchema } from "../../../lib/cms/config";
 import { AppPaper } from "../../ui/app-paper";
 
 import { ProvidersErrors, ProvidersLoading } from "./types";
+import { ProviderIcon } from "./provider-icon";
+import { makeStyles } from "@saleor/macaw-ui";
 
 const ProviderInstancesListSkeleton = () => {
   return (
@@ -23,6 +25,14 @@ const ProviderInstancesListSkeleton = () => {
   );
 };
 
+const useStyles = makeStyles((theme) => ({
+  menuItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+  },
+}));
+
 interface ProviderInstancesListProps {
   providerInstances: SingleProviderSchema[];
   activeProviderInstance?: SingleProviderSchema | null;
@@ -42,6 +52,8 @@ export const ProviderInstancesSelect = ({
   loading,
   errors,
 }: ProviderInstancesListProps) => {
+  const styles = useStyles();
+
   const handleSetActiveProviderInstance = (providerInstance: SingleProviderSchema) => {
     setActiveProviderInstance(providerInstance);
   };
@@ -73,7 +85,10 @@ export const ProviderInstancesSelect = ({
       >
         {providerInstances.map((p) => (
           <MenuItem key={p.id} value={p.id}>
-            {p.name}
+            <div className={styles.menuItem}>
+              <ProviderIcon providerName={p.providerName} small />
+              {p.name}
+            </div>
           </MenuItem>
         ))}
       </Select>

apps/cms/src/modules/provider-instances/ui/provider-instances.tsx

@@ -26,7 +26,7 @@ export const ProviderInstances = () => {
   const [newProviderInstance, setNewProviderInstance] = useState<SingleProviderSchema | null>(null);
 
   useEffect(() => {
-    if (providerInstances.length) {
+    if (providerInstances.length && !activeProviderInstanceId) {
       setActiveProviderInstanceId(providerInstances[0].id);
     }
   }, [providerInstances]);