web: Add a resize drag component to the sidebar

web/package.json

@@ -28,6 +28,7 @@
     "react-outline-manager": "^1.2.2",
     "react-router-dom": "^5.1.0",
     "react-scripts": "^4.0.1",
+    "react-split-pane": "^0.1.92",
     "react-storage-hooks": "^4.0.1",
     "react-table": "^7.7.0",
     "react-timeago": "^4.4.0",

web/src/OverviewResourcePane.tsx

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react"
+import SplitPane from "react-split-pane"
 import styled from "styled-components"
 import { Alert, combinedAlerts } from "./alerts"
 import HeaderBar from "./HeaderBar"
 import { LogUpdateAction, LogUpdateEvent, useLogStore } from "./LogStore"
 import OverviewResourceDetails from "./OverviewResourceDetails"
 import OverviewResourceSidebar from "./OverviewResourceSidebar"
+import "./Resizer.scss"
 import { useResourceNav } from "./ResourceNav"
 import StarredResourceBar, {
   starredResourcePropsFromView,
 } from "./StarredResourceBar"
-import { Color } from "./style-helpers"
+import { Color, Width } from "./style-helpers"
 import { ResourceName } from "./types"
 
 type UIResource = Proto.v1alpha1UIResource
@@ -25,13 +27,20 @@ let OverviewResourcePaneRoot = styled.div`
   background-color: ${Color.grayDark};
   max-height: 100%;
 `
-
 let Main = styled.div`
   display: flex;
   width: 100%;
   // In Safari, flex-basis "auto" squishes OverviewTabBar + OverviewResourceBar
   flex: 1 1 100%;
   overflow: hidden;
+  position: relative;
+
+  .SplitPane {
+    position: relative !important;
+  }
+  .Pane {
+    display: flex;
+  }
 `
 
 export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
@@ -88,13 +97,19 @@ export default function OverviewResourcePane(props: OverviewResourcePaneProps) {
         {...starredResourcePropsFromView(props.view, selectedTab)}
       />
       <Main>
-        <OverviewResourceSidebar {...props} name={name} />
-        <OverviewResourceDetails
-          resource={r}
-          name={name}
-          alerts={alerts}
-          buttons={buttons}
-        />
+        <SplitPane
+          split="vertical"
+          minSize={Width.sidebarDefault}
+          defaultSize={Width.sidebarDefault}
+        >
+          <OverviewResourceSidebar {...props} name={name} />
+          <OverviewResourceDetails
+            resource={r}
+            name={name}
+            alerts={alerts}
+            buttons={buttons}
+          />
+        </SplitPane>
       </Main>
     </OverviewResourcePaneRoot>
   )

web/src/OverviewResourceSidebar.stories.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { MemoryRouter } from "react-router"
+import SplitPane from "react-split-pane"
 import Features, { FeaturesProvider, Flag } from "./feature"
 import OverviewResourceSidebar from "./OverviewResourceSidebar"
 import PathBuilder from "./PathBuilder"
+import { Width } from "./style-helpers"
 import {
   nResourceView,
   oneResource,
@@ -30,7 +32,13 @@ export default {
         <MemoryRouter initialEntries={["/"]}>
           <FeaturesProvider value={features}>
             <div style={{ margin: "-1rem", height: "80vh" }}>
-              <Story />
+              <SplitPane
+                split="vertical"
+                minSize={Width.sidebarDefault}
+                defaultSize={Width.sidebarDefault}
+              >
+                <Story />
+              </SplitPane>
             </div>
           </FeaturesProvider>
         </MemoryRouter>

web/src/OverviewResourceSidebar.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components"
 import { usePathBuilder } from "./PathBuilder"
 import SidebarItem from "./SidebarItem"
 import SidebarResources from "./SidebarResources"
+import { Width } from "./style-helpers"
 import { ResourceName, ResourceView } from "./types"
 
 type OverviewResourceSidebarProps = {
@@ -13,11 +14,10 @@ type OverviewResourceSidebarProps = {
 let OverviewResourceSidebarRoot = styled.div`
   display: flex;
   flex-direction: column;
-  flex-basis: 336px;
   flex-shrink: 0;
-  flex-grow: 0;
+  flex-grow: 1;
   height: 100%;
-  width: 336px;
+  min-width: ${Width.sidebarDefault}px;
 `
 
 export default function OverviewResourceSidebar(

web/src/Resizer.scss

@@ -0,0 +1,51 @@
+/* Adapted from https://github.com/tomkp/react-split-pane */
+
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}

web/src/SidebarItemView.stories.tsx

@@ -4,6 +4,7 @@ import PathBuilder from "./PathBuilder"
 import { ResourceNavContextProvider } from "./ResourceNav"
 import SidebarItem from "./SidebarItem"
 import SidebarItemView, { SidebarItemViewProps } from "./SidebarItemView"
+import { Width } from "./style-helpers"
 import { oneResourceNoAlerts } from "./testdata"
 import {
   ResourceName,
@@ -24,7 +25,9 @@ function ItemWrapper(props: { children: React.ReactNode }) {
   return (
     <MemoryRouter initialEntries={["/"]}>
       <ResourceNavContextProvider value={resourceNav}>
-        <div style={{ width: "336px", margin: "100px" }}>{props.children}</div>
+        <div style={{ width: `${Width.sidebarDefault}px`, margin: "100px" }}>
+          {props.children}
+        </div>
       </ResourceNavContextProvider>
     </MemoryRouter>
   )

web/src/constants.scss

@@ -50,10 +50,6 @@ $statusbar-tiltPanel-width: $spacing-unit * 1.75;
 
 $tablet-width: 1500px;
 
-// These below need to be synchronized with style-helpers.ts
-// We're mid-migration in shifting away from Sass to Styled Components
-// When most styling is via Styled Components, these will be refactored away:
-$sidebar-width: $spacing-unit * 10.5; // Width.sidebar
 $statusbar-height: $spacing-unit * 1.5; // Height.statusbar
 
 // Z-Index
@@ -84,4 +80,4 @@ $animation-timing: 200ms;
 .u-flexRow {
   display: flex !important;
   flex-direction: row !important;
-}
+}

web/src/style-helpers.ts

@@ -63,25 +63,9 @@ export function SizeUnit(multiplier: number) {
   return `${unit * multiplier}px`
 }
 
-// Set sizes expressed in pixels:
-export enum Height {
-  unit = heightUnit,
-  statusHeader = unit * 1.8, // The bar at the top with Pod ID and status
-  secondaryNav = unit * 1.2,
-  secondaryNavLower = unit * 0.8,
-  secondaryNavOverlap = unit * -0.2,
-  secondaryNavTwoLevel = unit * 1.8,
-  statusbar = unit * 1.5,
-}
 export enum Width {
-  badge = unit * 0.6,
-  secondaryNavItem = unit * 5,
-  sidebarTriggerButton = unit,
-  sidebar = unit * 10.5, // Sync with constants.scss > $sidebar-width
-  sidebarCollapsed = unit,
-  statusbar = unit * 1.5, // sync with constants.scss > $statusbar-height
+  sidebarDefault = 336,
   smallScreen = 1500,
-
   statusIcon = 22,
   statusIconMarginRight = 10,
 }

web/yarn.lock

@@ -12339,7 +12339,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12845,11 +12845,27 @@ react-sizeme@^3.0.1:
     shallowequal "^1.1.0"
     throttle-debounce "^3.0.1"
 
+react-split-pane@^0.1.92:
+  version "0.1.92"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
+  integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
+  dependencies:
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.2.2"
+
 react-storage-hooks@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-storage-hooks/-/react-storage-hooks-4.0.1.tgz#e30ed5cda48c77c431ecc02ec3824bd615f5b7fb"
   integrity sha512-fetDkT5RDHGruc2NrdD1iqqoLuXgbx6AUpQSQLLkrCiJf8i97EtwJNXNTy3+GRfsATLG8TZgNc9lGRZOaU5yQA==
 
+react-style-proptype@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
+  dependencies:
+    prop-types "^15.5.4"
+
 react-syntax-highlighter@^13.5.3:
   version "13.5.3"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz#9712850f883a3e19eb858cf93fad7bb357eea9c6"