feat: new drawer for preview configurations

src/App.tsx

@@ -20,7 +20,12 @@ import {useAppSelector} from '@redux/hooks';
 import {setAlert} from '@redux/reducers/alert';
 import {setCreateProject, setLoadingProject, setOpenProject} from '@redux/reducers/appConfig';
 import {closePluginsDrawer} from '@redux/reducers/extension';
-import {closeFolderExplorer, toggleNotifications, toggleSettings} from '@redux/reducers/ui';
+import {
+  closeFolderExplorer,
+  closePreviewConfigurationEditor,
+  toggleNotifications,
+  toggleSettings,
+} from '@redux/reducers/ui';
 import {isInClusterModeSelector, kubeConfigContextSelector, kubeConfigPathSelector} from '@redux/selectors';
 import {loadContexts} from '@redux/thunks/loadKubeConfig';
 
@@ -53,6 +58,7 @@ const SaveResourceToFileFolderModal = React.lazy(() => import('@molecules/SaveRe
 const SettingsManager = React.lazy(() => import('@organisms/SettingsManager'));
 const StartupModal = React.lazy(() => import('@organisms/StartupModal'));
 const UpdateModal = React.lazy(() => import('@organisms/UpdateModal'));
+const PreviewConfigurationEditor = React.lazy(() => import('@components/organisms/PreviewConfigurationEditor'));
 
 const AppContainer = styled.div`
   height: 100%;
@@ -72,6 +78,7 @@ const App = () => {
   const dispatch = useDispatch();
   const isChangeFiltersConfirmModalVisible = useAppSelector(state => state.main.filtersToBeChanged);
   const isClusterDiffModalVisible = useAppSelector(state => state.ui.isClusterDiffVisible);
+  const isPreviewConfigurationEditorOpen = useAppSelector(state => state.ui.isPreviewConfigurationEditorOpen);
   const isClusterSelectorVisible = useAppSelector(state => state.config.isClusterSelectorVisible);
   const isCreateFolderModalVisible = useAppSelector(state => state.ui.createFolderModal.isOpen);
   const isCreateProjectModalVisible = useAppSelector(state => state.ui.createProjectModal.isOpen);
@@ -239,6 +246,10 @@ const App = () => {
     dispatch(toggleSettings());
   };
 
+  const previewConfigurationDrawerOnClose = () => {
+    dispatch(closePreviewConfigurationEditor());
+  };
+
   return (
     <AppContext.Provider value={{windowSize: size}}>
       <AppContainer>
@@ -268,6 +279,14 @@ const App = () => {
           <SettingsManager />
         </LazyDrawer>
 
+        <LazyDrawer
+          onClose={previewConfigurationDrawerOnClose}
+          title="Preview Configuration"
+          visible={isPreviewConfigurationEditorOpen}
+        >
+          <PreviewConfigurationEditor />
+        </LazyDrawer>
+
         <Suspense fallback={null}>
           {isChangeFiltersConfirmModalVisible && <ChangeFiltersConfirmModal />}
           {isClusterDiffModalVisible && <ClusterDiffModal />}

src/components/organisms/PreviewConfigurationEditor/PreviewConfigurationEditor.tsx

@@ -0,0 +1,5 @@
+const PreviewConfigurationEditor = () => {
+  return <div />;
+};
+
+export default PreviewConfigurationEditor;

src/components/organisms/PreviewConfigurationEditor/index.ts

@@ -0,0 +1 @@
+export {default} from './PreviewConfigurationEditor';

src/models/ui.ts

@@ -60,6 +60,7 @@ export type UiState = {
   isSettingsOpen: boolean;
   isClusterDiffVisible: boolean;
   isNotificationsOpen: boolean;
+  isPreviewConfigurationEditorOpen: boolean;
   newResourceWizard: {
     isOpen: boolean;
     defaultInput?: NewResourceWizardInput;

src/navsections/HelmChartSectionBlueprint/PreviewConfigurationQuickAction.tsx

@@ -8,7 +8,8 @@ import styled from 'styled-components';
 
 import {SectionCustomComponentProps} from '@models/navigator';
 
-import {useAppSelector} from '@redux/hooks';
+import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {openPreviewConfigurationEditor} from '@redux/reducers/ui';
 
 import Colors from '@styles/Colors';
 
@@ -31,14 +32,20 @@ const PreviewConfigurationNameSuffix: React.FC<SectionCustomComponentProps> = pr
   const {sectionInstance} = props;
   const isSectionCollapsed = useAppSelector(state => state.navigator.collapsedSectionIds.includes(sectionInstance.id));
 
+  const dispatch = useAppDispatch();
+
+  const onClick = () => {
+    dispatch(openPreviewConfigurationEditor());
+  };
+
   return (
     <SuffixContainer>
       <ButtonContainer>
         <Tooltip title="Create a new Preview Configuration">
           <Button
             icon={<PlusOutlined />}
             type="link"
-            onClick={() => {}}
+            onClick={onClick}
             size="small"
             style={{color: sectionInstance.isSelected && isSectionCollapsed ? Colors.blackPure : undefined}}
           />

src/redux/initialState.ts

@@ -101,6 +101,7 @@ const initialUiState: UiState = {
   isClusterDiffVisible: false,
   isNotificationsOpen: false,
   isFolderLoading: false,
+  isPreviewConfigurationEditorOpen: false,
   quickSearchActionsPopup: {
     isOpen: false,
   },

src/redux/reducers/ui.ts

@@ -223,6 +223,12 @@ export const uiSlice = createSlice({
       state.highlightedItems.browseTemplates = action.payload === HighlightItems.BROWSE_TEMPLATES;
       state.highlightedItems.connectToCluster = action.payload === HighlightItems.CONNECT_TO_CLUSTER;
     },
+    openPreviewConfigurationEditor: (state: Draft<UiState>) => {
+      state.isPreviewConfigurationEditorOpen = true;
+    },
+    closePreviewConfigurationEditor: (state: Draft<UiState>) => {
+      state.isPreviewConfigurationEditorOpen = false;
+    },
   },
   extraReducers: builder => {
     builder
@@ -288,5 +294,7 @@ export const {
   closeSaveResourcesToFileFolderModal,
   zoomIn,
   zoomOut,
+  openPreviewConfigurationEditor,
+  closePreviewConfigurationEditor,
 } = uiSlice.actions;
 export default uiSlice.reducer;