Merge pull request #1746 from redpanda-data/front-end/secrets/add-scope

Andres Aristizabal · web-flow · commit f3496d7cb18a · 2025-04-29T15:13:13.000-05:00
frontend: add scopes selection to secret creation and update modals
diff --git a/frontend/src/components/pages/secrets/create-secret-modal.test.tsx b/frontend/src/components/pages/secrets/create-secret-modal.test.tsx
@@ -57,6 +57,10 @@ describe('CreateSecretModal', () => {
     fireEvent.change(screen.getByTestId('secret-id-field'), { target: { value: secretId } });
     fireEvent.change(screen.getByTestId('secret-value-field'), { target: { value: secretValue } });
 
+    fireEvent.click(screen.getByRole('combobox'));
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
+    await fireEvent.click(screen.getByText('Redpanda Connect'));
+
     fireEvent.click(screen.getByTestId('add-label-button'));
 
     fireEvent.change(screen.getByTestId('secret-labels-field-key-0'), { target: { value: 'environment' } });
diff --git a/frontend/src/components/pages/secrets/create-secret-modal.tsx b/frontend/src/components/pages/secrets/create-secret-modal.tsx
@@ -1,15 +1,20 @@
 import {
   Button,
   ButtonGroup,
+  FormErrorMessage,
+  FormField,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Select,
   Stack,
   Text,
+  UnorderedList,
+  isMultiValue,
 } from '@redpanda-data/ui';
 import { formOptions } from '@tanstack/react-form';
 import { useAppForm } from 'components/form/form';
@@ -40,12 +45,23 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
     form.reset();
   };
 
+  // Form type
+  interface Secret {
+    id: string;
+    value: string;
+    labels: string[];
+    scopes: Scope[];
+  }
+
+  const defaultValues: Secret = {
+    id: '',
+    value: '',
+    labels: [],
+    scopes: [],
+  };
+
   const formOpts = formOptions({
-    defaultValues: {
-      id: '',
-      value: '',
-      labels: [],
-    },
+    defaultValues: defaultValues,
     validators: {
       onChange: finalSchema,
     },
@@ -61,7 +77,7 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
         id: value.id,
         // @ts-ignore js-base64 does not play nice with TypeScript 5: Type 'Uint8Array<ArrayBufferLike>' is not assignable to type 'Uint8Array<ArrayBuffer>'.
         secretData: base64ToUInt8Array(encodeBase64(value.value)),
-        scopes: [Scope.REDPANDA_CONNECT],
+        scopes: value.scopes || [],
         labels: labelsMap,
       });
 
@@ -108,6 +124,41 @@ export const CreateSecretModal = ({ isOpen, onClose, customSecretSchema, helperT
                     <field.PasswordField label="Value" data-testid="secret-value-field" helperText={helperText} />
                   )}
                 </form.AppField>
+                <form.AppField name="scopes">
+                  {({ state, handleChange, handleBlur }) => (
+                    <FormField label="Scopes" errorText=" " isInvalid={state.meta.errors?.length > 0}>
+                      <Select
+                        placeholder="Select scopes"
+                        data-testid="secret-scopes-field"
+                        onChange={(nextValue) => {
+                          if (isMultiValue(nextValue) && nextValue) {
+                            handleChange(nextValue.map(({ value }) => value));
+                          }
+                        }}
+                        options={[
+                          { label: 'Redpanda Connect', value: Scope.REDPANDA_CONNECT },
+                          { label: 'Redpanda Cluster', value: Scope.REDPANDA_CLUSTER },
+                        ]}
+                        isMulti
+                        onBlur={handleBlur}
+                      />
+                      {
+                        // Display error messages like tanstack/react-form fields.
+                        state?.meta.errors?.length > 0 && (
+                          <FormErrorMessage>
+                            <UnorderedList>
+                              {state.meta.errors?.map((error) => (
+                                <li key={error.path}>
+                                  <Text color="red.500">{error.message}</Text>
+                                </li>
+                              ))}
+                            </UnorderedList>
+                          </FormErrorMessage>
+                        )
+                      }
+                    </FormField>
+                  )}
+                </form.AppField>
                 <form.AppField name="labels" mode="array">
                   {(field) => (
                     <field.KeyValueField
diff --git a/frontend/src/components/pages/secrets/form/secret-schema.ts b/frontend/src/components/pages/secrets/form/secret-schema.ts
@@ -25,4 +25,5 @@ export const secretSchema = (customValueSchema?: z.ZodTypeAny) =>
           return (label.key === '' && label.value === '') || (label.key !== '' && label.value !== '');
         });
       }, 'Both key and value must be provided for a label'),
+    scopes: z.array(z.number()).min(1, 'At least one scope is required'),
   });
diff --git a/frontend/src/components/pages/secrets/secrets-store-page.tsx b/frontend/src/components/pages/secrets/secrets-store-page.tsx
@@ -48,6 +48,8 @@ export const getScopeDisplayValue = (scope: Scope) => {
   switch (scope) {
     case Scope.REDPANDA_CONNECT:
       return 'RP Connect';
+    case Scope.REDPANDA_CLUSTER:
+      return 'Cluster';
     case Scope.UNSPECIFIED:
       return 'Unspecified';
     default:
@@ -186,7 +188,7 @@ export const SecretsStorePage = () => {
                 header: 'Scope',
                 id: 'scope',
                 cell: ({ row: { original } }) =>
-                  original?.scopes.map((scope) => <Text key={scope}>{getScopeDisplayValue(scope)}</Text>),
+                  original?.scopes.map((scope) => getScopeDisplayValue(scope)).join(', ') ?? 'No scopes',
                 size: 50,
               },
               {
diff --git a/frontend/src/components/pages/secrets/update-secret-modal.test.tsx b/frontend/src/components/pages/secrets/update-secret-modal.test.tsx
@@ -96,6 +96,10 @@ describe('UpdateSecretModal', () => {
 
     fireEvent.change(screen.getByTestId('secret-value-field'), { target: { value: updatedSecretValue } });
 
+    fireEvent.click(screen.getByRole('combobox'));
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Redpanda Connect'));
+
     fireEvent.click(screen.getByTestId('add-label-button'));
 
     fireEvent.change(screen.getByTestId('secret-labels-field-key-1'), { target: { value: 'environment' } });
diff --git a/frontend/src/components/pages/secrets/update-secret-modal.tsx b/frontend/src/components/pages/secrets/update-secret-modal.tsx
@@ -1,14 +1,20 @@
 import {
   Button,
   ButtonGroup,
+  FormErrorMessage,
+  FormField,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Select,
   Stack,
+  Text,
+  UnorderedList,
+  isMultiValue,
 } from '@redpanda-data/ui';
 import { formOptions } from '@tanstack/react-form';
 import { useAppForm } from 'components/form/form';
@@ -54,6 +60,7 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
     defaultValues: {
       id: secretId,
       value: '',
+      scopes: matchingSecret?.scopes ?? [],
       labels: existingLabels.length > 0 ? existingLabels : [],
     },
     validators: {
@@ -71,7 +78,7 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
         id: value.id,
         // @ts-ignore js-base64 does not play nice with TypeScript 5: Type 'Uint8Array<ArrayBufferLike>' is not assignable to type 'Uint8Array<ArrayBuffer>'.
         secretData: base64ToUInt8Array(encodeBase64(value.value)),
-        scopes: [Scope.REDPANDA_CONNECT],
+        scopes: value.scopes || [],
         labels: labelsMap,
       });
 
@@ -82,6 +89,11 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
 
   const form = useAppForm({ ...formOpts });
 
+  const scopeOptions = [
+    { label: 'Redpanda Connect', value: Scope.REDPANDA_CONNECT },
+    { label: 'Redpanda Cluster', value: Scope.REDPANDA_CLUSTER },
+  ];
+
   return (
     <Modal isOpen={isOpen} onClose={handleClose} onEsc={handleClose} size="lg">
       <ModalOverlay />
@@ -102,6 +114,39 @@ export const UpdateSecretModal = ({ isOpen, onClose, secretId }: UpdateSecretMod
                   {(field) => <field.PasswordField label="Value" data-testid="secret-value-field" />}
                 </form.AppField>
 
+                <form.AppField name="scopes">
+                  {({ state, handleChange, handleBlur }) => (
+                    <FormField label="Scopes" errorText=" " isInvalid={state.meta.errors?.length > 0}>
+                      <Select
+                        placeholder="Select scopes"
+                        onChange={(nextValue) => {
+                          if (isMultiValue(nextValue) && nextValue) {
+                            handleChange(nextValue.map(({ value }) => value));
+                          }
+                        }}
+                        options={scopeOptions}
+                        defaultValue={scopeOptions.filter((so) => matchingSecret?.scopes?.some((s) => so.value === s))}
+                        isMulti
+                        onBlur={handleBlur}
+                      />
+                      {
+                        // Display error messages like tanstack/react-form fields.
+                        state?.meta.errors?.length > 0 && (
+                          <FormErrorMessage>
+                            <UnorderedList>
+                              {state.meta.errors?.map((error) => (
+                                <li key={error.path}>
+                                  <Text color="red.500">{error.message}</Text>
+                                </li>
+                              ))}
+                            </UnorderedList>
+                          </FormErrorMessage>
+                        )
+                      }
+                    </FormField>
+                  )}
+                </form.AppField>
+
                 <form.AppField name="labels" mode="array">
                   {(field) => (
                     <field.KeyValueField
