Correctly model enriched catalog item in response to mutations

Author: colinmcneil

src/extension/ui/src/Secrets.ts

@@ -1,7 +1,7 @@
 // From secrets.yaml
 
 import { v1 } from "@docker/extension-api-client-types";
-import { CatalogItemRichened } from "./types/catalog";
+import { CatalogItemRichened, CatalogItemWithName } from "./types/catalog";
 import { Secret, StoredSecret, Policy } from "./types/secrets";
 
 namespace Secrets {
@@ -55,12 +55,12 @@ namespace Secrets {
     }
 
     // Get all relevant secrets for a given set of catalog items
-    export function getAllSecretNames(catalogItems: CatalogItemRichened[]): string[] {
+    export function getAllSecretNames(catalogItems: CatalogItemWithName[]): string[] {
         return catalogItems.map((item) => item.secrets || []).flat().map((secret) => secret.name);
     }
 
     // Whether or not each secret has been assigned for a given catalog item
-    export function getSecretsWithAssignment(catalogItem: CatalogItemRichened, secrets: Secret[]): { name: string, assigned: boolean }[] {
+    export function getSecretsWithAssignment(catalogItem: CatalogItemWithName, secrets: Secret[]): { name: string, assigned: boolean }[] {
         return catalogItem.secrets?.map((secret) => ({ name: secret.name, assigned: secrets.some((s) => s.name === secret.name) })) || [];
     }
 }

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

@@ -94,7 +94,7 @@ const Tile = ({ item, client, unAssignedConfig }: TileProps) => {
                             } else {
                                 unregisterCatalogItem(item)
                             }
-                        }} item={item} unAssignedConfig={unAssignedConfig} unAssignedSecrets={unAssignedSecrets} registered={true} />
+                        }} item={item} unAssignedConfig={unAssignedConfig} unAssignedSecrets={unAssignedSecrets} registered={item.registered} />
                         <Center item={item} />
                         <Divider sx={{ marginBottom: 1 }} />
                         <Bottom item={item} needsConfiguration={Boolean(unAssignedSecrets.length || unAssignedConfig.length)} />

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

@@ -131,7 +131,7 @@ const ConfigurationModal = ({
                     {catalogItem.description}
                 </Typography>
                 <Tooltip placement="right" title={!canRegister ? 'You must assign all secrets and configure the item before it can be used.' : ''}>
-                    <FormControlLabel control={<Switch disabled={!canRegister} checked={true} onChange={(e) => registerCatalogItem(catalogItem)} />} label={registered ? 'Disable ' + `${catalogItem.name} tools` : 'Enable ' + `${catalogItem.name} tools`} sx={{ mt: 2 }} />
+                    <FormControlLabel control={<Switch disabled={!canRegister} checked={catalogItem.registered} onChange={(e) => registerCatalogItem(catalogItem)} />} label={catalogItem.registered ? 'Disable ' + `${catalogItem.name} tools` : 'Enable ' + `${catalogItem.name} tools`} sx={{ mt: 2 }} />
                 </Tooltip>
                 <Divider sx={{ mt: 2 }} />
                 <Typography variant="caption" sx={{ mt: 2, color: 'text.secondary' }}>

src/extension/ui/src/hooks/useCatalog.ts

@@ -1,5 +1,5 @@
 import { v1 } from "@docker/extension-api-client-types";
-import { CatalogItemRichened } from '../types/catalog';
+import { CatalogItem, CatalogItemRichened, CatalogItemWithName } from '../types/catalog';
 import { getRegistry } from '../Registry';
 import Secrets from '../Secrets';
 import { parse } from 'yaml';
@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { escapeJSONForPlatformShell, tryRunImageSync } from '../FileUtils';
 import { useConfig } from './useConfig';
 import { useRequiredImages } from './useRequiredImages';
+import { useSecrets } from "./useSecrets";
 
 // Storage keys for each query type
 const STORAGE_KEYS = {
@@ -26,6 +27,30 @@ interface QueryContextWithMeta {
 
 export function useCatalog(client: v1.DockerDesktopClient) {
     const queryClient = useQueryClient();
+    const { data: secrets } = useSecrets(client);
+    const { registryItems } = useRegistry(client);
+    const { config } = useConfig(client);
+
+    const enrichCatalogItem = (item: CatalogItemWithName): CatalogItemRichened => {
+        const secretsWithAssignment = Secrets.getSecretsWithAssignment(item, secrets || []);
+        const itemConfigValue = config?.[item.name] || {};
+        const unConfigured = Object.keys(itemConfigValue).length === 0;
+        const missingASecret = secretsWithAssignment.some((secret) => !secret.assigned);
+        const enrichedItem = {
+            ...item,
+            secrets: secretsWithAssignment,
+            configValue: itemConfigValue,
+            configSchema: item.config,
+            registered: !!registryItems?.[item.name],
+            canRegister: !registryItems?.[item.name] && !missingASecret && !unConfigured,
+            name: item.name,
+        };
+        delete enrichedItem.config;
+        if (item.name === 'atlassian') {
+            console.log(enrichedItem);
+        }
+        return enrichedItem;
+    };
 
     const {
         data: catalogItems = [],
@@ -40,11 +65,11 @@ export function useCatalog(client: v1.DockerDesktopClient) {
                 const response = await fetch(CATALOG_URL);
                 const catalog = await response.text();
                 const items = parse(catalog)['registry'] as { [key: string]: any };
-                const itemsWithName = Object.entries(items).map(([name, item]) => ({ name, ...item }));
+                const itemsWithName = Object.entries(items).map(([name, item]) => ({ name, ...item })) as CatalogItemWithName[];
                 if (showNotification) {
                     client.desktopUI.toast.success('Catalog updated successfully.');
                 }
-                return itemsWithName.reverse() as CatalogItemRichened[];
+                return itemsWithName.reverse().map(enrichCatalogItem);
             } catch (error) {
                 client.desktopUI.toast.error('Failed to get latest catalog.' + error);
                 throw error;
@@ -323,19 +348,12 @@ export function useCatalogOperations(client: v1.DockerDesktopClient) {
         }
     });
 
-    const getCanRegisterCatalogItem = (item: CatalogItemRichened): boolean => {
-        if (!registryItems) return false;
-        const isRegistered = !!registryItems[item.name];
-        return !isRegistered && canRegister;
-    };
-
     return {
         registerCatalogItem: (item: CatalogItemRichened, showNotification = true) =>
             registerItemMutation.mutateAsync({ item, showNotification }),
         unregisterCatalogItem: (item: CatalogItemRichened) =>
             unregisterItemMutation.mutateAsync(item),
         startPull: () => startPullMutation.mutateAsync(),
-        getCanRegisterCatalogItem
     };
 }
 
@@ -346,7 +364,6 @@ export function useCatalogAll(client: v1.DockerDesktopClient) {
         registerCatalogItem,
         unregisterCatalogItem,
         startPull,
-        getCanRegisterCatalogItem
     } = useCatalogOperations(client);
 
     return {
@@ -363,6 +380,5 @@ export function useCatalogAll(client: v1.DockerDesktopClient) {
         registerCatalogItem,
         unregisterCatalogItem,
         startPull,
-        getCanRegisterCatalogItem
     };
 } 

src/extension/ui/src/types/catalog/index.ts

@@ -16,13 +16,18 @@ export interface CatalogItem {
     config?: any; // Configuration type
 }
 
+export interface CatalogItemWithName extends CatalogItem {
+    name: string;
+}
+
 /**
  * Interface for a catalog item with a name
  */
 export interface CatalogItemRichened extends CatalogItem {
     name: string;
-    secrets: Secret[];
-    config: { [key: string]: any };
+    secrets: { name: string, assigned: boolean }[];
+    configValue: { [key: string]: any };
+    configSchema: any;
     registered: boolean;
     canRegister: boolean;
 }