Merge pull request #270 from docker/fix-required-secrets-parameters

Fix required parameters

Author: dgageot

src/extension/ui/src/components/tile/Modal.tsx

@@ -418,7 +418,7 @@ const ConfigurationModal = ({
                                     }
                                     disabled={secret.assigned}
                                     key={secret.name}
-                                    label={secret.name}
+                                    label={`${secret.name} (required)`}
                                     value={localSecrets[secret.name]}
                                     fullWidth
                                     onChange={(e) => {

src/extension/ui/src/queries/useCatalog.ts

@@ -1,13 +1,19 @@
 import { v1 } from '@docker/extension-api-client-types';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { isEmpty, isEqual } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { parse, stringify } from 'yaml';
+
 import { CATALOG_URL, REGISTRY_YAML } from '../Constants';
 import { getRegistry, syncRegistryWithConfig } from '../Registry';
 import Secrets from '../Secrets';
 import { CatalogItemRichened, CatalogItemWithName } from '../types/catalog';
 import { writeToPromptsVolume } from '../utils/Files';
-import { getTemplateForItem, useConfig } from './useConfig';
+import {
+  getRequiredParameters,
+  getTemplateForItem,
+  useConfig,
+} from './useConfig';
 import { useSecrets } from './useSecrets';
 
 const STORAGE_KEYS = {
@@ -33,11 +39,18 @@ function useCatalog(client: v1.DockerDesktopClient) {
       );
       const configTemplate = getTemplateForItem(item, itemConfigValue);
       const baseConfigTemplate = getTemplateForItem(item, {});
-      const unConfigured =
-        Boolean(item.config) &&
-        (neverOnceConfigured ||
-          JSON.stringify(itemConfigValue) ===
-            JSON.stringify(baseConfigTemplate));
+      const requiredParameters = getRequiredParameters(item);
+
+      // Check if any required parameters are not configured
+      const missingConfig =
+        !isEmpty(item.config) &&
+        requiredParameters.some((key) => {
+          const isMissing = isEqual(
+            itemConfigValue[key],
+            baseConfigTemplate[key],
+          );
+          return isMissing;
+        });
 
       const missingASecret = secretsWithAssignment.some(
         (secret) => !secret.assigned,
@@ -48,10 +61,10 @@ function useCatalog(client: v1.DockerDesktopClient) {
         configValue: itemConfigValue,
         configSchema: item.config || {},
         configTemplate,
-        missingConfig: unConfigured,
+        missingConfig,
         missingSecrets: missingASecret,
         registered: !!registryItems?.[item.name],
-        canRegister: !missingASecret && !unConfigured,
+        canRegister: !missingASecret && !missingConfig,
         name: item.name,
       };
       return enrichedItem;

src/extension/ui/src/queries/useConfig.ts

@@ -10,15 +10,22 @@ import { writeToPromptsVolume } from '../utils/Files';
 
 export const getTemplateForItem = (
   item: CatalogItemWithName,
-  existingConfigForItem: { [key: string]: any } = {}
+  existingConfigForItem: { [key: string]: any } = {},
 ) => {
   const config = item.config;
   if (!config) return {};
   const schema = new JsonSchemaLibrary.Draft2019(config[0]);
-  const template = schema.getTemplate(existingConfigForItem);
+  const template = schema.getTemplate(existingConfigForItem) ?? {};
   return template;
 };
 
+export function getRequiredParameters(item: CatalogItemWithName): string[] {
+  const config = item.config;
+  if (!config) return [];
+  const schema = new JsonSchemaLibrary.Draft2019(config[0]);
+  return (schema.rootSchema.required || []) as string[];
+}
+
 export function useConfig(client: v1.DockerDesktopClient) {
   const queryClient = useQueryClient();
 
@@ -59,7 +66,7 @@ export function useConfig(client: v1.DockerDesktopClient) {
         await writeToPromptsVolume(
           client,
           CONFIG_YAML,
-          stringify(updatedConfig)
+          stringify(updatedConfig),
         );
 
         const updatedConfigRef = JSON.parse(JSON.stringify(updatedConfig));
@@ -91,7 +98,7 @@ export function useConfig(client: v1.DockerDesktopClient) {
 
   const saveConfig = async (
     itemName: string,
-    newConfig: { [key: string]: any }
+    newConfig: { [key: string]: any },
   ) => {
     try {
       await saveConfigMutation.mutateAsync({ itemName, newConfig });