Fixed Node Selector reset in Pod placement (#1512)

portal-ui/src/common/BackLink.tsx

@@ -51,11 +51,20 @@ interface IBackLink {
   to: string;
   label: string;
   className?: any;
+  executeOnClick?: () => void;
 }
 
-const BackLink = ({ to, label, classes, className }: IBackLink) => {
+const BackLink = ({ to, label, classes, className, executeOnClick }: IBackLink) => {
   return (
-    <Link to={to} className={`${classes.link} ${className ? className : ""}`}>
+    <Link
+      to={to}
+      className={`${classes.link} ${className ? className : ""}`}
+      onClick={() => {
+        if (executeOnClick) {
+          executeOnClick();
+        }
+      }}
+    >
       <div className={classes.icon}>
         <BackSettingsIcon />
       </div>

portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx

@@ -682,6 +682,7 @@ const AddTenant = ({
     type: "other",
     enabled: true,
     action: () => {
+      resetAddTenantForm();
       history.push("/tenants");
     },
   };
@@ -770,7 +771,11 @@ const AddTenant = ({
         />
       )}
       <PageHeader label={"Create New Tenant"} />
-      <BackLink to={"/tenants"} label={"Return to Tenant List"} />
+      <BackLink
+        to={"/tenants"}
+        label={"Return to Tenant List"}
+        executeOnClick={resetAddTenantForm}
+      />
       <PageLayout>
         {addSending && (
           <Grid item xs={12}>

portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx

@@ -21,7 +21,7 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid, IconButton, Paper, SelectChangeEvent } from "@mui/material";
 import { AppState } from "../../../../../store";
-import { isPageValid, updateAddField } from "../../actions";
+import { isPageValid, setKeyValuePairs, updateAddField } from "../../actions";
 import { setModalErrorSnackMessage } from "../../../../../actions";
 import {
   modalBasic,
@@ -32,6 +32,7 @@ import {
   IValidation,
 } from "../../../../../utils/validationFunctions";
 import { ErrorResponseHandler } from "../../../../../common/types";
+import { LabelKeyPair } from "../../types";
 import RadioGroupSelector from "../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import api from "../../../../../common/api";
@@ -45,9 +46,11 @@ interface IAffinityProps {
   podAffinity: string;
   nodeSelectorLabels: string;
   withPodAntiAffinity: boolean;
+  keyValuePairs: LabelKeyPair[];
   setModalErrorSnackMessage: typeof setModalErrorSnackMessage;
   updateAddField: typeof updateAddField;
   isPageValid: typeof isPageValid;
+  setKeyValuePairs: typeof setKeyValuePairs;
 }
 
 const styles = (theme: Theme) =>
@@ -107,11 +110,6 @@ const styles = (theme: Theme) =>
     ...wizardCommon,
   });
 
-interface LabelKeyPair {
-  key: string;
-  value: string;
-}
-
 interface OptionPair {
   label: string;
   value: string;
@@ -124,6 +122,8 @@ const Affinity = ({
   withPodAntiAffinity,
   setModalErrorSnackMessage,
   updateAddField,
+  keyValuePairs,
+  setKeyValuePairs,
   isPageValid,
 }: IAffinityProps) => {
   const [validationErrors, setValidationErrors] = useState<any>({});
@@ -131,10 +131,6 @@ const Affinity = ({
   const [keyValueMap, setKeyValueMap] = useState<{ [key: string]: string[] }>(
     {}
   );
-  const [keyValuePairs, setKeyValuePairs] = useState<LabelKeyPair[]>([
-    { key: "", value: "" },
-  ]);
-
   const [keyOptions, setKeyOptions] = useState<OptionPair[]>([]);
 
   // Common
@@ -160,7 +156,6 @@ const Affinity = ({
             });
           }
           setKeyOptions(keys);
-          setKeyValuePairs([{ key: keys[0].value, value: keys[0].value }]);
         })
         .catch((err: ErrorResponseHandler) => {
           setLoading(false);
@@ -236,7 +231,7 @@ const Affinity = ({
           Configure how pods will be assigned to nodes
         </span>
       </div>
-      <Grid xs={12} className={classes.affinityConfigField}>
+      <Grid item xs={12} className={classes.affinityConfigField}>
         <Grid item className={classes.affinityFieldLabel}>
           <div className={classes.label}>Type</div>
           <div
@@ -287,7 +282,7 @@ const Affinity = ({
               {keyValuePairs &&
                 keyValuePairs.map((kvp, i) => {
                   return (
-                    <Grid item xs={12} className={classes.affinityRow}>
+                    <Grid item xs={12} className={classes.affinityRow} key={`affinity-keyVal-${i.toString()}`}>
                       <Grid item xs={5} className={classes.affinityLabelKey}>
                         {keyOptions.length > 0 && (
                           <SelectWrapper
@@ -307,7 +302,6 @@ const Affinity = ({
                             label={""}
                             value={kvp.key}
                             options={keyOptions}
-                            classes={classes.fieldContainer}
                           />
                         )}
                         {keyOptions.length === 0 && (
@@ -326,7 +320,6 @@ const Affinity = ({
                             }}
                             index={i}
                             placeholder={"Key"}
-                            classes={classes.fieldContainer}
                           />
                         )}
                       </Grid>
@@ -352,7 +345,6 @@ const Affinity = ({
                                   })
                                 : []
                             }
-                            classes={classes.fieldContainer}
                           />
                         )}
                         {keyOptions.length === 0 && (
@@ -371,7 +363,6 @@ const Affinity = ({
                             }}
                             index={i}
                             placeholder={"value"}
-                            classes={classes.fieldContainer}
                           />
                         )}
                       </Grid>
@@ -423,18 +414,22 @@ const Affinity = ({
   );
 };
 
-const mapState = (state: AppState) => ({
+const mapState = (state: AppState) => {
-  podAffinity: state.tenants.createTenant.fields.affinity.podAffinity,
+  const createTenant = state.tenants.createTenant;
-  nodeSelectorLabels:
+
-    state.tenants.createTenant.fields.affinity.nodeSelectorLabels,
+  return {
-  withPodAntiAffinity:
+    podAffinity: createTenant.fields.affinity.podAffinity,
-    state.tenants.createTenant.fields.affinity.withPodAntiAffinity,
+    nodeSelectorLabels: createTenant.fields.affinity.nodeSelectorLabels,
-});
+    withPodAntiAffinity: createTenant.fields.affinity.withPodAntiAffinity,
+    keyValuePairs: createTenant.nodeSelectorPairs,
+  };
+};
 
 const connector = connect(mapState, {
   setModalErrorSnackMessage,
   updateAddField,
   isPageValid,
+  setKeyValuePairs,
 });
 
 export default withStyles(styles)(connector(Affinity));

portal-ui/src/screens/Console/Tenants/actions.ts

@@ -42,6 +42,8 @@ import {
   TENANT_DETAILS_SET_LOADING,
   TENANT_DETAILS_SET_TAB,
   TENANT_DETAILS_SET_TENANT,
+  ADD_TENANT_SET_KEY_PAIR_VALUE,
+  LabelKeyPair,
 } from "./types";
 
 // Basic actions
@@ -277,3 +279,10 @@ export const setTenantTab = (tab: string) => {
     tab,
   };
 };
+
+export const setKeyValuePairs = (newArray: LabelKeyPair[]) => {
+  return {
+    type: ADD_TENANT_SET_KEY_PAIR_VALUE,
+    newArray,
+  };
+};

portal-ui/src/screens/Console/Tenants/reducer.ts

@@ -33,6 +33,7 @@ import {
   ADD_TENANT_ENCRYPTION_VAULT_CERT,
   ADD_TENANT_RESET_FORM,
   ADD_TENANT_SET_CURRENT_PAGE,
+  ADD_TENANT_SET_KEY_PAIR_VALUE,
   ADD_TENANT_SET_LIMIT_SIZE,
   ADD_TENANT_SET_PAGE_VALID,
   ADD_TENANT_SET_STORAGE_CLASSES_LIST,
@@ -332,6 +333,7 @@ const initialState: ITenantState = {
         encoded_cert: "",
       },
     },
+    nodeSelectorPairs: [{ key: "", value: "" }],
   },
   tenantDetails: {
     currentTenant: "",
@@ -883,6 +885,15 @@ export function tenantsReducer(
               encoded_cert: "",
             },
           },
+          nodeSelectorPairs: [{ key: "", value: "" }],
+        },
+      };
+    case ADD_TENANT_SET_KEY_PAIR_VALUE:
+      return {
+        ...state,
+        createTenant: {
+          ...state.createTenant,
+          nodeSelectorPairs: action.newArray,
         },
       };
     case TENANT_DETAILS_SET_LOADING:

portal-ui/src/screens/Console/Tenants/types.ts

@@ -20,7 +20,6 @@ import { KeyPair, Opts } from "./ListTenants/utils";
 import { IntegrationConfiguration } from "./AddTenant/Steps/TenantResources/utils";
 
 export const ADD_TENANT_SET_CURRENT_PAGE = "ADD_TENANT/SET_CURRENT_PAGE";
-export const ADD_TENANT_SET_ADVANCED_MODE = "ADD_TENANT/SET_ADVANCED_MODE";
 export const ADD_TENANT_UPDATE_FIELD = "ADD_TENANT/UPDATE_FIELD";
 export const ADD_TENANT_SET_PAGE_VALID = "ADD_TENANT/SET_PAGE_VALID";
 export const ADD_TENANT_RESET_FORM = "ADD_TENANT/RESET_FORM";
@@ -59,6 +58,9 @@ export const ADD_TENANT_ENCRYPTION_VAULT_CA = "ADD_TENANT/ENCRYPTION_VAULT_CA";
 export const ADD_TENANT_ENCRYPTION_GEMALTO_CA =
   "ADD_TENANT/ENCRYPTION_GEMALTO_CA";
 
+// Affinity Node Selector KeyPairs
+export const ADD_TENANT_SET_KEY_PAIR_VALUE = "ADD_TENANT/SET_KEY_PAIR_VALUE";
+
 // Tenant Details
 export const TENANT_DETAILS_SET_LOADING = "TENANT_DETAILS/SET_LOADING";
 export const TENANT_DETAILS_SET_CURRENT_TENANT =
@@ -92,6 +94,7 @@ export interface ICreateTenant {
   limitSize: any;
   fields: IFieldStore;
   certificates: ICertificatesItems;
+  nodeSelectorPairs: LabelKeyPair[];
 }
 
 export interface ICertificatesItems {
@@ -123,6 +126,11 @@ export interface INameTenantFields {
   selectedStorageType: string;
 }
 
+export interface LabelKeyPair {
+  key: string;
+  value: string;
+}
+
 export interface ISecurityContext {
   runAsUser: string;
   runAsGroup: string;
@@ -422,6 +430,11 @@ interface ResetForm {
   type: typeof ADD_TENANT_RESET_FORM;
 }
 
+interface SetNodeSelectorKeyPairValueArray {
+  type: typeof ADD_TENANT_SET_KEY_PAIR_VALUE;
+  newArray: LabelKeyPair[];
+}
+
 interface SetLoadingTenant {
   type: typeof TENANT_DETAILS_SET_LOADING;
   state: boolean;
@@ -467,6 +480,7 @@ export type TenantsManagementTypes =
   | AddFileVaultCa
   | AddFileGemaltoCa
   | ResetForm
+  | SetNodeSelectorKeyPairValueArray
   | SetLoadingTenant
   | SetTenantName
   | SetTenantDetails