feat: create New Resource wizard component and logic to open from nav…

…igator titlebar

src/App.tsx

@@ -10,6 +10,7 @@ import {
   StartupModal,
   HotKeysHandler,
   PaneManager,
+  NewResourceWizard,
 } from '@organisms';
 import {Size} from '@models/window';
 import {useWindowSize} from '@utils/hooks';
@@ -39,6 +40,7 @@ const App = () => {
         </Layout>
         <DiffModal />
         <StartupModal />
+        <NewResourceWizard />
         <HotKeysHandler />
       </div>
     </AppContext.Provider>

src/components/organisms/NavigatorPane/NavigatorPane.tsx

@@ -1,14 +1,20 @@
 import React, {useState, useContext, useEffect} from 'react';
-import {Row, Skeleton} from 'antd';
+import {Row, Skeleton, Button} from 'antd';
 import styled from 'styled-components';
 import {useSelector} from 'react-redux';
-import {isInClusterModeSelector, helmChartsSelector, helmValuesSelector, kustomizationsSelector} from '@redux/selectors';
+import {
+  isInClusterModeSelector,
+  helmChartsSelector,
+  helmValuesSelector,
+  kustomizationsSelector,
+} from '@redux/selectors';
 
 import {HelmValuesFile} from '@models/helm';
 import Colors, {BackgroundColors} from '@styles/Colors';
-import {useAppSelector} from '@redux/hooks';
+import {useAppSelector, useAppDispatch} from '@redux/hooks';
 import {MonoPaneTitle, MonoPaneTitleCol, PaneContainer, MonoSectionTitle} from '@atoms';
-import {MinusSquareOutlined, PlusSquareOutlined} from '@ant-design/icons';
+import {MinusSquareOutlined, PlusSquareOutlined, PlusOutlined} from '@ant-design/icons';
+import {openNewResourceWizard} from '@redux/reducers/ui';
 
 import {NAVIGATOR_HEIGHT_OFFSET} from '@constants/constants';
 
@@ -79,10 +85,17 @@ const TitleBarContainer = styled.div`
   justify-content: space-between;
 `;
 
+const RightButtons = styled.div`
+  float: right;
+  display: flex;
+`;
+
 const NavigatorPaneContainer = styled(PaneContainer)`
   white-space: nowrap;
 `;
 
+const StyledPlusButton = styled(Button)``;
+
 const SectionHeader = (props: {
   title: string;
   isExpanded: boolean;
@@ -120,6 +133,7 @@ const SectionHeader = (props: {
 };
 
 const NavigatorPane = () => {
+  const dispatch = useAppDispatch();
   const {windowSize} = useContext(AppContext);
   const windowHeight = windowSize.height;
   const navigatorHeight = windowHeight - NAVIGATOR_HEIGHT_OFFSET;
@@ -147,6 +161,10 @@ const NavigatorPane = () => {
     return expandedSections.indexOf(sectionName) !== -1;
   };
 
+  const onClickNewResource = () => {
+    dispatch(openNewResourceWizard());
+  };
+
   useEffect(() => {
     if (kustomizations.some(kustomization => kustomization.id === selectedResourceId)) {
       expandSection('kustomizations');
@@ -160,6 +178,9 @@ const NavigatorPane = () => {
           <MonoPaneTitle>
             <TitleBarContainer>
               <span>Navigator</span>
+              <RightButtons>
+                <StyledPlusButton onClick={onClickNewResource} type="link" size="small" icon={<PlusOutlined />} />
+              </RightButtons>
             </TitleBarContainer>
           </MonoPaneTitle>
         </MonoPaneTitleCol>
@@ -186,7 +207,9 @@ const NavigatorPane = () => {
                     isSelected={
                       !isSectionExpanded('helmcharts') &&
                       Object.values(helmCharts).some(h =>
-                        h.valueFileIds.map(v => helmValues[v]).some((valuesFile: HelmValuesFile) => valuesFile.isSelected)
+                        h.valueFileIds
+                          .map(v => helmValues[v])
+                          .some((valuesFile: HelmValuesFile) => valuesFile.isSelected)
                       )
                     }
                   />

src/components/organisms/NewResourceWizard/NewResourceWizard.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Modal, Form, Input, Select} from 'antd';
+import {InfoCircleOutlined} from '@ant-design/icons';
+import {useAppSelector, useAppDispatch} from '@redux/hooks';
+import {closeNewResourceWizard} from '@redux/reducers/ui';
+
+const NewResourceWizard = () => {
+  const dispatch = useAppDispatch();
+  const isNewResourceWizardOpen = useAppSelector(state => state.ui.isNewResourceWizardOpen);
+
+  const onCancel = () => {
+    dispatch(closeNewResourceWizard());
+  };
+
+  return (
+    <Modal title="Add New Resource" visible={isNewResourceWizardOpen} onCancel={onCancel}>
+      <Form layout="vertical">
+        <Form.Item label="Name" required>
+          <Input />
+        </Form.Item>
+        <Form.Item label="Kind" required tooltip={{title: 'Select the resource kind', icon: <InfoCircleOutlined />}}>
+          <Select />
+        </Form.Item>
+        <Form.Item label="Version" tooltip={{title: 'Enter the version', icon: <InfoCircleOutlined />}}>
+          <Input />
+        </Form.Item>
+        <Form.Item label="Namespace" tooltip={{title: 'Select the namespace', icon: <InfoCircleOutlined />}}>
+          <Select />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default NewResourceWizard;

src/components/organisms/NewResourceWizard/index.js

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

src/components/organisms/index.ts

@@ -9,3 +9,4 @@ export {default as PageHeader} from './PageHeader';
 export {default as SettingsDrawer} from './SettingsDrawer';
 export {default as HotKeysHandler} from './HotKeysHandler';
 export {default as PaneManager} from './PaneManager';
+export {default as NewResourceWizard} from './NewResourceWizard';

src/models/ui.ts

@@ -1,5 +1,6 @@
 export type UiState = {
   isSettingsOpen: boolean;
+  isNewResourceWizardOpen: boolean;
   isFolderLoading: boolean;
   leftMenu: {
     selection: string;

src/redux/initialState.ts

@@ -100,6 +100,7 @@ const initialLogsState: LogsState = {
 const initialUiState: UiState = {
   isSettingsOpen: false,
   isFolderLoading: false,
+  isNewResourceWizardOpen: false,
   leftMenu: {
     selection: 'file-explorer',
     isActive: true,

src/redux/reducers/ui.ts

@@ -22,6 +22,12 @@ export const uiSlice = createSlice({
     setRightMenuSelection: (state: Draft<UiState>, action: PayloadAction<string>) => {
       state.rightMenu.selection = action.payload;
     },
+    openNewResourceWizard: (state: Draft<UiState>) => {
+      state.isNewResourceWizardOpen = true;
+    },
+    closeNewResourceWizard: (state: Draft<UiState>) => {
+      state.isNewResourceWizardOpen = false;
+    },
   },
   extraReducers: builder => {
     builder
@@ -37,6 +43,13 @@ export const uiSlice = createSlice({
   },
 });
 
-export const {toggleSettings, toggleLeftMenu, toggleRightMenu, setLeftMenuSelection, setRightMenuSelection} =
-  uiSlice.actions;
+export const {
+  toggleSettings,
+  toggleLeftMenu,
+  toggleRightMenu,
+  setLeftMenuSelection,
+  setRightMenuSelection,
+  openNewResourceWizard,
+  closeNewResourceWizard,
+} = uiSlice.actions;
 export default uiSlice.reducer;