Merge pull request #4168 from kubeshop/devcatalin/fix/helm-deploy

feat: select namespace for dry-run config deploy
kubeshop · Sep 25, 2023 · 429ac07 · 429ac07
2 parents 61b22b8 + 44a58f9
commit 429ac07
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/src/components/organisms/ActionsPane/ActionsPaneHeader.tsx b/src/components/organisms/ActionsPane/ActionsPaneHeader.tsx
@@ -1,6 +1,6 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
-import {Button, Dropdown, Modal, Tooltip} from 'antd';
+import {Button, Dropdown, Tooltip} from 'antd';
 
 import {LeftOutlined, RightOutlined} from '@ant-design/icons';
 
@@ -21,6 +21,7 @@ import {runPreviewConfiguration} from '@redux/thunks/runPreviewConfiguration';
 import {selectFromHistory} from '@redux/thunks/selectFromHistory';
 
 import {TitleBarWrapper} from '@components/atoms';
+import {HelmChartModalConfirmWithNamespaceSelect} from '@components/molecules';
 
 import {useRefSelector} from '@utils/hooks';
 
@@ -50,6 +51,8 @@ const ActionsPaneHeader: React.FC<IProps> = props => {
   const selectedHelmConfig = useAppSelector(selectedHelmConfigSelector);
   const selectedImage = useAppSelector(selectedImageSelector);
 
+  const [isHelmChartApplyModalVisible, setIsHelmChartApplyModalVisible] = useState(false);
+
   const onClickEditPreviewConfiguration = useCallback(() => {
     if (!selectedHelmConfig) {
       return;
@@ -74,18 +77,23 @@ const ActionsPaneHeader: React.FC<IProps> = props => {
     dispatch(startPreview({type: 'helm-config', configId: selectedHelmConfig.id}));
   }, [dispatch, selectedHelmConfig]);
 
-  const onClickInstallPreviewConfiguration = useCallback(() => {
-    Modal.confirm({
-      title: 'Install Helm Chart',
-      content: `Are you sure you want to install the ${selectedHelmConfig?.name} configuration to the cluster?`,
-      onOk: () => {
-        if (!selectedHelmConfig) {
-          return;
-        }
-        dispatch(runPreviewConfiguration({helmConfigId: selectedHelmConfig.id, performDeploy: true}));
-      },
-    });
-  }, [dispatch, selectedHelmConfig]);
+  const onConfirmInstallPreviewConfiguration = useCallback(
+    (selectedNamespace?: string, shouldCreateNamespace?: boolean) => {
+      if (!selectedHelmConfig) {
+        return;
+      }
+      dispatch(
+        runPreviewConfiguration({
+          helmConfigId: selectedHelmConfig.id,
+          performDeploy: true,
+          selectedNamespace,
+          shouldCreateNamespace,
+        })
+      );
+      setIsHelmChartApplyModalVisible(false);
+    },
+    [dispatch, selectedHelmConfig]
+  );
 
   const onClickLeftArrow = useCallback(() => {
     dispatch(selectFromHistory('left'));
@@ -135,6 +143,14 @@ const ActionsPaneHeader: React.FC<IProps> = props => {
   if (selectedHelmConfig) {
     return (
       <TitleBarWrapper>
+        <HelmChartModalConfirmWithNamespaceSelect
+          isVisible={isHelmChartApplyModalVisible}
+          title="Install Helm Chart using Configuration"
+          onOk={onConfirmInstallPreviewConfiguration}
+          onCancel={() => {
+            setIsHelmChartApplyModalVisible(false);
+          }}
+        />
         <TitleBar
           title="Helm Command"
           type="secondary"
@@ -145,7 +161,7 @@ const ActionsPaneHeader: React.FC<IProps> = props => {
                 title={InstallPreviewConfigurationTooltip}
                 placement="bottomLeft"
               >
-                <Button type="primary" size="small" ghost onClick={onClickInstallPreviewConfiguration}>
+                <Button type="primary" size="small" ghost onClick={() => setIsHelmChartApplyModalVisible(true)}>
                   Install
                 </Button>
               </Tooltip>

diff --git a/src/redux/thunks/runPreviewConfiguration.ts b/src/redux/thunks/runPreviewConfiguration.ts
@@ -36,12 +36,15 @@ export const runPreviewConfiguration = createAsyncThunk<
   {
     helmConfigId: string;
     performDeploy?: boolean;
+    selectedNamespace?: string;
+    shouldCreateNamespace?: boolean;
   },
   {
     dispatch: AppDispatch;
     state: RootState;
   }
->('main/runPreviewConfiguration', async ({helmConfigId, performDeploy}, thunkAPI) => {
+>('main/runPreviewConfiguration', async (props, thunkAPI) => {
+  const {helmConfigId, performDeploy, selectedNamespace, shouldCreateNamespace} = props;
   const startTime = new Date().getTime();
   const configState = thunkAPI.getState().config;
   const mainState = thunkAPI.getState().main;
@@ -133,6 +136,16 @@ export const runPreviewConfiguration = createAsyncThunk<
     env: {KUBECONFIG: kubeconfig.path},
   };
 
+  if (selectedNamespace) {
+    if (!commandOptions.args.some(arg => arg.includes('--namespace'))) {
+      commandOptions.args.push(...['--namespace', selectedNamespace]);
+    }
+
+    if (shouldCreateNamespace && !commandOptions.args.some(arg => arg.includes('--create-namespace'))) {
+      commandOptions.args.push('--create-namespace');
+    }
+  }
+
   const result = await runCommandInMainThread(commandOptions);
 
   if (result.error || result.stderr) {