diff --git a/src/App.tsx b/src/App.tsx index 9610c3e2b3..fcc20650b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,6 +31,7 @@ import { PageFooter, PageHeader, PaneManager, + PluginManagerDrawer, QuickSearchActions, RenameEntityModal, RenameResourceModal, @@ -140,6 +141,7 @@ const App = () => { + diff --git a/src/components/organisms/PageHeader/PageHeader.tsx b/src/components/organisms/PageHeader/PageHeader.tsx index 048a0015c4..9fd8dcf999 100644 --- a/src/components/organisms/PageHeader/PageHeader.tsx +++ b/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 = () => { + + + + + + + diff --git a/src/components/organisms/PageHeader/styled.tsx b/src/components/organisms/PageHeader/styled.tsx index 3e36cd75d1..2d8e6d39b0 100644 --- a/src/components/organisms/PageHeader/styled.tsx +++ b/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; diff --git a/src/components/organisms/PaneManager/PaneManager.tsx b/src/components/organisms/PaneManager/PaneManager.tsx index ef1f10dff9..50b46ed041 100644 --- a/src/components/organisms/PaneManager/PaneManager.tsx +++ b/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 = () => { > -
- -
} hideLeft={!leftActive} @@ -227,11 +211,6 @@ const PaneManager = () => { content = (
- {leftMenuSelection === 'plugin-manager' && leftActive && ( -
- -
- )}
@@ -340,20 +319,6 @@ const PaneManager = () => { /> - - - setLeftActiveMenu('plugin-manager')} - > - - - diff --git a/src/components/organisms/PluginManagerPane/PluginInformation.styled.tsx b/src/components/organisms/PluginManagerDrawer/PluginInformation.styled.tsx similarity index 100% rename from src/components/organisms/PluginManagerPane/PluginInformation.styled.tsx rename to src/components/organisms/PluginManagerDrawer/PluginInformation.styled.tsx diff --git a/src/components/organisms/PluginManagerPane/PluginInformation.tsx b/src/components/organisms/PluginManagerDrawer/PluginInformation.tsx similarity index 100% rename from src/components/organisms/PluginManagerPane/PluginInformation.tsx rename to src/components/organisms/PluginManagerDrawer/PluginInformation.tsx diff --git a/src/components/organisms/PluginManagerPane/PluginInstallModal.tsx b/src/components/organisms/PluginManagerDrawer/PluginInstallModal.tsx similarity index 100% rename from src/components/organisms/PluginManagerPane/PluginInstallModal.tsx rename to src/components/organisms/PluginManagerDrawer/PluginInstallModal.tsx diff --git a/src/components/organisms/PluginManagerPane/PluginManagerPane.styled.tsx b/src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.styled.tsx similarity index 61% rename from src/components/organisms/PluginManagerPane/PluginManagerPane.styled.tsx rename to src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.styled.tsx index 18f38ea9a7..6c4edb099d 100644 --- a/src/components/organisms/PluginManagerPane/PluginManagerPane.styled.tsx +++ b/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; +`; diff --git a/src/components/organisms/PluginManagerPane/PluginManagerPane.tsx b/src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.tsx similarity index 67% rename from src/components/organisms/PluginManagerPane/PluginManagerPane.tsx rename to src/components/organisms/PluginManagerDrawer/PluginManagerDrawer.tsx index 2989cb6c92..27660436f8 100644 --- a/src/components/organisms/PluginManagerPane/PluginManagerPane.tsx +++ b/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 ( -
+ dispatch(closePluginsDrawer())} + bodyStyle={{padding: 0}} + > - - + + - + {sortedPluginEntries.length === 0 ? ( <>{isLoadingExistingPlugins ? :

No plugins installed yet.

} @@ -70,8 +92,8 @@ function PluginManagerPane() { )}
-
+ ); } -export default PluginManagerPane; +export default PluginManagerDrawer; diff --git a/src/components/organisms/PluginManagerDrawer/index.ts b/src/components/organisms/PluginManagerDrawer/index.ts new file mode 100644 index 0000000000..54eb4435aa --- /dev/null +++ b/src/components/organisms/PluginManagerDrawer/index.ts @@ -0,0 +1 @@ +export {default} from './PluginManagerDrawer'; diff --git a/src/components/organisms/PluginManagerPane/index.ts b/src/components/organisms/PluginManagerPane/index.ts deleted file mode 100644 index 8e02cf031d..0000000000 --- a/src/components/organisms/PluginManagerPane/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './PluginManagerPane'; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 260393b558..c5272a2a3a 100644 --- a/src/components/organisms/index.ts +++ b/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'; diff --git a/src/constants/tooltips.ts b/src/constants/tooltips.ts index fd598bdb5f..cdfa038041 100644 --- a/src/constants/tooltips.ts +++ b/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'; diff --git a/src/models/extension.ts b/src/models/extension.ts index c98a0a601e..053019e4ac 100644 --- a/src/models/extension.ts +++ b/src/models/extension.ts @@ -13,6 +13,7 @@ export interface ExtensionState { templatesDir?: string; templatePacksDir?: string; pluginsDir?: string; + isPluginsDrawerVisible: boolean; } export type AnyExtension = { diff --git a/src/models/ui.ts b/src/models/ui.ts index 2e3d3f3bbf..512c7ab1ef 100644 --- a/src/models/ui.ts +++ b/src/models/ui.ts @@ -52,7 +52,6 @@ export type LeftMenuSelectionType = | 'helm-pane' | 'kustomize-pane' | 'cluster-explorer' - | 'plugin-manager' | 'templates-pane'; export type UiState = { diff --git a/src/redux/initialState.ts b/src/redux/initialState.ts index 987ac65ebb..50747a7dea 100644 --- a/src/redux/initialState.ts +++ b/src/redux/initialState.ts @@ -178,6 +178,7 @@ const initialExtensionState: ExtensionState = { pluginMap: {}, templateMap: {}, templatePackMap: {}, + isPluginsDrawerVisible: false, }; export default { diff --git a/src/redux/reducers/extension.ts b/src/redux/reducers/extension.ts index 8ccc28fadb..a08d202d37 100644 --- a/src/redux/reducers/extension.ts +++ b/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) => { + state.isPluginsDrawerVisible = true; + }, + closePluginsDrawer: (state: Draft) => { + state.isPluginsDrawerVisible = false; + }, }, }); @@ -94,5 +100,7 @@ export const { addMultipleTemplatePacks, setTemplatePackMap, setExtensionsDirs, + openPluginsDrawer, + closePluginsDrawer, } = extensionSlice.actions; export default extensionSlice.reducer;