diff --git a/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.spec.tsx b/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.spec.tsx index f8554703c5d..578b55a2a01 100644 --- a/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.spec.tsx +++ b/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.spec.tsx @@ -288,11 +288,15 @@ describe('ExternalSecretsTab', () => { ) await userEvent.click(screen.getByRole('button', { name: /add secret/i })) + await userEvent.click(screen.getByRole('menuitem', { name: 'Add secret as variable' })) const modalContent = openModal.mock.calls[0][0].content as ReactElement<{ onSubmit: (secret: AddSecretModalSubmitData) => Promise + isFile?: boolean }> + expect(modalContent.props.isFile).toBe(false) + await modalContent.props.onSubmit({ name: 'MY_EXTERNAL_SECRET', reference: 'prod/database/credentials', @@ -315,6 +319,43 @@ describe('ExternalSecretsTab', () => { expect(onCreateSecret).toHaveBeenCalled() }) + it('should open the file secret creation modal from the empty state dropdown', async () => { + const openModal = jest.fn() + useModalMock.mockReturnValue({ + openModal, + closeModal: jest.fn(), + }) + useVariablesMock.mockReturnValue({ + data: [], + isLoading: false, + } as ReturnType) + useVariablesSecretManagersMock.mockReturnValue({ + secretManagers: [ + { + id: 'sm-1', + name: 'Prod secret manager', + created_at: '2026-01-01T00:00:00.000Z', + updated_at: '2026-01-01T00:00:00.000Z', + endpoint: { mode: 'AWS_SECRET_MANAGER' }, + authentication: { mode: 'STS' }, + }, + ], + hasClusterSecretManagerConfigured: true, + clusterId: 'cluster-id', + }) + + const { userEvent } = renderWithProviders() + + await userEvent.click(screen.getByRole('button', { name: /add secret/i })) + await userEvent.click(screen.getByRole('menuitem', { name: 'Add secret as file' })) + + const modalContent = openModal.mock.calls[0][0].content as ReactElement<{ + isFile?: boolean + }> + + expect(modalContent.props.isFile).toBe(true) + }) + it('should call delete callback after deleting an external secret', async () => { const deleteVariable = jest.fn() const openModalConfirmation = jest.fn() diff --git a/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.tsx b/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.tsx index 53c972634be..f1c0033f270 100644 --- a/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.tsx +++ b/libs/domains/variables/feature/src/lib/external-secrets/external-secrets-tab.tsx @@ -74,6 +74,36 @@ type ExternalSecretRow = { const columnHelper = createColumnHelper() +type AddSecretDropdownProps = { + color?: 'brand' | 'neutral' + onSelect: (isFile: boolean) => void +} + +function AddSecretDropdown({ color = 'brand', onSelect }: AddSecretDropdownProps) { + return ( + + + + + + {ADD_SECRET_OPTIONS.map((option) => ( + } + onSelect={() => onSelect(option.value === 'file')} + > + {option.label} + + ))} + + + ) +} + export type ExternalSecretsTabProps = { scope: VariableScope parentId: string @@ -308,19 +338,7 @@ export function ExternalSecretsTab({ title: 'No external secrets yet', description: 'Add a secret or connect a secret manager to sync external secrets.', icon: 'lock-keyhole' as const, - actions: ( - - ), + actions: , } }, [clusterId, handleOpenAddSecret, hasClusterSecretManagerConfigured, organizationId, secrets.length]) @@ -518,26 +536,7 @@ export function ExternalSecretsTab({ value={search} onChange={(e) => setSearch(e.target.value)} /> - - - - - - {ADD_SECRET_OPTIONS.map((option) => ( - } - onSelect={() => handleOpenAddSecret(option.value === 'file')} - > - {option.label} - - ))} - - + )}