Merge pull request openshift#7443 from divyanshiGupta/ODC-3289

Fix to not show misleading alert message in Project Access Page
PuneetPunamiya · Dec 9, 2020 · 9ebf5d1 · 9ebf5d1
2 parents 75ca65d + 5a7128d
commit 9ebf5d1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 26 deletions.
diff --git a/frontend/packages/dev-console/locales/en/devconsole.json b/frontend/packages/dev-console/locales/en/devconsole.json
@@ -348,6 +348,10 @@
  "Rate of transmitted packets dropped": "Rate of transmitted packets dropped",
  "Average Container bandwidth by Pod: received": "Average Container bandwidth by Pod: received",
  "Average Container bandwidth by Pod: transmitted": "Average Container bandwidth by Pod: transmitted",
+ "Add Access": "Add Access",
+ "Role": "Role",
+ "Select a role": "Select a role",
+ "Reload": "Reload",
  "or": "or",
  "Create a Project": "Create a Project",
  "Overview": "Overview",

diff --git a/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx b/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx
@@ -3,9 +3,9 @@ import * as _ from 'lodash';
 import { Form, TextInputTypes } from '@patternfly/react-core';
 import { FormikProps, FormikValues } from 'formik';
 import { MultiColumnField, InputField, DropdownField, FormFooter } from '@console/shared';
+import { useTranslation } from 'react-i18next';
 
 enum accessRoles {
- '' = 'Select a role',
  admin = 'Admin',
  edit = 'Edit',
  view = 'View',
@@ -18,29 +18,40 @@ const ProjectAccessForm: React.FC<FormikProps<FormikValues>> = ({
  status,
  errors,
  dirty,
-}) => (
- <Form onSubmit={handleSubmit}>
- <div className="co-m-pane__form">
- <MultiColumnField
- name="projectAccess"
- addLabel="Add Access"
- headers={['Name', 'Role']}
- emptyValues={{ user: '', role: '' }}
- >
- <InputField name="user" type={TextInputTypes.text} placeholder="Name" />
- <DropdownField name="role" items={accessRoles} fullWidth />
- </MultiColumnField>
- <hr />
- <FormFooter
- handleReset={handleReset}
- isSubmitting={isSubmitting}
- errorMessage={status && status.submitError}
- successMessage={status && !dirty && status.success}
- disableSubmit={!dirty || !_.isEmpty(errors)}
- showAlert={dirty}
- />
- </div>
- </Form>
-);
+}) => {
+ const { t } = useTranslation();
+ const disableSubmit = !dirty || !_.isEmpty(errors);
+ return (
+ <Form onSubmit={handleSubmit}>
+ <div className="co-m-pane__form">
+ <MultiColumnField
+ name="projectAccess"
+ addLabel={t('devconsole~Add Access')}
+ headers={[t('devconsole~Name'), t('devconsole~Role')]}
+ emptyValues={{ user: '', role: '' }}
+ >
+ <InputField name="user" type={TextInputTypes.text} placeholder={t('devconsole~Name')} />
+ <DropdownField
+ name="role"
+ title={t('devconsole~Select a role')}
+ items={accessRoles}
+ fullWidth
+ />
+ </MultiColumnField>
+ <hr />
+ <FormFooter
+ handleReset={handleReset}
+ isSubmitting={isSubmitting}
+ errorMessage={status && status.submitError}
+ successMessage={status && !dirty && status.success}
+ disableSubmit={disableSubmit}
+ showAlert={!disableSubmit}
+ submitLabel={t('devconsole~Save')}
+ resetLabel={t('devconsole~Reload')}
+ />
+ </div>
+ </Form>
+ );
+};
 
 export default ProjectAccessForm;
diff --git a/...d/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx b/...d/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx
@@ -6,6 +6,14 @@ import ProjectAccessForm from '../ProjectAccessForm';
 type ProjectAccessFormProps = React.ComponentProps<typeof ProjectAccessForm>;
 let formProps: ProjectAccessFormProps;
 
+jest.mock('react-i18next', () => {
+ const reactI18next = require.requireActual('react-i18next');
+ return {
+ ...reactI18next,
+ useTranslation: () => ({ t: (key) => key.split('~')[1] }),
+ };
+});
+
 describe('Project Access Form', () => {
  const projectAccessForm = shallow(<ProjectAccessForm {...formProps} />);
  beforeEach(() => {
@@ -109,6 +117,6 @@ describe('Project Access Form', () => {
  .children()
  .at(1)
  .props().items,
- ).toEqual({ '': 'Select a role', admin: 'Admin', view: 'View', edit: 'Edit' });
+ ).toEqual({ admin: 'Admin', view: 'View', edit: 'Edit' });
  });
 });