Merge pull request #211 from docker/miscellaneous-fixes-4

Spacing for secrets

Author: dgageot

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

@@ -82,14 +82,15 @@ const ConfigEditor = ({
   return (
     <Stack spacing={1}>
       <Typography variant="subtitle2">Parameters</Typography>
-      <Stack direction="column" spacing={2}>
+      <Stack direction="column" spacing={1}>
         {Object.keys(flattenedConfig).map((key: string) => {
           const edited = localConfig[key] !== flattenedConfig[key];
           const isSaving = savingKeys.has(key);
 
           return (
             <Stack key={key} direction="row" spacing={2}>
               <TextField
+                fullWidth
                 size="small"
                 label={key}
                 value={localConfig[key] || ''}

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

@@ -252,6 +252,7 @@ const ConfigurationModal = ({
               <Stack
                 spacing={1}
                 sx={{
+                  padding: 1,
                   overflow: 'auto',
                   height: 'calc(80vh - 200px)',
                   minHeight: '180px',
@@ -272,12 +273,13 @@ const ConfigurationModal = ({
               <Stack
                 spacing={1}
                 sx={{
+                  padding: 1,
                   overflow: 'auto',
                   height: 'calc(80vh - 200px)',
                   minHeight: '180px',
                 }}
               >
-                <Stack direction="column" spacing={2}>
+                <Stack direction="column" spacing={2} >
                   <ConfigEditor catalogItem={catalogItem} client={client} />
 
                   {catalogItem.secrets?.length > 0 && (

src/extension/ui/src/queries/useSecrets.ts

@@ -1,34 +1,28 @@
-import { v1 } from "@docker/extension-api-client-types";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import Secrets from "../Secrets";
-import { Secret } from "../types";
+import { v1 } from '@docker/extension-api-client-types';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import Secrets from '../Secrets';
+import { Secret } from '../types';
 
 export function useSecrets(client: v1.DockerDesktopClient) {
   const queryClient = useQueryClient();
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["secrets"],
+    queryKey: ['secrets'],
     queryFn: async () => {
       const secrets = await Secrets.getSecrets(client);
       return secrets;
     },
   });
   const mutate = useMutation({
     mutationFn: async (secret: Secret) => {
-      queryClient.setQueryData(["secrets"], (old: Secret[]) => {
-        if (!secret.value) {
-          return old.filter((s) => s.name !== secret.name);
-        }
-        return [...old, secret];
-      });
       if (!secret.value) {
         return Secrets.deleteSecret(client, secret.name);
       }
       return Secrets.addSecret(client, secret);
     },
     onSuccess: () => {
       // Invalidate and refetch secrets after mutation
-      queryClient.invalidateQueries({ queryKey: ["secrets"] });
+      queryClient.invalidateQueries({ queryKey: ['secrets'] });
     },
   });
   return { data, isLoading, error, mutate };