Merge pull request #14853 from Mylanos/CONSOLE-4081-Address-tech-debt-in-EditSecret-component

openshift-merge-bot[bot] · web-flow · commit bf0a9521f8ad · 2025-03-23T07:35:43.000Z
CONSOLE-4081: Refactor EditSecret component
diff --git a/frontend/packages/dev-console/src/components/deployments/images/AdvancedImageOptions.tsx b/frontend/packages/dev-console/src/components/deployments/images/AdvancedImageOptions.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { FormikValues, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { SecretFormType } from '@console/internal/components/secrets/create-secret';
 import { ExpandCollapse } from '@console/internal/components/utils';
 import { SecretModel } from '@console/internal/models';
 import { ResourceDropdownField } from '@console/shared/src';
@@ -58,7 +58,7 @@ const AdvancedImageOptions: React.FC = () => {
           secretModalLauncher({
             namespace,
             save: handleSave,
-            secretType: SecretTypeAbstraction.image,
+            formType: SecretFormType.image,
           })
         }
       >
diff --git a/frontend/packages/dev-console/src/components/import/CreateSecretModal.tsx b/frontend/packages/dev-console/src/components/import/CreateSecretModal.tsx
@@ -5,18 +5,18 @@ import {
 } from '@console/internal/components/factory/modal';
 import {
   SecretFormWrapper,
-  SecretTypeAbstraction,
+  SecretFormType,
 } from '@console/internal/components/secrets/create-secret';
 
 export interface CreateSecretModalProps {
   save?: (name: string) => void;
   namespace: string;
-  secretType: SecretTypeAbstraction;
+  formType: SecretFormType;
 }
 
 type Props = CreateSecretModalProps & ModalComponentProps;
 
-const CreateSecretModal: React.FC<Props> = ({ close, namespace, save, secretType }) => {
+const CreateSecretModal: React.FC<Props> = ({ close, namespace, save, formType }) => {
   const handleSave = (name: string) => {
     close();
     save(name);
@@ -27,7 +27,7 @@ const CreateSecretModal: React.FC<Props> = ({ close, namespace, save, secretType
       onCancel={close}
       onSave={handleSave}
       fixed={{ metadata: { namespace } }}
-      secretTypeAbstraction={secretType}
+      formType={formType}
       isCreate
       modal
     />
diff --git a/frontend/packages/dev-console/src/components/import/git/SourceSecretSelector.tsx b/frontend/packages/dev-console/src/components/import/git/SourceSecretSelector.tsx
@@ -3,7 +3,7 @@ import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternf
 import { useFormikContext, FormikValues } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { SecretFormType } from '@console/internal/components/secrets/create-secret';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { SecretModel } from '@console/internal/models';
 import { getFieldId } from '@console/shared';
@@ -44,7 +44,7 @@ const SourceSecretSelector: React.FC<{
       secretModalLauncher({
         namespace,
         save: handleSave,
-        secretType: SecretTypeAbstraction.source,
+        formType: SecretFormType.source,
       });
     } else if (key === CLEAR_SOURCE_SECRET) {
       setFieldValue(`${fieldPrefix}git.secret`, '');
diff --git a/frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx b/frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx
@@ -9,7 +9,7 @@ import {
 import { useFormikContext, FormikValues, FormikTouched } from 'formik';
 import * as _ from 'lodash';
 import { Trans, useTranslation } from 'react-i18next';
-import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { SecretFormType } from '@console/internal/components/secrets/create-secret';
 import { ImageStreamImportsModel } from '@console/internal/models';
 import { k8sCreate, ContainerPort } from '@console/internal/module/k8s';
 import { InputField, useDebounceCallback, CheckboxField } from '@console/shared';
@@ -268,7 +268,7 @@ const ImageSearch: React.FC = () => {
               secretModalLauncher({
                 namespace,
                 save: handleSave,
-                secretType: SecretTypeAbstraction.image,
+                formType: SecretFormType.image,
               })
             }
           >
diff --git a/frontend/packages/shipwright-plugin/src/components/build-form/PushSecretSelector.tsx b/frontend/packages/shipwright-plugin/src/components/build-form/PushSecretSelector.tsx
@@ -4,7 +4,7 @@ import { useFormikContext, FormikValues } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { secretModalLauncher } from '@console/dev-console/src/components/import/CreateSecretModal';
-import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { SecretFormType } from '@console/internal/components/secrets/create-secret';
 import { getFieldId } from '@console/shared';
 import PushSecretDropdown from './PushSecretDropdown';
 
@@ -31,7 +31,7 @@ const PushSecretSelector: React.FC<{
       secretModalLauncher({
         namespace,
         save: handleSave,
-        secretType: SecretTypeAbstraction.image,
+        formType: SecretFormType.image,
       });
     } else if (key === CLEAR_PULL_SECRET) {
       setFieldValue(`${fieldPrefix}`, '');
diff --git a/frontend/public/components/secrets/create-secret/CreateSecret.tsx b/frontend/public/components/secrets/create-secret/CreateSecret.tsx
@@ -1,14 +1,14 @@
 import { useParams } from 'react-router-dom-v5-compat';
-import { SecretTypeAbstraction } from './types';
+import { SecretFormType } from './types';
 import { SecretFormWrapper } from './SecretFormWrapper';
 
 export const CreateSecret = () => {
   const params = useParams();
-  const secretTypeAbstraction = params.type as SecretTypeAbstraction;
+  const formType = params.type as SecretFormType;
   return (
     <SecretFormWrapper
       fixed={{ metadata: { namespace: params.ns } }}
-      secretTypeAbstraction={secretTypeAbstraction}
+      formType={formType}
       isCreate={true}
     />
   );
diff --git a/frontend/public/components/secrets/create-secret/EditSecret.tsx b/frontend/public/components/secrets/create-secret/EditSecret.tsx
@@ -1,81 +1,43 @@
-import * as _ from 'lodash-es';
 import * as React from 'react';
-import { useTranslation, withTranslation } from 'react-i18next';
-import { WithT } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
-import { LoadingBox } from '@console/shared/src/components/loading/LoadingBox';
 import { StatusBox } from '@console/shared/src/components/status/StatusBox';
-import { K8sResourceKind } from '../../../module/k8s';
-import { Firehose } from '../../utils/firehose';
-import { SecretTypeAbstraction } from './types';
-import { toTypeAbstraction } from './utils';
+import { K8sResourceKind } from '@console/internal/module/k8s';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { SecretFormType } from './types';
+import { toSecretFormType } from './utils';
 import { SecretFormWrapper } from './SecretFormWrapper';
 
-export const SecretLoadingWrapper = withTranslation()(
-  class SecretLoadingWrapper extends React.Component<
-    SecretLoadingWrapperProps & WithT,
-    SecretLoadingWrapperState
-  > {
-    readonly state: SecretLoadingWrapperState = {
-      secretTypeAbstraction: SecretTypeAbstraction.generic,
-    };
-    componentDidUpdate() {
-      if (!_.isEmpty(this.props.obj.data)) {
-        const secretTypeAbstraction = toTypeAbstraction(this.props.obj.data);
-        if (this.state.secretTypeAbstraction !== secretTypeAbstraction) {
-          this.setState({
-            secretTypeAbstraction,
-          });
-        }
-      }
-    }
-    render() {
-      const { obj, fixedKeys } = this.props;
-      const { secretTypeAbstraction } = this.state;
-      if (!secretTypeAbstraction) {
-        return <LoadingBox />;
-      }
-      const fixed = fixedKeys?.reduce((acc, k) => ({ ...acc, [k]: obj.data?.[k] || '' }), {});
+export const EditSecret: React.FC<EditSecretProps> = ({ kind }) => {
+  const { name, ns } = useParams();
 
-      return (
-        <StatusBox {...obj}>
-          <SecretFormWrapper
-            {...this.props}
-            secretTypeAbstraction={secretTypeAbstraction}
-            obj={obj.data}
-            fixed={fixed}
-          />
-        </StatusBox>
-      );
-    }
-  },
-);
+  const [secret, secretLoaded, secretError] = useK8sWatchResource<K8sResourceKind>({
+    kind,
+    isList: false,
+    namespace: ns,
+    name,
+  });
+
+  const fixedData = secretLoaded
+    ? ['kind', 'metadata'].reduce((acc, k) => ({ ...acc, [k]: secret[k] || '' }), {})
+    : null;
+
+  const formType = secretLoaded ? toSecretFormType(secret) : SecretFormType.generic;
 
-export const EditSecret = ({ kind }: EditSecretProps) => {
-  const params = useParams();
   const { t } = useTranslation();
+
   return (
-    <Firehose
-      resources={[{ kind, name: params.name, namespace: params.ns, isList: false, prop: 'obj' }]}
-    >
-      <SecretLoadingWrapper fixedKeys={['kind', 'metadata']} saveButtonText={t('public~Save')} />
-    </Firehose>
+    <StatusBox loaded={secretLoaded} data={secret} loadError={secretError}>
+      <SecretFormWrapper
+        formType={formType}
+        obj={secret}
+        saveButtonText={t('public~Save')}
+        fixed={fixedData}
+      />
+    </StatusBox>
   );
 };
 
 type EditSecretProps = {
   kind: string;
 };
-
-type SecretLoadingWrapperProps = {
-  obj?: {
-    data?: K8sResourceKind;
-    [key: string]: any;
-  };
-  fixedKeys: string[];
-  saveButtonText: string;
-};
-
-type SecretLoadingWrapperState = {
-  secretTypeAbstraction: SecretTypeAbstraction;
-};
diff --git a/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx b/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
@@ -11,7 +11,7 @@ import { PageHeading } from '../../utils/headings';
 import { resourceObjPath } from '../../utils/resource-link';
 import { ModalBody, ModalTitle, ModalSubmitFooter } from '../../factory/modal';
 import { SecretModel } from '../../../models';
-import { SecretTypeAbstraction } from './types';
+import { SecretFormType } from './types';
 import {
   toDefaultSecretType,
   determineSecretType,
@@ -22,13 +22,13 @@ import { SecretSubForm } from './SecretSubForm';
 import { isBinary } from 'istextorbinary';
 
 export const SecretFormWrapper: React.FC<BaseEditSecretProps_> = (props) => {
-  const { isCreate, modal, onCancel, secretTypeAbstraction } = props;
+  const { formType, isCreate, modal, onCancel } = props;
   const { t } = useTranslation();
   const navigate = useNavigate();
   const params = useParams();
 
   const existingSecret = _.pick(props.obj, ['metadata', 'type']);
-  const defaultSecretType = toDefaultSecretType(secretTypeAbstraction);
+  const defaultSecretType = toDefaultSecretType(formType);
   const initialSecret = _.defaultsDeep({}, props.fixed, existingSecret, {
     apiVersion: 'v1',
     data: {},
@@ -52,8 +52,8 @@ export const SecretFormWrapper: React.FC<BaseEditSecretProps_> = (props) => {
   );
   const [base64StringData, setBase64StringData] = React.useState(props?.obj?.data ?? {});
   const [disableForm, setDisableForm] = React.useState(false);
-  const title = useSecretTitle(isCreate, secretTypeAbstraction);
-  const helptext = useSecretDescription(secretTypeAbstraction);
+  const title = useSecretTitle(isCreate, formType);
+  const helptext = useSecretDescription(formType);
   const cancel = () => navigate(`/k8s/ns/${params.ns}/core~v1~Secret`);
 
   const onDataChanged = (secretsData) => {
@@ -142,7 +142,7 @@ export const SecretFormWrapper: React.FC<BaseEditSecretProps_> = (props) => {
           </div>
         </fieldset>
         <SecretSubForm
-          typeAbstraction={props.secretTypeAbstraction}
+          formType={formType}
           onChange={onDataChanged}
           onError={onError}
           onFormDisable={(disable) => setDisableForm(disable)}
@@ -201,7 +201,7 @@ type BaseEditSecretProps_ = {
   kind?: string;
   isCreate?: boolean;
   modal?: boolean;
-  secretTypeAbstraction?: SecretTypeAbstraction;
+  formType?: SecretFormType;
   saveButtonText?: string;
   onCancel?: () => void;
   onSave?: (name: string) => void;
diff --git a/frontend/public/components/secrets/create-secret/SecretSubForm.tsx b/frontend/public/components/secrets/create-secret/SecretSubForm.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react';
-import { SecretSubFormProps, SecretTypeAbstraction } from './types';
+import { SecretSubFormProps, SecretFormType } from './types';
 import { AuthSecretForm } from './AuthSecretForm';
 import { PullSecretForm } from './PullSecretForm';
 import { WebHookSecretForm } from './WebHookSecretForm';
 import { OpaqueSecretForm } from './OpaqueSecretForm';
 
-export const SecretSubForm: React.FC<
-  SecretSubFormProps & { typeAbstraction: SecretTypeAbstraction }
-> = ({ typeAbstraction, ...props }) => {
-  switch (typeAbstraction) {
-    case SecretTypeAbstraction.source:
+export const SecretSubForm: React.FC<SecretSubFormProps & { formType: SecretFormType }> = ({
+  formType,
+  ...props
+}) => {
+  switch (formType) {
+    case SecretFormType.source:
       return <AuthSecretForm {...props} />;
-    case SecretTypeAbstraction.image:
+    case SecretFormType.image:
       return <PullSecretForm {...props} />;
-    case SecretTypeAbstraction.webhook:
+    case SecretFormType.webhook:
       return <WebHookSecretForm {...props} />;
     default:
       return <OpaqueSecretForm {...props} />;
diff --git a/frontend/public/components/secrets/create-secret/types.ts b/frontend/public/components/secrets/create-secret/types.ts
@@ -1,4 +1,4 @@
-export enum SecretTypeAbstraction {
+export enum SecretFormType {
   generic = 'generic',
   source = 'source',
   image = 'image',
diff --git a/frontend/public/components/secrets/create-secret/utils.ts b/frontend/public/components/secrets/create-secret/utils.ts
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export enum SecretTypeAbstraction {`
	`1`	`+export enum SecretFormType {`
`2`	`2`	`generic = 'generic',`
`3`	`3`	`source = 'source',`
`4`	`4`	`image = 'image',`