fix traffic splitting required fields

openshift · May 18, 2020 · 3a9d107 · 3a9d107
1 parent 47967cb
commit 3a9d107
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 6 deletions.
diff --git a/frontend/packages/console-shared/src/components/formik-fields/field-types.ts b/frontend/packages/console-shared/src/components/formik-fields/field-types.ts
@@ -77,7 +77,7 @@ export interface MultiColumnFieldProps extends FieldProps {
   toolTip?: string;
   emptyValues: { [name: string]: string };
   emptyMessage?: string;
-  headers: string[];
+  headers: ({ name: string; required: boolean } | string)[];
   children: React.ReactNode;
   spans?: gridItemSpanValueShape[];
 }

diff --git a/...ages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss b/...ages/console-shared/src/components/formik-fields/multi-column-field/MultiColumnField.scss
@@ -20,4 +20,9 @@
   &__empty-message {
     margin-bottom: var(--pf-global--spacer--sm);
   }
+  &__header--required-label {
+    margin-left: var(--pf-global--spacer--xs);
+    font-size: var(--pf-global--FontSize--sm);
+    color: var(--pf-global--danger-color--100);
+  }
 }
diff --git a/...console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldHeader.tsx b/...console-shared/src/components/formik-fields/multi-column-field/MultiColumnFieldHeader.tsx
@@ -3,16 +3,32 @@ import { Grid, GridItem, gridItemSpanValueShape } from '@patternfly/react-core';
 import './MultiColumnField.scss';
 
 export interface MultiColumnFieldHeaderProps {
-  headers: string[];
+  headers: ({ name: string; required: boolean } | string)[];
   spans: gridItemSpanValueShape[];
 }
 
 const MultiColumnFieldHeader: React.FC<MultiColumnFieldHeaderProps> = ({ headers, spans }) => (
   <div className="odc-multi-column-field__row">
     <Grid className="odc-multi-column-field__row">
       {headers.map((header, i) => (
-        <GridItem span={spans[i]} key={header}>
-          <div className="odc-multi-column-field__col">{header}</div>
+        <GridItem span={spans[i]} key={typeof header === 'string' ? header : header.name}>
+          <div className="odc-multi-column-field__col">
+            {typeof header === 'string' ? (
+              header
+            ) : (
+              <>
+                {header.name}
+                {header.required && (
+                  <span
+                    className="odc-multi-column-field__header--required-label"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
+                )}
+              </>
+            )}
+          </div>
         </GridItem>
       ))}
     </Grid>

diff --git a/...src/components/formik-fields/multi-column-field/__tests__/MultiColumnFieldHeader.spec.tsx b/...src/components/formik-fields/multi-column-field/__tests__/MultiColumnFieldHeader.spec.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { gridItemSpanValueShape } from '@patternfly/react-core';
+import MultiColumnFieldHeader, { MultiColumnFieldHeaderProps } from '../MultiColumnFieldHeader';
+
+describe('MultiColumnFieldHeader', () => {
+  let headerProps: MultiColumnFieldHeaderProps;
+  let wrapper: ShallowWrapper<MultiColumnFieldHeaderProps>;
+
+  beforeEach(() => {
+    headerProps = {
+      headers: [
+        {
+          name: 'Test Field',
+          required: true,
+        },
+      ],
+      spans: [12 as gridItemSpanValueShape],
+    };
+    wrapper = shallow(<MultiColumnFieldHeader {...headerProps} />);
+  });
+
+  it('should render required label when prop is of type Object[] with property required set to true', () => {
+    expect(wrapper.contains('*')).toBe(true);
+  });
+
+  it('should not render required label when prop is of type string[]', () => {
+    headerProps.headers = ['Testing Field'];
+    wrapper = shallow(<MultiColumnFieldHeader {...headerProps} />);
+    expect(wrapper.contains('*')).toBe(false);
+  });
+});
diff --git a/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingFields.tsx b/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingFields.tsx
@@ -15,15 +15,14 @@ const TrafficSplittingFields: React.FC<Props> = ({ revisionItems, values }) => {
     <MultiColumnField
       name="trafficSplitting"
       addLabel="Add Revision"
-      headers={['Split', 'Tag', 'Revision']}
+      headers={[{ name: 'Split', required: true }, 'Tag', { name: 'Revision', required: true }]}
       emptyValues={{ percent: '', tag: '', revisionName: '' }}
       disableDeleteRow={values.trafficSplitting.length === 1}
       spans={[2, 3, 7]}
     >
       <InputField
         name="percent"
         type={TextInputTypes.number}
-        placeholder="100"
         style={{ maxWidth: '100%' }}
         required
       />