env load key value array

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/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) => {
@@ -391,7 +394,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":
@@ -562,7 +575,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   };
 
   const handleUninstallChart = async () => {
-    setDeleting(true);
+    setCurrentOverlay(null);
     try {
       await api.uninstallTemplate(
         "<token>",
@@ -575,7 +588,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
           cluster_id: currentCluster.id,
         }
       );
-      setShowDeleteOverlay(false);
       props.closeChart();
     } catch (error) {
       console.log(error);
@@ -655,17 +667,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} />
@@ -749,6 +755,7 @@ const TextWrap = styled.div``;
 const BodyWrapper = styled.div`
   position: relative;
   overflow: hidden;
+  margin-bottom: 120px;
 `;
 
 const BackButton = styled.div`
@@ -967,15 +974,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/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;