initial formOptions refactor (#322)

* initial formOptions refactor * added null operator * fixed camel case issue
rht-labs · Sep 15, 2020 · be404e7 · be404e7
1 parent 0a58006
commit be404e7
Show file tree

Hide file tree

Showing 35 changed files with 179 additions and 147 deletions.
diff --git a/src/common/config_validator_adapter.tsx b/src/common/config_validator_adapter.tsx
@@ -1,19 +1,19 @@
 import { ValidatorFactory } from '../schemas/validators';
 import { EngagementFormConfig } from '../schemas/engagement_config';
 
-export const getValidatorsFromFormOptions = (
-  formOptions: EngagementFormConfig = {}
+export const getValidatorsFromEngagementFormConfig = (
+  engagementFormConfig: EngagementFormConfig = null
 ) =>
-  Object.keys(formOptions || {}).reduce(
+  Object.keys(engagementFormConfig || {}).reduce(
     (previousSchemaGroups, currentGroupKey) => {
       return {
         ...previousSchemaGroups,
-        ...Object.keys(formOptions[currentGroupKey] ?? {}).reduce(
+        ...Object.keys(engagementFormConfig[currentGroupKey] ?? {}).reduce(
           (previousGroupFields, currentFieldKey) => ({
             ...previousGroupFields,
             [currentFieldKey]: (
-              formOptions?.[currentGroupKey]?.[currentFieldKey]?.validators ||
-              []
+              engagementFormConfig?.[currentGroupKey]?.[currentFieldKey]
+                ?.validators || []
             ).map(ValidatorFactory),
           }),
           {}

diff --git a/src/components/engagement_data_cards/__tests__/data_cards.spec.tsx b/src/components/engagement_data_cards/__tests__/data_cards.spec.tsx
@@ -12,7 +12,7 @@ describe('Engagement summary card', () => {
         <TestStateWrapper>
           <EngagementSummaryCard
             onSave={() => {}}
-            formOptions={{}}
+            engagementFormConfig={{}}
             onChange={() => {}}
             currentEngagement={Engagement.fromFake(true)}
             currentEngagementChanges={Engagement.fromFake(true)}
@@ -31,7 +31,7 @@ describe('OpenShift Cluster Summary', () => {
         <TestStateWrapper>
           <OpenShiftClusterSummaryCard
             onSave={() => {}}
-            formOptions={{}}
+            engagementFormConfig={{}}
             onChange={() => {}}
             currentEngagement={Engagement.fromFake(true)}
             currentEngagementChanges={Engagement.fromFake(true)}
@@ -50,7 +50,7 @@ describe('Point of Contact Card', () => {
         <TestStateWrapper>
           <PointOfContactCard
             onSave={() => {}}
-            formOptions={{}}
+            engagementFormConfig={{}}
             onChange={() => {}}
             currentEngagement={Engagement.fromFake(true)}
             currentEngagementChanges={Engagement.fromFake(true)}

diff --git a/src/components/engagement_data_cards/engagement_summary_card/engagement_summary_card.tsx b/src/components/engagement_data_cards/engagement_summary_card/engagement_summary_card.tsx
@@ -19,7 +19,7 @@ export interface EngagementSummaryCardProps {
   currentEngagement: Engagement;
   currentEngagementChanges: Engagement;
   onChange: (fieldName: string, value: any) => void;
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
   onSave: (engagement: Engagement) => void;
   missingRequiredFields: string[];
 }
@@ -29,7 +29,7 @@ export function EngagementSummaryCard({
   currentEngagement,
   currentEngagementChanges,
   onChange = () => null,
-  formOptions,
+  engagementFormConfig,
   missingRequiredFields,
   onSave,
 }: EngagementSummaryCardProps) {
@@ -45,7 +45,7 @@ export function EngagementSummaryCard({
     <>
       <EngagementSummaryEditModal
         onSave={onSave}
-        formOptions={formOptions}
+        engagementFormConfig={engagementFormConfig}
         onChange={onChange}
         engagement={currentEngagementChanges}
         isOpen={activeModalKey === ENGAGEMENT_SUMMARY_MODAL_KEY}

diff --git a/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx b/src/components/engagement_data_cards/openshift_cluster_card/openshift_cluster_card.tsx
@@ -19,7 +19,7 @@ export interface OpenShiftClusterSummaryCardProps {
   currentEngagement: Engagement;
   currentEngagementChanges: Engagement;
   onChange: (fieldName: string, value: any) => void;
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
   onSave: (engagement: Engagement) => void;
   missingRequiredFields: string[];
 }
@@ -29,7 +29,7 @@ export function OpenShiftClusterSummaryCard({
   currentEngagementChanges,
   onSave,
   onChange,
-  formOptions,
+  engagementFormConfig,
   missingRequiredFields,
 }: OpenShiftClusterSummaryCardProps) {
   const openshiftRequiredFields = [
@@ -44,7 +44,7 @@ export function OpenShiftClusterSummaryCard({
   return (
     <>
       <OpenShiftClusterEditModal
-        formOptions={formOptions}
+        engagementFormConfig={engagementFormConfig}
         onChange={onChange}
         onSave={onSave}
         engagement={currentEngagementChanges}
@@ -82,7 +82,7 @@ export function OpenShiftClusterSummaryCard({
             <TitledDataPoint title="Cloud Provider" dataCy={'cloud_provider'}>
               <span>
                 {getHumanReadableLabel(
-                  formOptions?.cloud_options?.providers?.options,
+                  engagementFormConfig?.cloud_options?.providers?.options,
                   currentEngagement?.ocp_cloud_provider_name
                 )}
               </span>
@@ -92,7 +92,7 @@ export function OpenShiftClusterSummaryCard({
             <TitledDataPoint title="OpenShift Version" dataCy={'oc_version'}>
               <span>
                 {getHumanReadableLabel(
-                  formOptions?.openshift_options?.versions?.options,
+                  engagementFormConfig?.openshift_options?.versions?.options,
                   currentEngagement?.ocp_version
                 )}
               </span>
@@ -102,7 +102,7 @@ export function OpenShiftClusterSummaryCard({
             <TitledDataPoint title="Storage Size" dataCy={'storage_size'}>
               <span>
                 {getHumanReadableLabel(
-                  formOptions?.openshift_options?.persistent_storage?.options,
+                  engagementFormConfig?.openshift_options?.persistent_storage?.options,
                   currentEngagement?.ocp_persistent_storage_size
                 )}
               </span>
@@ -112,7 +112,7 @@ export function OpenShiftClusterSummaryCard({
             <TitledDataPoint title="Cloud Region" dataCy={'cloud_region'}>
               <span>
                 {getHumanReadableLabel(
-                  formOptions?.cloud_options?.providers?.options?.find(
+                  engagementFormConfig?.cloud_options?.providers?.options?.find(
                     option =>
                       option.value ===
                       currentEngagement?.ocp_cloud_provider_name
@@ -126,7 +126,7 @@ export function OpenShiftClusterSummaryCard({
             <TitledDataPoint title="Cluster Size" dataCy={'cluster_size'}>
               <span>
                 {getHumanReadableLabel(
-                  formOptions?.openshift_options?.cluster_size?.options,
+                  engagementFormConfig?.openshift_options?.cluster_size?.options,
                   currentEngagement?.ocp_cluster_size
                 )}
               </span>

diff --git a/src/components/engagement_data_cards/point_of_contact_card/point_of_contact_card.tsx b/src/components/engagement_data_cards/point_of_contact_card/point_of_contact_card.tsx
@@ -14,15 +14,15 @@ export interface PointOfContactCardProps {
   currentEngagement: Engagement;
   currentEngagementChanges: Engagement;
   onChange: (fieldName: string, value: any) => void;
-  formOptions: object;
+  engagementFormConfig: object;
   onSave: (engagement: Engagement) => void;
   missingRequiredFields: string[];
 }
 
 export function PointOfContactCard({
   currentEngagement,
   currentEngagementChanges,
-  formOptions,
+  engagementFormConfig,
   onChange,
   onSave,
   missingRequiredFields,
@@ -40,7 +40,7 @@ export function PointOfContactCard({
   return (
     <>
       <PointOfContactEditModal
-        formOptions={formOptions}
+        engagementFormConfig={engagementFormConfig}
         onChange={onChange}
         engagement={currentEngagementChanges}
         onSave={onSave}

diff --git a/src/components/engagement_data_cards/user_card/user_card.tsx b/src/components/engagement_data_cards/user_card/user_card.tsx
@@ -15,23 +15,23 @@ const USER_EDIT_MODAL_KEY = 'user_modal';
 export interface UserCardProps {
   engagement: Engagement;
   onChange: (fieldName: string, value: any) => void;
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
   onSave: (engagement: Engagement) => void;
 }
 
 export function UserCard({
   engagement,
   onSave,
   onChange,
-  formOptions,
+  engagementFormConfig,
 }: UserCardProps) {
   const { requestOpen, activeModalKey } = useModalVisibility();
   return (
     <>
       <UserEditModal
         onChange={onChange}
         onSave={onSave}
-        formOptions={formOptions}
+        engagementFormConfig={engagementFormConfig}
         isOpen={activeModalKey === USER_EDIT_MODAL_KEY}
         engagement={engagement}
       />
@@ -46,7 +46,7 @@ export function UserCard({
         title="Engagement Users"
       >
         <UserTable users={engagement?.engagement_users}
-                   formOptions={formOptions}
+                   engagementFormConfig={engagementFormConfig}
         />
       </DataCard>
     </>
@@ -63,15 +63,15 @@ const externalUsers =
 
 const UserTable = ({
   users,
-  formOptions
+  engagementFormConfig
 }: {
   users: {
     first_name: string;
     last_name: string;
     email: string;
     role: string;
   }[];
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
 }) => {
 
   const allRows: string[][] = [];
@@ -83,12 +83,12 @@ const UserTable = ({
     <Grid hasGutter>
       <GridItem span={10}>
           <UserList title={redHatUsers}
-                    formOptions={formOptions}
+                    engagementFormConfig={engagementFormConfig}
                     defaultRows=
                       { allRows.filter( row => ( row[1]?.toLowerCase().indexOf("redhat.com")) !== -1 ) }
           />
           <UserList title={externalUsers}
-                    formOptions={formOptions}
+                    engagementFormConfig={engagementFormConfig}
                     defaultRows=
                       { allRows.filter( row => ( row[1]?.toLowerCase().indexOf("redhat.com")) === -1 ) }
           />

diff --git a/src/components/engagement_data_cards/user_card/user_list.tsx b/src/components/engagement_data_cards/user_card/user_list.tsx
@@ -11,7 +11,7 @@ import { UserRolesTooltip } from "./user_roles_tooltip";
 
 interface UserListProps{
   defaultRows: string[][];
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
   title: any;
 }
 
@@ -62,7 +62,7 @@ export function UserList(props: UserListProps) {
     { title:
         <>
           Role
-          <UserRolesTooltip formOptions={props.formOptions}/>
+          <UserRolesTooltip engagementFormConfig={props.engagementFormConfig}/>
         </>
     },
   ];

diff --git a/src/components/engagement_data_cards/user_card/user_roles_tooltip.tsx b/src/components/engagement_data_cards/user_card/user_roles_tooltip.tsx
@@ -6,14 +6,14 @@ import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { EngagementFormConfig } from "../../../schemas/engagement_config";
 
 interface UserRolesTooltipProps {
-  formOptions: EngagementFormConfig;
+  engagementFormConfig: EngagementFormConfig;
 }
 
-export function UserRolesTooltip({formOptions}: UserRolesTooltipProps) {
+export function UserRolesTooltip({engagementFormConfig}: UserRolesTooltipProps) {
 
-  function createTooltipText (formOptions: EngagementFormConfig) {
+  function createTooltipText (engagementFormConfig: EngagementFormConfig) {
     let text = [<div key={'tooltipText'}/>];
-    (formOptions?.user_options?.user_roles?.options ?? []).map((option: any, index: number) => {
+    (engagementFormConfig?.user_options?.user_roles?.options ?? []).map((option: any, index: number) => {
       return text.push(
         <div key={index}>
           { descriptionText(option) }
@@ -36,7 +36,7 @@ export function UserRolesTooltip({formOptions}: UserRolesTooltipProps) {
   return (
     <>
       <Tooltip
-        content= { createTooltipText(formOptions) }
+        content= { createTooltipText(engagementFormConfig) }
         entryDelay={0}
         exitDelay={10}
         maxWidth={'45rem'}

diff --git a/src/components/engagement_edit_modals/__tests__/engagement_summary_edit_modal.spec.tsx b/src/components/engagement_edit_modals/__tests__/engagement_summary_edit_modal.spec.tsx
@@ -11,7 +11,7 @@ describe('Engagement Summary edit modal', () => {
       render(
         <EngagementSummaryEditModal
           onSave={() => {}}
-          formOptions={{}}
+          engagementFormConfig={{}}
           isOpen={true}
           engagement={Engagement.fromFake(true)}
           onChange={() => {}}
@@ -27,7 +27,7 @@ describe('Engagement Summary edit modal', () => {
       <EngagementSummaryEditModal
         onSave={onSave}
         engagement={Engagement.fromFake(true)}
-        formOptions={{}}
+        engagementFormConfig={{}}
         isOpen={true}
         onChange={() => {}}
       />

diff --git a/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx b/src/components/engagement_edit_modals/__tests__/openshift_cluster_edit_modal.spec.tsx
@@ -9,7 +9,7 @@ describe('Point of Contact edit modal', () => {
       render(
         <OpenShiftClusterEditModal
           onSave={() => {}}
-          formOptions={{}}
+          engagementFormConfig={{}}
           isOpen={true}
           engagement={Engagement.fromFake(true)}
           onChange={() => {}}
@@ -24,7 +24,7 @@ describe('Point of Contact edit modal', () => {
       <OpenShiftClusterEditModal
         onSave={onSave}
         engagement={Engagement.fromFake(true)}
-        formOptions={{}}
+        engagementFormConfig={{}}
         isOpen={true}
         onChange={() => {}}
       />

diff --git a/src/components/engagement_edit_modals/__tests__/poc_edit_modal.spec.tsx b/src/components/engagement_edit_modals/__tests__/poc_edit_modal.spec.tsx
@@ -14,7 +14,7 @@ describe('Point of Contact edit modal', () => {
       render(
         <PointOfContactEditModal
           onSave={() => {}}
-          formOptions={EngagementFormConfig.fromFake()}
+          engagementFormConfig={EngagementFormConfig.fromFake()}
           isOpen={true}
           engagement={Engagement.fromFake(true)}
           onChange={() => {}}
@@ -30,7 +30,7 @@ describe('Point of Contact edit modal', () => {
       <PointOfContactEditModal
         onSave={onSave}
         engagement={Engagement.fromFake(true)}
-        formOptions={{}}
+        engagementFormConfig={{}}
         isOpen={true}
         onChange={() => {}}
       />
@@ -44,7 +44,7 @@ describe('Point of Contact edit modal', () => {
       <PointOfContactEditModal
         onSave={() => {}}
         engagement={Engagement.fromFake(true)}
-        formOptions={{}}
+        engagementFormConfig={{}}
         isOpen={true}
         onChange={onChange}
       />
@@ -68,7 +68,7 @@ describe('Point of Contact edit modal', () => {
           <PointOfContactEditModal
             onSave={() => {}}
             engagement={Engagement.fromFake(true)}
-            formOptions={{}}
+            engagementFormConfig={{}}
             isOpen={true}
             onChange={() => {}}
           />
@@ -92,7 +92,7 @@ describe('Point of Contact edit modal', () => {
           <PointOfContactEditModal
             onSave={() => {}}
             engagement={Engagement.fromFake(true)}
-            formOptions={{}}
+            engagementFormConfig={{}}
             isOpen={true}
             onChange={() => {}}
           />