Merge pull request #973 from porter-dev/0.5.0-forms-refactor

0.5.0 forms refactor hotfixes

dashboard/src/components/form-components/KeyValueArray.tsx

@@ -75,7 +75,7 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
   };
 
   objectToValues = (obj: Record<string, string>): KeyValue[] => {
-    return Object.entries(obj).map(([key, value]) => ({ key, value }));
+    return Object.entries(obj)?.map(([key, value]) => ({ key, value }));
   };
 
   renderDeleteButton = (i: number) => {
@@ -109,7 +109,7 @@ export default class KeyValueArray extends Component<PropsType, StateType> {
   renderInputList = () => {
     return (
       <>
-        {this.state.values.map((entry: any, i: number) => {
+        {this.state.values?.map((entry: any, i: number) => {
           // Preprocess non-string env values set via raw Helm values
           let { value } = entry;
           if (typeof value === "object") {

dashboard/src/components/porter-form/field-components/Input.tsx

@@ -85,7 +85,7 @@ export const getFinalVariablesForStringInput: GetFinalVariablesFunction = (
   const val = vars[props.variable] || props.settings?.default;
   return {
     [props.variable]:
-      props.settings?.unit && props.settings?.omitUnitFromValue === false
+      props.settings?.unit && !props.settings.omitUnitFromValue
         ? val + props.settings.unit
         : val,
   };

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -24,7 +24,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
       initState: {
         values:
           props.value && props.value[0]
-            ? (Object.entries(props.value[0]).map(([k, v]) => {
+            ? (Object.entries(props.value[0])?.map(([k, v]) => {
                 return { key: k, value: v };
               }) as any[])
             : [],
@@ -132,7 +132,16 @@ const KeyValueArray: React.FC<Props> = (props) => {
     }
   };
 
+  const getProcessedValues = (): any => {
+    let obj = {} as any;
+    state.values?.forEach(({ key, value }) => {
+      obj[key] = value;
+    });
+    return obj;
+  }
+
   const renderEnvModal = () => {
+    console.log(state.values)
     if (state.showEnvModal) {
       return (
         <Modal
@@ -145,7 +154,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
           height="542px"
         >
           <LoadEnvGroupModal
-            existingValues={variables}
+            existingValues={getProcessedValues()}
             namespace={variables.namespace}
             clusterId={variables.clusterId}
             closeModal={() =>
@@ -159,15 +168,15 @@ const KeyValueArray: React.FC<Props> = (props) => {
               setState((prev) => {
                 return {
                   // might be broken
-                  values: {
+                  values: [
                     ...prev.values,
-                    ...Object.entries(values).map(([k, v]) => {
+                    ...Object.entries(values)?.map(([k, v]) => {
                       return {
                         key: k,
                         value: v,
                       };
                     }),
-                  },
+                  ],
                 };
               });
             }}
@@ -211,7 +220,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
   const renderInputList = () => {
     return (
       <>
-        {state.values.map((entry: any, i: number) => {
+        {state.values?.map((entry: any, i: number) => {
           // Preprocess non-string env values set via raw Helm values
           let { value } = entry;
           if (typeof value === "object") {
@@ -230,7 +239,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
                   e.persist();
                   setState((prev) => {
                     return {
-                      values: prev.values.map((t, j) => {
+                      values: prev.values?.map((t, j) => {
                         if (j == i) {
                           return {
                             ...t,
@@ -254,7 +263,7 @@ const KeyValueArray: React.FC<Props> = (props) => {
                   e.persist();
                   setState((prev) => {
                     return {
-                      values: prev.values.map((t, j) => {
+                      values: prev.values?.map((t, j) => {
                         if (j == i) {
                           return {
                             ...t,

dashboard/src/main/home/Home.tsx

@@ -485,7 +485,13 @@ class Home extends Component<PropsType, StateType> {
   };
 
   render() {
-    let { currentModal, setCurrentModal, currentProject } = this.context;
+    let { 
+      currentModal, 
+      setCurrentModal, 
+      currentProject,
+      currentOverlay,
+      setCurrentOverlay,
+    } = this.context;
 
     return (
       <StyledHome>
@@ -572,6 +578,17 @@ class Home extends Component<PropsType, StateType> {
           </Modal>
         )}
 
+        {
+          currentOverlay && (
+            <ConfirmOverlay
+              show={true}
+              message={currentOverlay.message}
+              onYes={currentOverlay.onYes}
+              onNo={currentOverlay.onNo}
+            />
+          )
+        }
+
         {this.renderSidebar()}
 
         <ViewWrapper>

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -76,7 +76,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
     Record<string, Record<string, any>>
   >({});
   const [url, setUrl] = useState<string>(null);
-  const [showDeleteOverlay, setShowDeleteOverlay] = useState<boolean>(false);
   const [deleting, setDeleting] = useState<boolean>(false);
   const [imageIsPlaceholder, setImageIsPlaceholer] = useState<boolean>(false);
   const [newestImage, setNewestImage] = useState<string>(null);
@@ -91,9 +90,13 @@ const ExpandedChart: React.FC<Props> = (props) => {
     closeWebsocket,
   } = useWebsockets();
 
-  const { currentCluster, currentProject, setCurrentError } = useContext(
-    Context
-  );
+  const { 
+    currentCluster, 
+    currentProject, 
+    setCurrentError,
+    currentOverlay,
+    setCurrentOverlay,
+  } = useContext(Context);
 
   // Retrieve full chart data (includes form and values)
   const getChartData = async (chart: ChartType) => {
@@ -389,7 +392,17 @@ const ExpandedChart: React.FC<Props> = (props) => {
           <SettingsSection
             currentChart={chart}
             refreshChart={() => getChartData(currentChart)}
-            setShowDeleteOverlay={(x: boolean) => setShowDeleteOverlay(x)}
+            setShowDeleteOverlay={(x: boolean) => {
+              if (x) {
+                setCurrentOverlay({
+                  message: `Are you sure you want to delete ${currentChart.name}?`,
+                  onYes: handleUninstallChart,
+                  onNo: () => setCurrentOverlay(null),
+                });
+              } else {
+                setCurrentOverlay(null);
+              }
+            }}
           />
         );
       case "graph":
@@ -560,7 +573,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   };
 
   const handleUninstallChart = async () => {
-    setDeleting(true);
+    setCurrentOverlay(null);
     try {
       await api.uninstallTemplate(
         "<token>",
@@ -573,7 +586,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
           cluster_id: currentCluster.id,
         }
       );
-      setShowDeleteOverlay(false);
       props.closeChart();
     } catch (error) {
       console.log(error);
@@ -653,17 +665,11 @@ const ExpandedChart: React.FC<Props> = (props) => {
   return (
     <>
       <StyledExpandedChart>
-        <ConfirmOverlay
-          show={showDeleteOverlay}
-          message={`Are you sure you want to delete ${currentChart.name}?`}
-          onYes={handleUninstallChart}
-          onNo={() => setShowDeleteOverlay(false)}
-        />
-        {deleting && (
-          <DeleteOverlay>
-            <Loading />
-          </DeleteOverlay>
-        )}
+      {deleting && (
+        <DeleteOverlay>
+          <Loading />
+        </DeleteOverlay>
+      )}
         <HeaderWrapper>
           <BackButton onClick={props.closeChart}>
             <BackButtonImg src={backArrow} />
@@ -747,6 +753,7 @@ const TextWrap = styled.div``;
 const BodyWrapper = styled.div`
   position: relative;
   overflow: hidden;
+  margin-bottom: 120px;
 `;
 
 const BackButton = styled.div`
@@ -965,15 +972,13 @@ const IconWrapper = styled.div`
 
 const StyledExpandedChart = styled.div`
   width: 100%;
+  overflow: hidden;
   z-index: 0;
   animation: fadeIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   display: flex;
-  overflow-y: auto;
-  padding-bottom: 120px;
   flex-direction: column;
-  overflow: visible;
 
   @keyframes fadeIn {
     from {

dashboard/src/main/home/modals/LoadEnvGroupModal.tsx

@@ -103,6 +103,7 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
   };
 
   potentiallyOverriddenKeys(incoming: Record<string, string>): KeyValue[] {
+    console.log(incoming, this.props.existingValues);
     return Object.entries(incoming)
       .filter(([key]) => this.props.existingValues[key])
       .map(([key, value]) => ({ key, value }));

dashboard/src/shared/Context.tsx

@@ -25,6 +25,12 @@ export interface GlobalContextType {
   currentModal: string;
   currentModalData: any;
   setCurrentModal: (currentModal: string, currentModalData?: any) => void;
+  currentOverlay: {
+    message: string,
+    onYes: any,
+    onNo: any,
+  };
+  setCurrentOverlay: (x: any) => void;
   currentError: string | null;
   setCurrentError: (currentError: string) => void;
   currentCluster: ClusterType;
@@ -63,6 +69,8 @@ class ContextProvider extends Component<PropsType, StateType> {
     setCurrentModal: (currentModal: string, currentModalData?: any) => {
       this.setState({ currentModal, currentModalData });
     },
+    currentOverlay: null,
+    setCurrentOverlay: (x: any) => this.setState({ currentOverlay: x }),
     currentError: null,
     setCurrentError: (currentError: string) => {
       this.setState({ currentError });

dashboard/src/shared/types.tsx

@@ -266,6 +266,12 @@ export interface ContextProps {
   currentModal?: string;
   currentModalData: any;
   setCurrentModal: (currentModal: string, currentModalData?: any) => void;
+  currentOverlay: {
+    message: string,
+    onYes: any,
+    onNo: any,
+  };
+  setCurrentOverlay: (x: any) => void;
   currentError?: string;
   setCurrentError: (currentError: string) => void;
   currentCluster?: ClusterType;