feat(secret-managers): enhance secret manager options with type labels and improve clone environment modal functionality

Author: TheoGrandin74

apps/console-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/addons.tsx

@@ -74,10 +74,10 @@ const SECRET_MANAGER_USE_CASES: UseCaseOption[] = [
 ]
 
 const SECRET_MANAGER_OPTIONS: SecretManagerOption[] = [
-  { value: 'aws-manager', label: 'AWS Manager type', icon: 'AWS' },
-  { value: 'aws-parameter', label: 'AWS Parameter store', icon: 'AWS' },
-  { value: 'gcp-secret', label: 'GCP Secret manager', icon: 'GCP' },
-].map((option) => ({ ...option, typeLabel: option.label }))
+  { value: 'aws-manager', label: 'AWS Manager type', icon: 'AWS', typeLabel: 'AWS Manager type' },
+  { value: 'aws-parameter', label: 'AWS Parameter store', icon: 'AWS', typeLabel: 'AWS Parameter store' },
+  { value: 'gcp-secret', label: 'GCP Secret manager', icon: 'GCP', typeLabel: 'GCP Secret manager' },
+]
 
 const BASE_SECRET_MANAGERS: SecretManagerItem[] = [
   {

libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx

@@ -36,6 +36,12 @@ export type CloneMigrationUseCaseOption = {
   id: string
   label: string
 }
+type CloneUseCaseOverrides = {
+  forceDifferentCluster?: boolean
+  forceSelfManaged?: boolean
+  sourceManagers?: SecretManagerDescriptor[]
+  targetManagers?: SecretManagerDescriptor[]
+}
 
 const SECRET_MANAGER_FIXTURES = {
   awsProd: { id: 'secret-manager-aws-prod', name: 'Prod secret manager', provider: 'AWS' as const },
@@ -157,24 +163,10 @@ function CloneMigrationHelperModal({
             <button
               type="button"
               onClick={() => handleSelect('migrate')}
-              className={`${cardBase} ${
-                selectedAction === 'migrate'
-                  ? 'outline-brand-strong focus:outline-brand-strong'
-                  : 'outline-neutral focus:outline-neutral'
-              }`}
+              className={`${cardBase} outline-neutral focus:outline-neutral`}
             >
-              <div
-                className={`${iconBase} ${
-                  selectedAction === 'migrate'
-                    ? 'bg-surface-brand-component text-brand'
-                    : 'bg-surface-neutral-component'
-                }`}
-              >
-                <Icon
-                  iconName="right-left"
-                  iconStyle="regular"
-                  className={selectedAction === 'migrate' ? 'text-brand' : undefined}
-                />
+              <div className={`${iconBase} bg-surface-neutral-component`}>
+                <Icon iconName="right-left" iconStyle="regular" />
               </div>
               <div className="flex flex-col gap-1">
                 <span className="text-sm font-medium text-neutral">Migrate to another secret manager</span>
@@ -430,7 +422,7 @@ export function CreateCloneEnvironmentModal({
     [clusters, environmentToClone?.cluster_id]
   )
   const isSelfManagedTarget = selectedCluster?.kubernetes === KubernetesEnum.SELF_MANAGED
-  const useCaseOverrides = useMemo(() => {
+  const useCaseOverrides = useMemo<CloneUseCaseOverrides>(() => {
     return match(selectedCaseId)
       .with('self-managed', () => ({
         forceDifferentCluster: true,
@@ -485,6 +477,10 @@ export function CreateCloneEnvironmentModal({
   }
 
   const onSubmit = methods.handleSubmit(async ({ name, cluster, mode, project_id }) => {
+    if (!cluster) {
+      return
+    }
+
     if (environmentToClone) {
       const payload = {
         name,

libs/domains/services/feature/src/lib/service-variables-tabs/service-variables-external-secrets-tab.tsx

@@ -297,7 +297,6 @@ function AddSecretModal({
             render={({ field }) => (
               <InputSelect
                 className="mb-3 w-full"
-                name={field.name}
                 label="Source"
                 portal
                 options={SECRET_SOURCES.map((option) => ({
@@ -327,7 +326,6 @@ function AddSecretModal({
             render={({ field }) => (
               <InputSelect
                 className="mb-3 w-full"
-                name={field.name}
                 label="Reference"
                 options={REFERENCE_OPTIONS.map((reference) => ({ label: reference, value: reference }))}
                 value={field.value}
@@ -446,7 +444,6 @@ function AttachSecretsModal({ selectedCount, onClose, onAttach }: AttachSecretsM
             render={({ field }) => (
               <InputSelect
                 className="mb-3 w-full"
-                name={field.name}
                 label="Source"
                 portal
                 options={SECRET_SOURCES.map((option) => ({
@@ -945,7 +942,6 @@ export function ExternalSecretsTab({ selectedCaseId = 'filled' }: ExternalSecret
           <div className="flex items-center gap-2">
             <TableFilterSearch
               className="h-8 w-[200px]"
-              placeholder="Search secrets"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />

libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx

@@ -15,8 +15,10 @@ const toolbarButtonVariants = cva(['active:scale-100'], {
     color: {
       brand: [],
       neutral: [],
+      neutralInverted: [],
       green: [],
       red: [],
+      redInverted: [],
       yellow: [],
       current: [],
     },