Merge branch '20846-package-build-fixes'

[arvados.git] / services / workbench2 / src / views / workbench / workbench.tsx

diff --git a/services/workbench2/src/views/workbench/workbench.tsx b/services/workbench2/src/views/workbench/workbench.tsx
index be2542515bb6e478103e4fb38802ed32d2dec7c6..b094b769cb0bc93a979b7cf03eee300753f8dcd0 100644 (file)
--- a/services/workbench2/src/views/workbench/workbench.tsx
+++ b/services/workbench2/src/views/workbench/workbench.tsx
@@ -106,6 +106,7 @@ import { pluginConfig } from "plugins";
 import { ElementListReducer } from "common/plugintypes";
 import { COLLAPSE_ICON_SIZE } from "views-components/side-panel-toggle/side-panel-toggle";
 import { Banner } from "views-components/baner/banner";
+import { InstanceTypesPanel } from "views/instance-types-panel/instance-types-panel";
 
 type CssRules = "root" | "container" | "splitter" | "asidePanel" | "contentWrapper" | "content";
 
@@ -119,7 +120,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     splitter: {
         "& > .layout-splitter": {
-            width: "2px",
+            width: "3px",
         },
         "& > .layout-splitter-disabled": {
             pointerEvents: "none",
@@ -228,6 +229,10 @@ let routes = (
             path={Routes.SSH_KEYS_ADMIN}
             component={SshKeyAdminPanel}
         />
+        <Route
+            path={Routes.INSTANCE_TYPES}
+            component={InstanceTypesPanel}
+        />
         <Route
             path={Routes.SITE_MANAGER}
             component={SiteManagerPanel}
@@ -292,7 +297,7 @@ const applyCollapsedState = isCollapsed => {
     const totalWidth: number = document.getElementsByClassName("splitter-layout")[0]?.clientWidth;
     const rightPanelExpandedWidth = (totalWidth - COLLAPSE_ICON_SIZE) / (totalWidth / 100);
     if (rightPanel) {
-        rightPanel.setAttribute("style", `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`);
+        rightPanel.setAttribute("style", `width: ${isCollapsed ? `calc(${rightPanelExpandedWidth}% - 1rem)` : `${getSplitterInitialSize()}%`}`);
     }
     const splitter = document.getElementsByClassName("layout-splitter")[0];
     isCollapsed ? splitter?.classList.add("layout-splitter-disabled") : splitter?.classList.remove("layout-splitter-disabled");
@@ -300,7 +305,7 @@ const applyCollapsedState = isCollapsed => {
 
 export const WorkbenchPanel = withStyles(styles)((props: WorkbenchPanelProps) => {
     //panel size will not scale automatically on window resize, so we do it manually
-    window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
+    if (props && props.sidePanelIsCollapsed) window.addEventListener("resize", () => applyCollapsedState(props.sidePanelIsCollapsed));
     applyCollapsedState(props.sidePanelIsCollapsed);
 
     return (