Web console: Improve workbench view with resizable side panels (#17387)

licenses.yaml

@@ -6329,16 +6329,6 @@ license_file_path: licenses/bin/react-router.MIT
 
 ---
 
-name: "react-splitter-layout"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: Yang Liu
-version: 4.0.0
-license_file_path: licenses/bin/react-splitter-layout.MIT
-
----
-
 name: "react-table"
 license_category: binary
 module: web-console

web-console/package.json

@@ -83,7 +83,6 @@
     "react-dom": "^18.3.1",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-splitter-layout": "^4.0.0",
     "react-table": "~6.11.5",
     "regenerator-runtime": "^0.13.7",
     "tslib": "^2.8.0",
@@ -116,7 +115,6 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-splitter-layout": "^3.0.5",
     "@types/react-table": "6.8.5",
     "@types/uuid": "^7.0.2",
     "autoprefixer": "^10.4.20",

web-console/src/components/index.ts

@@ -51,6 +51,7 @@ export * from './segment-timeline/segment-timeline';
 export * from './show-json/show-json';
 export * from './show-log/show-log';
 export * from './show-value/show-value';
+export * from './splitter-layout/splitter-layout';
 export * from './suggestion-menu/suggestion-menu';
 export * from './supervisor-history-panel/supervisor-history-panel';
 export * from './table-cell/table-cell';

web-console/src/components/splitter-layout/__snapshots__/splitter-layout.spec.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SplitterLayout matches snapshot one child 1`] = `
+<div
+  class="splitter-layout splitter-layout-horizontal"
+>
+  <div
+    class="layout-pane layout-pane-primary"
+  >
+    <div
+      class="child1"
+    />
+  </div>
+</div>
+`;
+
+exports[`SplitterLayout matches snapshot two children 1`] = `
+<div
+  class="splitter-layout splitter-layout-vertical"
+>
+  <div
+    class="layout-pane layout-pane-primary"
+  >
+    <div
+      class="child1"
+    />
+  </div>
+  <div
+    class="layout-splitter"
+    role="separator"
+  />
+  <div
+    class="layout-pane"
+    style="height: 50%;"
+  >
+    <div
+      class="child2"
+    />
+  </div>
+</div>
+`;

web-console/src/components/splitter-layout/layout-pane.tsx

@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface LayoutPaneProps {
+  vertical?: boolean;
+  size: number | undefined;
+  percentage?: boolean;
+  children: ReactNode;
+}
+
+export function LayoutPane(props: LayoutPaneProps) {
+  return (
+    <div
+      className={classNames('layout-pane', {
+        'layout-pane-primary': typeof props.size === 'undefined',
+      })}
+      style={
+        typeof props.size === 'number'
+          ? {
+              [props.vertical ? 'height' : 'width']: `${props.size}${
+                props.percentage ? '%' : 'px'
+              }`,
+            }
+          : undefined
+      }
+    >
+      {props.children}
+    </div>
+  );
+}

web-console/src/components/splitter-layout/splitter-layout.scss

@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Originally copied from https://github.com/zesik/react-splitter-layout/blob/master/src/stylesheets/index.css and heavily refactored
+
+$default-splitter-size: 8px;
+
+.splitter-layout {
+  display: flex;
+  overflow: hidden;
+
+  &.splitter-layout-horizontal {
+    flex-direction: row;
+
+    &.layout-changing {
+      cursor: col-resize;
+    }
+
+    & > .layout-splitter {
+      width: $default-splitter-size;
+      height: 100%;
+      cursor: col-resize;
+    }
+  }
+
+  &.splitter-layout-vertical {
+    flex-direction: column;
+
+    &.layout-changing {
+      cursor: row-resize;
+    }
+
+    & > .layout-splitter {
+      width: 100%;
+      height: $default-splitter-size;
+      cursor: row-resize;
+    }
+  }
+
+  & > .layout-pane {
+    position: relative;
+    flex: 0 0 auto;
+    overflow: auto;
+
+    &.layout-pane-primary {
+      flex: 1 1 auto;
+    }
+  }
+
+  & > .layout-splitter {
+    flex: 0 0 auto;
+  }
+}

web-console/src/components/splitter-layout/splitter-layout.spec.tsx

@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+
+import { SplitterLayout } from './splitter-layout';
+
+describe('SplitterLayout', () => {
+  it('matches snapshot one child', () => {
+    const splitterLayout = (
+      <SplitterLayout primaryMinSize={100} secondaryInitialSize={50} secondaryMinSize={10}>
+        <div className="child1" />
+      </SplitterLayout>
+    );
+
+    const { container } = render(splitterLayout);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot two children', () => {
+    const splitterLayout = (
+      <SplitterLayout
+        vertical
+        percentage
+        primaryMinSize={100}
+        secondaryInitialSize={50}
+        secondaryMinSize={10}
+      >
+        <div className="child1" />
+        <div className="child2" />
+      </SplitterLayout>
+    );
+
+    const { container } = render(splitterLayout);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});