Ayush/feat/full screen editing

src/components/organisms/ActionsPane/ActionsPane.styled.tsx

@@ -108,3 +108,10 @@ export const Tabs = styled(RawTabs)<{$height: number}>`
     background: transparent;
   }
 `;
+
+export const FullViewIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: -30px;
+  margin-bottom: 30px;
+`;

src/components/organisms/ActionsPane/ActionsPane.tsx

@@ -5,7 +5,7 @@ import {useMeasure} from 'react-use';
 
 import {Tooltip} from 'antd';
 
-import {BookOutlined} from '@ant-design/icons';
+import {BookOutlined, LeftCircleFilled} from '@ant-design/icons';
 
 import {DEFAULT_PANE_TITLE_HEIGHT, HELM_CHART_HELP_URL, KUSTOMIZE_HELP_URL, TOOLTIP_DELAY} from '@constants/constants';
 import {makeApplyKustomizationText, makeApplyResourceText} from '@constants/makeApplyText';
@@ -408,6 +408,10 @@ const ActionsPane: React.FC = () => {
         selectedResourceMeta={selectedResource}
       />
 
+      <S.FullViewIconContainer>
+        <LeftCircleFilled style={{cursor: 'pointer'}} />
+      </S.FullViewIconContainer>
+
       {selection?.type === 'preview.configuration' ? (
         <PreviewConfigurationDetails />
       ) : selection?.type === 'image' ? (

src/components/organisms/Dashboard/Dashboard.styled.tsx

@@ -22,5 +22,6 @@ export const Header = styled(RawHeader)`
 `;
 
 export const Content = styled.div`
+  margin-top: -130px;
   grid-area: content;
 `;

src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx

@@ -10,7 +10,8 @@ export const Drawer = styled(RawDrawer)`
   & .ant-drawer-content {
     background: ${Colors.grey1};
   }
-  z-index: 1000;
+  z-index: 2000 !important;
+  margin-top: -65px;
 
   & .ant-drawer-close {
     position: absolute;
@@ -152,3 +153,41 @@ export const TitleContainer = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const ArrowIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  width: 16px;
+  height: 16px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ArrowAndTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const DrawerSlider = styled.div`
+  position: absolute;
+  width: 5px;
+  padding: 4px 0 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 10001;
+  cursor: ew-resize;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: ${Colors.blue7};
+  }
+
+  &:active {
+    background-color: ${Colors.blue7};
+  }
+`;

src/components/organisms/Dashboard/Tableview/Drawer.tsx

@@ -1,6 +1,8 @@
-import {useLayoutEffect, useRef, useState} from 'react';
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {useClickAway} from 'react-use';
 
+import {LeftCircleFilled, RightCircleFilled} from '@ant-design/icons';
+
 import {v4 as uuidv4} from 'uuid';
 
 import {setActiveTab, setDashboardSelectedResourceId} from '@redux/dashboard/slice';
@@ -26,6 +28,46 @@ export const Drawer = () => {
   const selectedResourceId = useAppSelector(state => state.dashboard.tableDrawer.selectedResourceId);
   const selectedResource = useResource(selectedResourceId ? {id: selectedResourceId, storage: 'cluster'} : undefined);
   const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false);
+  const [isHalfScreen, setIsHalfScreen] = useState(true);
+  const [isResizing, setIsResizing] = useState(false);
+  const [width, setWidth] = useState(736);
+  const layoutSize = useAppSelector(state => state.ui.layoutSize);
+  const leftPaneSize = useAppSelector(state => state.ui.paneConfiguration.leftPane);
+  const [height, setHeight] = useState<number>(window.innerHeight - layoutSize.header);
+  const [maxWidth, setMaxWidth] = useState<number>(window.innerWidth - leftPaneSize);
+
+  const onMouseDown = (e: any) => {
+    setIsResizing(true);
+  };
+
+  const onMouseUp = (e: any) => {
+    setIsResizing(false);
+  };
+
+  useEffect(() => {
+    setHeight(window.innerHeight - layoutSize.header);
+    setMaxWidth(window.innerWidth - leftPaneSize);
+  }, [layoutSize, leftPaneSize]);
+
+  const onMouseMove = (e: {clientX: number}) => {
+    if (isResizing) {
+      let offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
+      const minWidth = 600;
+      if (offsetRight > minWidth && offsetRight < maxWidth) {
+        setWidth(offsetRight);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  });
 
   const [warnUnsavedCodeChanges, UnsavedCodeChangesModal] = useWarnUnsavedChanges();
 
@@ -42,30 +84,42 @@ export const Drawer = () => {
     }
   }, [selectedResourceId]);
 
+  const changeDrawerSize = () => {
+    setIsHalfScreen(!isHalfScreen);
+  };
+
   return (
     <S.Drawer
       className={drawerClassName.current}
-      placement="right"
+      placement={isHalfScreen ? 'right' : 'top'}
       size="large"
       open={Boolean(selectedResourceId)}
       getContainer={false}
+      width={width}
+      height={height}
       title={
         selectedResource ? (
-          <S.TitleContainer>
-            <ResourceRefsIconPopover
-              isSelected={false}
-              isDisabled={false}
-              resourceMeta={selectedResource}
-              type="incoming"
-            />
-            <S.DrawerTitle>{selectedResource.name}</S.DrawerTitle>
-            <ResourceRefsIconPopover
-              isSelected={false}
-              isDisabled={false}
-              resourceMeta={selectedResource}
-              type="outgoing"
-            />
-          </S.TitleContainer>
+          <S.ArrowAndTitleContainer>
+            <S.ArrowIconContainer onClick={changeDrawerSize}>
+              {isHalfScreen && <LeftCircleFilled />}
+              {!isHalfScreen && <RightCircleFilled />}
+            </S.ArrowIconContainer>
+            <S.TitleContainer>
+              <ResourceRefsIconPopover
+                isSelected={false}
+                isDisabled={false}
+                resourceMeta={selectedResource}
+                type="incoming"
+              />
+              <S.DrawerTitle>{selectedResource.name}</S.DrawerTitle>
+              <ResourceRefsIconPopover
+                isSelected={false}
+                isDisabled={false}
+                resourceMeta={selectedResource}
+                type="outgoing"
+              />
+            </S.TitleContainer>
+          </S.ArrowAndTitleContainer>
         ) : (
           <S.TitleContainer> - </S.TitleContainer>
         )
@@ -74,6 +128,7 @@ export const Drawer = () => {
         dispatch(setDashboardSelectedResourceId());
       }}
     >
+      <S.DrawerSlider onMouseDown={onMouseDown} />
       <UnsavedCodeChangesModal />
       <S.TabsContainer>
         <S.Tabs

src/components/organisms/Dashboard/Tableview/Tableview.styled.tsx

@@ -10,8 +10,8 @@ export const Container = styled.div`
   padding: 8px 16px 0px 16px;
   display: flex;
   flex-direction: column;
-  height: 100%;
   overflow: hidden;
+  margin-top: 65px;
 `;
 
 export const FilterContainer = styled.div`
@@ -21,18 +21,26 @@ export const FilterContainer = styled.div`
   grid-area: filter;
 `;
 
+export const HeightAdjuster = styled.div`
+  height: 65px;
+  width: 100%;
+  background-color: transparent;
+`;
+
 export const Input = styled(RawInput)`
   background: ${Colors.grey1};
   width: 360px;
 `;
 
 export const TableContainer = styled.div`
   position: relative;
-  height: 100%;
+  margin-top: -65px;
+  z-index: 2000;
 `;
 
 export const Table = styled(RawTable)`
   grid-area: table;
+  margin-top: 65px;
 
   & .ant-table-container {
     border-top-left-radius: 4px;

src/components/organisms/Dashboard/Tableview/Tableview.tsx

@@ -36,6 +36,7 @@ export const Tableview = ({dataSource, columns}: {dataSource: ResourceMeta[]; co
 
   return (
     <S.Container>
+      <S.HeightAdjuster />
       <S.FilterContainer>
         <S.Input
           size="large"
@@ -46,7 +47,7 @@ export const Tableview = ({dataSource, columns}: {dataSource: ResourceMeta[]; co
         />
       </S.FilterContainer>
 
-      <S.TableContainer>
+      <S.TableContainer style={{height: `${height - 85}px`}}>
         <S.Table
           locale={{emptyText: <NoResourcesFound />}}
           dataSource={filteredDataSource}