Skip to content

Commit 0a2f026

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #15513 from Mylanos/RefactorSecretFormsToPF
CONSOLE-4332: Update the secrets forms to use PF components
2 parents c00c3eb + d2af24a commit 0a2f026

28 files changed

+576
-495
lines changed

‎frontend/packages/dev-console/src/components/deployments/images/AdvancedImageOptions.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import * as React from 'react';
22
import { Button, ButtonVariant } from '@patternfly/react-core';
33
import { FormikValues, useFormikContext } from 'formik';
44
import { useTranslation } from 'react-i18next';
5+
import { useCreateSecretModal } from '@console/dev-console/src/components/import/CreateSecretModal';
56
import { SecretFormType } from '@console/internal/components/secrets/create-secret';
67
import { ExpandCollapse } from '@console/internal/components/utils';
78
import { SecretModel } from '@console/internal/models';
89
import { ResourceDropdownField } from '@console/shared/src';
9-
import { secretModalLauncher } from '../../import/CreateSecretModal';
1010

1111
const AdvancedImageOptions: React.FC = () => {
1212
const { t } = useTranslation();
13+
const launchCreateSecretModal = useCreateSecretModal();
1314
const {
1415
setFieldValue,
1516
values: {
@@ -55,7 +56,7 @@ const AdvancedImageOptions: React.FC = () => {
5556
className="pf-m-link--align-left"
5657
variant={ButtonVariant.link}
5758
onClick={() =>
58-
secretModalLauncher({
59+
launchCreateSecretModal({
5960
namespace,
6061
save: handleSave,
6162
formType: SecretFormType.image,

‎frontend/packages/dev-console/src/components/import/CreateSecretModal.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
import * as React from 'react';
2-
import {
3-
createModalLauncher,
4-
ModalComponentProps,
5-
} from '@console/internal/components/factory/modal';
1+
import { useCallback } from 'react';
2+
import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
3+
import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
64
import {
75
SecretFormWrapper,
86
SecretFormType,
97
} from '@console/internal/components/secrets/create-secret';
108

119
export interface CreateSecretModalProps {
12-
save?: (name: string) => void;
1310
namespace: string;
1411
formType: SecretFormType;
12+
save?: (name: string) => void;
1513
}
1614

17-
type Props = CreateSecretModalProps & ModalComponentProps;
18-
19-
const CreateSecretModal: React.FC<Props> = ({ close, namespace, save, formType }) => {
15+
const CreateSecretModal: OverlayComponent<CreateSecretModalProps> = ({
16+
closeOverlay,
17+
namespace,
18+
save,
19+
formType,
20+
}) => {
2021
const handleSave = (name: string) => {
21-
close();
22-
save(name);
22+
closeOverlay();
23+
save?.(name);
2324
};
2425

2526
return (
2627
<SecretFormWrapper
27-
onCancel={close}
28+
onCancel={closeOverlay}
2829
onSave={handleSave}
2930
fixed={{ metadata: { namespace } }}
3031
formType={formType}
@@ -34,6 +35,10 @@ const CreateSecretModal: React.FC<Props> = ({ close, namespace, save, formType }
3435
);
3536
};
3637

37-
export const secretModalLauncher = createModalLauncher<Props>(CreateSecretModal);
38+
export type CreateSecretCallbackWithProps = (props?: CreateSecretModalProps) => void;
39+
40+
export const useCreateSecretModal = (): CreateSecretCallbackWithProps => {
41+
const launcher = useOverlay();
3842

39-
export default CreateSecretModal;
43+
return useCallback((props) => launcher(CreateSecretModal, props), [launcher]);
44+
};

‎frontend/packages/dev-console/src/components/import/git/SourceSecretSelector.tsx‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
1-
import * as React from 'react';
1+
import { FCC, useEffect } from 'react';
22
import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
33
import { useFormikContext, FormikValues } from 'formik';
44
import * as _ from 'lodash';
55
import { useTranslation } from 'react-i18next';
6+
import { useCreateSecretModal } from '@console/dev-console/src/components/import/CreateSecretModal';
67
import { SecretFormType } from '@console/internal/components/secrets/create-secret';
78
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
89
import { SecretModel } from '@console/internal/models';
910
import { getFieldId } from '@console/shared';
1011
import SourceSecretDropdown from '../../dropdown/SourceSecretDropdown';
11-
import { secretModalLauncher } from '../CreateSecretModal';
1212

1313
const CREATE_SOURCE_SECRET = 'create-source-secret';
1414
const CLEAR_SOURCE_SECRET = 'clear-source-secret';
1515

16-
const SourceSecretSelector: React.FC<{
16+
const SourceSecretSelector: FCC<{
1717
formContextField?: string;
1818
}> = ({ formContextField }) => {
1919
const fieldPrefix = formContextField ? `${formContextField}.` : '';
2020

2121
const { t } = useTranslation();
2222
const { values, setFieldValue } = useFormikContext<FormikValues>();
23+
const launchCreateSecretModal = useCreateSecretModal();
2324
const namespace: string = _.get(values, `${fieldPrefix}project.name`);
2425
const secret: string = _.get(values, `${fieldPrefix}git.secret`);
2526
const [data, loaded, loadError] = useK8sWatchResource(
@@ -41,7 +42,7 @@ const SourceSecretSelector: React.FC<{
4142
const handleDropdownChange = (key: string) => {
4243
if (key === CREATE_SOURCE_SECRET) {
4344
setFieldValue(`${fieldPrefix}git.secret`, secret);
44-
secretModalLauncher({
45+
launchCreateSecretModal({
4546
namespace,
4647
save: handleSave,
4748
formType: SecretFormType.source,
@@ -54,7 +55,7 @@ const SourceSecretSelector: React.FC<{
5455
}
5556
};
5657

57-
React.useEffect(() => {
58+
useEffect(() => {
5859
loaded &&
5960
!loadError &&
6061
secret &&
@@ -63,39 +64,37 @@ const SourceSecretSelector: React.FC<{
6364
}, [loaded, loadError, secret, data, setFieldValue, fieldPrefix]);
6465

6566
return (
66-
<>
67-
<FormGroup
68-
fieldId={getFieldId('source-secret', 'dropdown')}
69-
label={t('devconsole~Source Secret')}
70-
>
71-
<SourceSecretDropdown
72-
isFullWidth
73-
menuClassName="dropdown-menu--text-wrap"
74-
namespace={namespace}
75-
actionItems={[
76-
{
77-
actionTitle: t('devconsole~Create new Secret'),
78-
actionKey: CREATE_SOURCE_SECRET,
79-
},
80-
{
81-
actionTitle: t('devconsole~No Secret'),
82-
actionKey: CLEAR_SOURCE_SECRET,
83-
},
84-
]}
85-
selectedKey={secret}
86-
title={secret}
87-
onChange={handleDropdownChange}
88-
/>
67+
<FormGroup
68+
fieldId={getFieldId('source-secret', 'dropdown')}
69+
label={t('devconsole~Source Secret')}
70+
>
71+
<SourceSecretDropdown
72+
isFullWidth
73+
menuClassName="dropdown-menu--text-wrap"
74+
namespace={namespace}
75+
actionItems={[
76+
{
77+
actionTitle: t('devconsole~Create new Secret'),
78+
actionKey: CREATE_SOURCE_SECRET,
79+
},
80+
{
81+
actionTitle: t('devconsole~No Secret'),
82+
actionKey: CLEAR_SOURCE_SECRET,
83+
},
84+
]}
85+
selectedKey={secret}
86+
title={secret}
87+
onChange={handleDropdownChange}
88+
/>
8989

90-
<FormHelperText>
91-
<HelperText>
92-
<HelperTextItem>
93-
{t('devconsole~Secret with credentials for pulling your source code.')}
94-
</HelperTextItem>
95-
</HelperText>
96-
</FormHelperText>
97-
</FormGroup>
98-
</>
90+
<FormHelperText>
91+
<HelperText>
92+
<HelperTextItem>
93+
{t('devconsole~Secret with credentials for pulling your source code.')}
94+
</HelperTextItem>
95+
</HelperText>
96+
</FormHelperText>
97+
</FormGroup>
9998
);
10099
};
101100

‎frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { UNASSIGNED_KEY, CREATE_APPLICATION_KEY } from '@console/topology/src/co
1717
import { isContainerImportSource } from '../../../types/samples';
1818
import { getSuggestedName, getPorts, makePortName } from '../../../utils/imagestream-utils';
1919
import { getContainerImportSample, getSample } from '../../../utils/samples';
20-
import { secretModalLauncher } from '../CreateSecretModal';
20+
import { useCreateSecretModal } from '../CreateSecretModal';
2121
import './ImageSearch.scss';
2222

2323
const useQueryParametersIfDefined = (handleSearch: (image: string) => void) => {
@@ -89,6 +89,7 @@ const ImageSearch: React.FC = () => {
8989
const { t } = useTranslation();
9090
const inputRef = React.useRef<HTMLInputElement>();
9191
const { values, setFieldValue, dirty, initialValues, touched } = useFormikContext<FormikValues>();
92+
const launchCreateSecretModal = useCreateSecretModal();
9293
const [newImageSecret, setNewImageSecret] = React.useState('');
9394
const [alertVisible, shouldHideAlert] = React.useState(true);
9495
const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
@@ -265,7 +266,7 @@ const ImageSearch: React.FC = () => {
265266
variant="link"
266267
isInline
267268
onClick={() =>
268-
secretModalLauncher({
269+
launchCreateSecretModal({
269270
namespace,
270271
save: handleSave,
271272
formType: SecretFormType.image,

‎frontend/packages/integration-tests-cypress/tests/crud/secrets/add-to-workload.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ describe('Add Secret to Workloads', () => {
4646
cy.login();
4747
guidedTour.close();
4848
cy.createProjectWithCLI(testName);
49-
cy.exec(`echo '${JSON.stringify(deployment)}' | kubectl create -n ${testName} -f -`);
49+
cy.exec(`echo '${JSON.stringify(deployment)}' | oc create -n ${testName} -f -`);
5050
cy.exec(
51-
`kubectl create secret generic ${secretName} --from-literal=key1=supersecret -n ${testName}`,
51+
`oc create secret generic ${secretName} --from-literal=key1=supersecret -n ${testName}`,
5252
);
5353
});
5454

‎frontend/packages/integration-tests-cypress/tests/crud/secrets/image-pull.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ describe('Image pull secrets', () => {
128128
cy.log('Create secret');
129129
cy.get('[data-test="page-heading"] h1').contains(heading);
130130
secrets.enterSecretName(uploadConfigFileImageSecretName);
131-
cy.byTestID('console-select-menu-toggle').click();
131+
cy.byTestID('console-select-auth-type-menu-toggle').click();
132132
cy.byTestDropDownMenu('config-file').click();
133133
cy.byLegacyTestID('file-input-textarea').type(JSON.stringify(configFile), {
134134
parseSpecialCharSequences: false,

‎frontend/packages/integration-tests-cypress/tests/crud/secrets/source.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('Source secrets', () => {
7070
cy.log('Create secret');
7171
cy.get('[data-test="page-heading"] h1').contains('Create source secret');
7272
secrets.enterSecretName(sshSourceSecretName);
73-
cy.byTestID('console-select-menu-toggle').click();
73+
cy.byTestID('console-select-auth-type-menu-toggle').click();
7474
cy.byTestDropDownMenu('kubernetes.io/ssh-auth').click();
7575
cy.byLegacyTestID('file-input-textarea').type(sshSourceSecretSSHKey);
7676
secrets.save();

‎frontend/packages/integration-tests-cypress/tests/events/events.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('Events', () => {
3737
guidedTour.close();
3838
cy.createProjectWithCLI(testName);
3939
try {
40-
cy.exec(`echo '${JSON.stringify(testpod)}' | kubectl create -n ${testName} -f -`);
40+
cy.exec(`echo '${JSON.stringify(testpod)}' | oc create -n ${testName} -f -`);
4141
} catch (error) {
4242
console.error(`\nFailed to create pod ${name}:\n${error}`);
4343
}

‎frontend/packages/integration-tests-cypress/views/secret.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const secrets = {
6060
encode: (username, password) => Base64.encode(`${username}:${password}`),
6161
enterSecretName: (secretName: string) => cy.byTestID('secret-name').type(secretName),
6262
getResourceJSON: (name: string, namespace: string, kind: string) => {
63-
return cy.exec(`kubectl get -o json -n ${namespace} ${kind} ${name}`);
63+
return cy.exec(`oc get -o json -n ${namespace} ${kind} ${name}`);
6464
},
6565
save: () => cy.byTestID('save-changes').click(),
6666
};

‎frontend/packages/shipwright-plugin/src/components/build-form/PushSecretSelector.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternf
33
import { useFormikContext, FormikValues } from 'formik';
44
import * as _ from 'lodash';
55
import { useTranslation } from 'react-i18next';
6-
import { secretModalLauncher } from '@console/dev-console/src/components/import/CreateSecretModal';
6+
import { useCreateSecretModal } from '@console/dev-console/src/components/import/CreateSecretModal';
77
import { SecretFormType } from '@console/internal/components/secrets/create-secret';
88
import { getFieldId } from '@console/shared';
99
import PushSecretDropdown from './PushSecretDropdown';
@@ -18,6 +18,7 @@ const PushSecretSelector: React.FC<{
1818
const fieldPrefix = formContextField ? `${formContextField}` : '';
1919

2020
const { t } = useTranslation();
21+
const launchCreateSecretModal = useCreateSecretModal();
2122
const { values, setFieldValue } = useFormikContext<FormikValues>();
2223
const secret: string = _.get(values, `${fieldPrefix}`);
2324

@@ -28,7 +29,7 @@ const PushSecretSelector: React.FC<{
2829
const handleDropdownChange = (key: string) => {
2930
if (key === CREATE_PULL_SECRET) {
3031
setFieldValue(`${fieldPrefix}`, secret);
31-
secretModalLauncher({
32+
launchCreateSecretModal({
3233
namespace,
3334
save: handleSave,
3435
formType: SecretFormType.image,

0 commit comments

Comments
 (0)