Merge pull request #1148 from kubeshop/devcatalin/refactor/plugins-dr…

…awer

refactor: move plugins to drawer

src/App.tsx

@@ -31,6 +31,7 @@ import {
   PageFooter,
   PageHeader,
   PaneManager,
+  PluginManagerDrawer,
   QuickSearchActions,
   RenameEntityModal,
   RenameResourceModal,
@@ -140,6 +141,7 @@ const App = () => {
         <MainContainer>
           <PageHeader />
           <SettingsDrawer />
+          <PluginManagerDrawer />
           <NotificationsDrawer />
           <PaneManager />
           <PageFooter />

src/components/organisms/PageHeader/PageHeader.tsx

@@ -3,12 +3,13 @@ import {useEffect, useState} from 'react';
 import {Badge, Tooltip} from 'antd';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
-import {NotificationsTooltip, SettingsTooltip} from '@constants/tooltips';
+import {NotificationsTooltip, PluginDrawerTooltip, SettingsTooltip} from '@constants/tooltips';
 
 import {HelmChart, HelmValuesFile} from '@models/helm';
 import {K8sResource} from '@models/k8sresource';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {openPluginsDrawer} from '@redux/reducers/extension';
 import {toggleNotifications, toggleSettings, toggleStartProjectPane} from '@redux/reducers/ui';
 import {activeResourcesSelector, isInPreviewModeSelector, kubeConfigContextSelector} from '@redux/selectors';
 import {stopPreview} from '@redux/services/preview';
@@ -74,6 +75,10 @@ const PageHeader = () => {
     dispatch(toggleNotifications());
   };
 
+  const showPluginsDrawer = () => {
+    dispatch(openPluginsDrawer());
+  };
+
   const showGetStartingPage = () => {
     if (!isStartProjectPaneVisible) {
       dispatch(toggleStartProjectPane());
@@ -139,6 +144,13 @@ const PageHeader = () => {
                 </Badge>
               </S.IconContainerSpan>
             </Tooltip>
+
+            <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={PluginDrawerTooltip}>
+              <S.IconContainerSpan>
+                <S.ApiOutlined onClick={showPluginsDrawer} />
+              </S.IconContainerSpan>
+            </Tooltip>
+
             <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={SettingsTooltip}>
               <S.IconContainerSpan>
                 <S.SettingsOutlined onClick={toggleSettingsDrawer} />

src/components/organisms/PageHeader/styled.tsx

@@ -1,4 +1,5 @@
 import {
+  ApiOutlined as RawApiOutlined,
   BellOutlined as RawBellOutlined,
   CloseCircleOutlined as RawCloseCircleOutlined,
   CopyOutlined as RawCopyOutlined,
@@ -110,7 +111,7 @@ export const ResourceSpan = styled.span`
 
 export const SettingsCol = styled(Col)`
   display: grid;
-  grid-template-columns: repeat(3, max-content);
+  grid-template-columns: repeat(4, max-content);
   align-items: center;
   grid-column-gap: 12px;
 `;
@@ -121,6 +122,12 @@ export const SettingsOutlined = styled(RawSettingOutlined)`
   cursor: pointer;
 `;
 
+export const ApiOutlined = styled(RawApiOutlined)`
+  color: ${FontColors.elementSelectTitle};
+  font-size: 24px;
+  cursor: pointer;
+`;
+
 export const HeaderContent = styled.div`
   display: flex;
   align-items: center;

src/components/organisms/PaneManager/PaneManager.tsx

@@ -5,7 +5,6 @@ import 'antd/dist/antd.less';
 
 import {
   ApartmentOutlined,
-  ApiOutlined,
   CodeOutlined,
   FolderOpenOutlined,
   FolderOutlined,
@@ -29,15 +28,7 @@ import {
 } from '@redux/reducers/ui';
 import {activeProjectSelector, isInPreviewModeSelector, kustomizationsSelector} from '@redux/selectors';
 
-import {
-  ActionsPane,
-  FileTreePane,
-  HelmPane,
-  KustomizePane,
-  NavigatorPane,
-  PluginManagerPane,
-  TemplateManagerPane,
-} from '@organisms';
+import {ActionsPane, FileTreePane, HelmPane, KustomizePane, NavigatorPane, TemplateManagerPane} from '@organisms';
 
 import {GraphView} from '@molecules';
 
@@ -200,13 +191,6 @@ const PaneManager = () => {
               >
                 <TemplateManagerPane />
               </div>
-              <div
-                style={{
-                  display: leftMenuSelection === 'plugin-manager' ? 'inline' : 'none',
-                }}
-              >
-                <PluginManagerPane />
-              </div>
             </>
           }
           hideLeft={!leftActive}
@@ -227,11 +211,6 @@ const PaneManager = () => {
     content = (
       <StyledColumnPanes style={{width: contentWidth}}>
         <div style={{display: 'flex', flexDirection: 'row', height: '100%'}}>
-          {leftMenuSelection === 'plugin-manager' && leftActive && (
-            <div style={{borderRight: `1px solid ${Colors.grey3}`}}>
-              <PluginManagerPane />
-            </div>
-          )}
           <div style={{flex: 3}}>
             <StartProjectPane />
           </div>
@@ -340,20 +319,6 @@ const PaneManager = () => {
               />
             </MenuButton>
           </Tooltip>
-
-          <Tooltip
-            mouseEnterDelay={TOOLTIP_DELAY}
-            title={leftMenuSelection === 'plugin-manager' && leftActive ? 'Hide Plugins' : 'View Plugins'}
-            placement="right"
-          >
-            <MenuButton
-              isSelected={leftMenuSelection === 'plugin-manager'}
-              isActive={leftActive}
-              onClick={() => setLeftActiveMenu('plugin-manager')}
-            >
-              <MenuIcon icon={ApiOutlined} active={leftActive} isSelected={leftMenuSelection === 'plugin-manager'} />
-            </MenuButton>
-          </Tooltip>
         </Space>
       </StyledColumnLeftMenu>
 

src/components/organisms/PluginManagerPane/PluginManagerPane.styled.tsx → src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.styled.tsx

@@ -9,3 +9,10 @@ export const Container = styled.div`
 export const NotFoundLabel = styled.span`
   color: ${Colors.grey7};
 `;
+
+export const ButtonsContainer = styled.div`
+  padding: 16px;
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+`;

src/components/organisms/PluginManagerPane/PluginManagerPane.tsx → src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.tsx

@@ -4,20 +4,22 @@ import {Button, Skeleton, Tooltip} from 'antd';
 
 import {PlusOutlined, ReloadOutlined} from '@ant-design/icons';
 
-import {PluginManagerPaneReloadTooltip} from '@constants/tooltips';
+import {PluginManagerDrawerReloadTooltip} from '@constants/tooltips';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {closePluginsDrawer} from '@redux/reducers/extension';
 import {checkForExtensionsUpdates} from '@redux/services/extension';
 
-import {TitleBar} from '@components/molecules';
+import Drawer from '@components/atoms/Drawer';
 
 import PluginInformation from './PluginInformation';
 import PluginInstallModal from './PluginInstallModal';
-import * as S from './PluginManagerPane.styled';
+import * as S from './PluginManagerDrawer.styled';
 
-function PluginManagerPane() {
+function PluginManagerDrawer() {
   const dispatch = useAppDispatch();
   const isLoadingExistingPlugins = useAppSelector(state => state.extension.isLoadingExistingPlugins);
+  const isPluginsDrawerVisible = useAppSelector(state => state.extension.isPluginsDrawerVisible);
 
   const pluginMap = useAppSelector(state => state.extension.pluginMap);
   const templateMap = useAppSelector(state => state.extension.templateMap);
@@ -43,20 +45,40 @@ function PluginManagerPane() {
   };
 
   return (
-    <div>
+    <Drawer
+      width="400"
+      noborder="true"
+      title="Plugins Manager"
+      placement="right"
+      closable={false}
+      visible={isPluginsDrawerVisible}
+      onClose={() => dispatch(closePluginsDrawer())}
+      bodyStyle={{padding: 0}}
+    >
       <PluginInstallModal isVisible={isInstallModalVisible} onClose={onCloseInstallPlugin} />
-      <TitleBar title="Plugins">
-        <Tooltip title={PluginManagerPaneReloadTooltip} placement="bottom">
+      <S.ButtonsContainer>
+        <Tooltip title={PluginManagerDrawerReloadTooltip} placement="bottom">
           <Button
             disabled={sortedPluginEntries.length === 0}
             onClick={onClickReload}
             type="link"
             size="small"
             icon={<ReloadOutlined />}
-          />
+          >
+            Update
+          </Button>
         </Tooltip>
-        <Button onClick={onClickInstallPlugin} type="link" size="small" icon={<PlusOutlined />} />
-      </TitleBar>
+        <Button
+          onClick={onClickInstallPlugin}
+          type="primary"
+          ghost
+          size="small"
+          icon={<PlusOutlined />}
+          style={{marginLeft: 8}}
+        >
+          Install
+        </Button>
+      </S.ButtonsContainer>
       <S.Container>
         {sortedPluginEntries.length === 0 ? (
           <>{isLoadingExistingPlugins ? <Skeleton /> : <p>No plugins installed yet.</p>}</>
@@ -70,8 +92,8 @@ function PluginManagerPane() {
           </>
         )}
       </S.Container>
-    </div>
+    </Drawer>
   );
 }
 
-export default PluginManagerPane;
+export default PluginManagerDrawer;

src/components/organisms/PluginManagerDrawer/index.ts

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

src/components/organisms/index.ts

@@ -14,7 +14,7 @@ export {default as NotificationsDrawer} from './NotificationsDrawer';
 export {default as PageFooter} from './PageFooter';
 export {default as PageHeader} from './PageHeader';
 export {default as PaneManager} from './PaneManager';
-export {default as PluginManagerPane} from './PluginManagerPane';
+export {default as PluginManagerDrawer} from './PluginManagerDrawer';
 export {default as QuickSearchActions} from './QuickSearchActions';
 export {default as RenameEntityModal} from './RenameEntityModal';
 export {default as TemplateManagerPane} from './TemplateManagerPane';

src/constants/tooltips.ts

@@ -40,8 +40,8 @@ export const ClusterDiffSaveTooltip = 'Replace local resource with cluster versi
 export const ClusterDiffCompareTooltip = 'Diff resources - Opens the Diff Modal';
 export const FileExplorerChanged = 'File Explorer has some changes. Reload it to see them.';
 export const OpenExternalDocumentationTooltip = 'Open documentation for this resource type in external browser';
-export const TemplateManagerPaneReloadTooltip = 'Check for updates';
-export const PluginManagerPaneReloadTooltip = 'Check for updates';
+export const TemplateManagerPaneReloadTooltip = 'Updates all templates that have a newer version available';
+export const PluginManagerDrawerReloadTooltip = 'Updates all plugins that have a newer version available';
 export const DocumentationTooltip = 'Open Monokle Documentation Website';
 export const DiscordTooltip = 'Open Kubeshop Discord Server';
 export const GitHubTooltip = 'Open Monokle Github Repository';
@@ -52,3 +52,4 @@ export const NewProjectFromTemplateTooltip = 'New Project from Template';
 export const NewProjectFromFolderTooltip = 'New project from existing folder';
 export const NewEmptyProjectTooltip = 'New Empty Project';
 export const SearchProjectTooltip = 'Search for project by name or path';
+export const PluginDrawerTooltip = 'Open Plugins Manager';

src/models/extension.ts

@@ -13,6 +13,7 @@ export interface ExtensionState {
   templatesDir?: string;
   templatePacksDir?: string;
   pluginsDir?: string;
+  isPluginsDrawerVisible: boolean;
 }
 
 export type AnyExtension<ExtensionType> = {

src/models/ui.ts

@@ -52,7 +52,6 @@ export type LeftMenuSelectionType =
   | 'helm-pane'
   | 'kustomize-pane'
   | 'cluster-explorer'
-  | 'plugin-manager'
   | 'templates-pane';
 
 export type UiState = {

src/redux/initialState.ts

@@ -178,6 +178,7 @@ const initialExtensionState: ExtensionState = {
   pluginMap: {},
   templateMap: {},
   templatePackMap: {},
+  isPluginsDrawerVisible: false,
 };
 
 export default {

src/redux/reducers/extension.ts

@@ -77,6 +77,12 @@ export const extensionSlice = createSlice({
       state.templatePacksDir = action.payload.templatePacksDir;
       state.pluginsDir = action.payload.pluginsDir;
     },
+    openPluginsDrawer: (state: Draft<ExtensionState>) => {
+      state.isPluginsDrawerVisible = true;
+    },
+    closePluginsDrawer: (state: Draft<ExtensionState>) => {
+      state.isPluginsDrawerVisible = false;
+    },
   },
 });
 
@@ -94,5 +100,7 @@ export const {
   addMultipleTemplatePacks,
   setTemplatePackMap,
   setExtensionsDirs,
+  openPluginsDrawer,
+  closePluginsDrawer,
 } = extensionSlice.actions;
 export default extensionSlice.reducer;