Merge pull request #1316 from kubeshop/razvantopliceanu/refactor/app-…

…layout refactor: app layout/panes
kubeshop · Feb 15, 2022 · eafa677 · eafa677
2 parents c18ce15 + 5e5b079
commit eafa677
Show file tree

Hide file tree

Showing 54 changed files with 1,334 additions and 1,167 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html lang='en'>
-<head>
-  <meta charset='utf-8' />
-  <meta name='viewport' content='width=device-width, initial-scale=1' />
-  <meta name='theme-color' content='#000000' />
-  <link rel='apple-touch-icon' href='logo192.png' />
-  <link rel='manifest' href='%PUBLIC_URL%/manifest.json' />
-  <title>Monokle</title>
-</head>
-<body>
-<div id='root'></div>
-</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Monokle</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -54,15 +54,18 @@ const SettingsManager = React.lazy(() => import('@organisms/SettingsManager'));
 const StartupModal = React.lazy(() => import('@organisms/StartupModal'));
 const UpdateModal = React.lazy(() => import('@organisms/UpdateModal'));
 
-const AppContainer = styled.div<{$height: number; $width: number}>`
-  ${props => (props.$height ? `height: ${props.$height}px;` : `height: 100%;`)}
-  ${props => (props.$width ? `width: ${props.$width}px;` : `width: 100%;`)}
+const AppContainer = styled.div`
+  height: 100%;
+  width: 100%;
   overflow: hidden;
 `;
 
 const MainContainer = styled.div`
   height: 100%;
   width: 100%;
+
+  display: grid;
+  grid-template-rows: max-content 1fr max-content;
 `;
 
 const App = () => {
@@ -238,33 +241,33 @@ const App = () => {
 
   return (
     <AppContext.Provider value={{windowSize: size}}>
-      <AppContainer $height={size.height} $width={size.width}>
+      <AppContainer>
         <MessageBox />
         <MainContainer>
           <PageHeader />
           <PaneManager />
           <PageFooter />
-
-          <LazyDrawer onClose={notificationsDrawerOnClose} title="Notifications" visible={isNotificationsDrawerVisible}>
-            <NotificationsManager />
-          </LazyDrawer>
-
-          <LazyDrawer
-            noPadding
-            onClose={pluginsDrawerOnClose}
-            title="Plugins Manager"
-            visible={isPluginManagerDrawerVisible}
-          >
-            <PluginManager />
-          </LazyDrawer>
-
-          <LazyDrawer noPadding onClose={settingsDrawerOnClose} title="Settings" visible={isSettingsDrawerVisible}>
-            <SettingsManager />
-          </LazyDrawer>
         </MainContainer>
         <FileExplorer {...fileExplorerProps} />
         <HotKeysHandler />
 
+        <LazyDrawer onClose={notificationsDrawerOnClose} title="Notifications" visible={isNotificationsDrawerVisible}>
+          <NotificationsManager />
+        </LazyDrawer>
+
+        <LazyDrawer
+          noPadding
+          onClose={pluginsDrawerOnClose}
+          title="Plugins Manager"
+          visible={isPluginManagerDrawerVisible}
+        >
+          <PluginManager />
+        </LazyDrawer>
+
+        <LazyDrawer noPadding onClose={settingsDrawerOnClose} title="Settings" visible={isSettingsDrawerVisible}>
+          <SettingsManager />
+        </LazyDrawer>
+
         <Suspense fallback={null}>
           {isChangeFiltersConfirmModalVisible && <ChangeFiltersConfirmModal />}
           {isClusterDiffModalVisible && <ClusterDiffModal />}

diff --git a/src/components/atoms/FileExplorer/FileExplorer.tsx b/src/components/atoms/FileExplorer/FileExplorer.tsx
@@ -5,6 +5,7 @@ import {useEffect} from 'react';
 import log from 'loglevel';
 
 import {getChannelName} from '@utils/ipc';
+
 import {FileExplorerOptions} from './FileExplorerOptions';
 
 export type FileExplorerProps = {

diff --git a/src/components/atoms/Footer/Footer.tsx b/src/components/atoms/Footer/Footer.tsx
diff --git a/src/components/atoms/Footer/index.ts b/src/components/atoms/Footer/index.ts
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
@@ -14,3 +14,4 @@ export {default as KeyValueInput} from './KeyValueInput';
 export {default as Dots} from './Dots';
 export {default as Spinner} from './Spinner';
 export {default as Icon} from './Icon';
+export {default as TabHeader} from './TabHeader';
diff --git a/src/components/molecules/FormEditor/FormEditor.tsx b/src/components/molecules/FormEditor/FormEditor.tsx
@@ -35,7 +35,7 @@ const FormContainer = styled.div`
   width: 100%;
   padding: 20px 15px 0px 15px;
   margin: 0px;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
 
   ${GlobalScrollbarStyle}

diff --git a/src/components/molecules/GraphView/GraphView.tsx b/src/components/molecules/GraphView/GraphView.tsx
@@ -79,9 +79,13 @@ const getLayoutedElements = (elements: any[]): any => {
   });
 };
 
-const GraphView = (props: {editorHeight: string}) => {
+interface IProps {
+  editorHeight: number;
+}
+
+const GraphView: React.FC<IProps> = props => {
   const {editorHeight} = props;
-  const graphAreaHeight = parseInt(editorHeight, 10) - 150;
+  const graphAreaHeight = editorHeight - 150;
   const fileMap = useAppSelector(state => state.main.fileMap);
   const resourceMap = useAppSelector(state => state.main.resourceMap);
   const activeResources = useSelector(activeResourcesSelector);

diff --git a/src/components/molecules/TitleBar/TitleBar.tsx b/src/components/molecules/TitleBar/TitleBar.tsx
@@ -4,14 +4,23 @@ import {MonoPaneTitle} from '@components/atoms';
 
 import * as S from './styled';
 
-function TitleBar(props: {title: string; children?: React.ReactNode}) {
+interface IProps {
+  title: string;
+}
+
+const TitleBar: React.FC<IProps> = props => {
   const {title, children} = props;
+
   return (
-    <S.Container>
-      <MonoPaneTitle>{title}</MonoPaneTitle>
-      {children && <S.RightButtons>{children}</S.RightButtons>}
-    </S.Container>
+    <S.TitleBarContainer>
+      <MonoPaneTitle>
+        <S.Container>
+          {title}
+          {children && <S.RightButtons>{children}</S.RightButtons>}
+        </S.Container>
+      </MonoPaneTitle>
+    </S.TitleBarContainer>
   );
-}
+};
 
 export default TitleBar;
diff --git a/src/components/molecules/TitleBar/styled.tsx b/src/components/molecules/TitleBar/styled.tsx
@@ -5,18 +5,17 @@ import {BackgroundColors} from '@styles/Colors';
 
 export const Container = styled.div`
   display: flex;
-  height: 24px;
   justify-content: space-between;
-  border-bottom: ${AppBorders.sectionDivider};
-  width: 100%;
-  height: 40px;
-  margin: 0;
-  padding: 0;
-  background: ${BackgroundColors.darkThemeBackground};
+  align-items: center;
 `;
 
 export const RightButtons = styled.div`
-  float: right;
   display: flex;
   align-items: center;
 `;
+
+export const TitleBarContainer = styled.div`
+  width: 100%;
+  border-bottom: ${AppBorders.sectionDivider};
+  background: ${BackgroundColors.darkThemeBackground};
+`;
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
@@ -3,12 +3,14 @@ export {default as FormEditor} from './FormEditor';
 export {default as GraphView} from './GraphView';
 export {default as Monaco} from './Monaco';
 export {default as ScrollIntoView} from './ScrollIntoView';
-export {default as TitleBar} from './TitleBar';
 export {default as SectionRenderer} from './SectionRenderer';
 export {default as ClusterDiff} from './ClusterDiff';
 export {default as ResourceFilter} from './ResourceFilter';
 export {default as ResourceFilterIconWithPopover} from './ResourceFilterIconWithPopover';
 export {default as ResourceDiff} from './ResourceDiff';
 export {default as PreviewDropdown} from './PreviewDropdown';
 export {default as TemplateFormRenderer} from './TemplateFormRenderer';
+export {default as TitleBar} from './TitleBar';
 export {default as ValidationErrorsPopover} from './ValidationErrorsPopover';
+export {default as HelmChartModalConfirmWithNamespaceSelect} from './HelmChartModalConfirmWithNamespaceSelect';
+export {default as ModalConfirmWithNamespaceSelect} from './ModalConfirmWithNamespaceSelect';
diff --git a/src/components/organisms/ActionsPane/ActionsPane.styled.tsx b/src/components/organisms/ActionsPane/ActionsPane.styled.tsx
@@ -4,9 +4,11 @@ import styled from 'styled-components';
 
 import {GlobalScrollbarStyle} from '@utils/scrollbar';
 
-import {BackgroundColors} from '@styles/Colors';
-
-export const Tabs = styled(RawTabs)`
+export const Tabs = styled(RawTabs)<{$height: number; $width: number}>`
+  ${({$height, $width}) => `
+    height: ${$height}px;
+    width: ${$width}px;
+  `};
   overflow: visible;
 
   & .ant-tabs-nav {
@@ -17,23 +19,24 @@ export const Tabs = styled(RawTabs)`
   & .ant-tabs-nav::before {
     border-bottom: 1px solid #363636;
   }
+
+  & .ant-tabs-content {
+    height: 100%;
+  }
 `;
 
-export const ActionsPaneContainer = styled.div<{$height: number}>`
-  ${props => props.$height && `height: ${props.$height}px;`}
+export const ActionsPaneContainer = styled.div`
+  height: 100%;
   width: 100%;
-  background-color: ${BackgroundColors.darkThemeBackground};
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-content: start;
-  align-items: start;
+
+  display: grid;
+  grid-template-rows: 1fr max-content;
 `;
 
 export const ActionsPaneFooterContainer = styled.div`
   position: relative;
   width: 100%;
+  height: 100%;
 
   & .react-resizable {
     overflow-y: auto;
@@ -51,21 +54,11 @@ export const ActionsPaneFooterContainer = styled.div`
   }
 `;
 
-export const TabsContainer = styled.div`
-  flex-grow: 1;
-  flex-basis: 0;
+export const ActionsPaneMainContainer = styled.div`
+  height: 100%;
   width: 100%;
-`;
-
-export const TitleBarContainer = styled.div`
-  display: flex;
-  height: 24px;
-  justify-content: space-between;
-`;
-
-export const RightButtons = styled.div`
-  float: right;
-  display: flex;
+  display: grid;
+  grid-template-rows: max-content 1fr;
 `;
 
 export const DiffButton = styled(Button)`