The new Dock

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dock when rendered renders 1`] = `
+<body>
+  <div>
+    <div
+      class="Dock isOpen"
+    >
+      <div
+        class="flex align-center tabs-container"
+      >
+        <div
+          class="Tab flex gaps align-center"
+        >
+          <div
+            class="label"
+          >
+            <div
+              class="flex align-center"
+            >
+              <span
+                class="overflow-hidden text-ellipsis"
+              >
+                Some title
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="Tab flex gaps align-center"
+        >
+          <div
+            class="label"
+          >
+            <div
+              class="flex align-center"
+            >
+              <span
+                class="overflow-hidden text-ellipsis"
+              >
+                Some other title
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex align-center toolbar gaps box grow pl-0"
+      >
+        <div
+          class="dock-menu box grow"
+        />
+      </div>
+      <div
+        class="tab-content"
+        style="flex-basis: 420px;"
+      >
+        Some content
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/business-features/dock/src/dock.test.tsx

@@ -0,0 +1,29 @@
+import { createContainer, DiContainer } from "@ogre-tools/injectable";
+import { renderFor } from "@k8slens/test-utils";
+import { DockHost } from "./dock/dock-host";
+import React from "react";
+import type { RenderResult } from "@testing-library/react";
+
+describe("dock", () => {
+  let di: DiContainer;
+
+  beforeEach(() => {
+    di = createContainer("some-container");
+
+    // registerFeature(di, dockFeature);
+  });
+
+  describe("when rendered", () => {
+    let rendered: RenderResult;
+
+    beforeEach(() => {
+      const render = renderFor(di);
+
+      rendered = render(<DockHost />);
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+  });
+});

packages/business-features/dock/src/dock/dock-host.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Tab } from "./tab";
+import { Div, Span } from "@k8slens/ui-components";
+
+export const DockHost = () => (
+  <Div _className={["Dock", { isOpen: true }]}>
+    <Div _flexParent={{ centeredVertically: true }} className="tabs-container">
+      <Tab>
+        <Div _flexParent={{ centeredVertically: true }}>
+          <Span _wordWrap>Some title</Span>
+        </Div>
+      </Tab>
+
+      <Tab>
+        <Div _flexParent={{ centeredVertically: true }}>
+          <Span _wordWrap>Some other title</Span>
+        </Div>
+      </Tab>
+    </Div>
+
+    <Div
+      _flexParent={{ centeredVertically: true }}
+      _className={[
+        "toolbar gaps box grow",
+        {
+          "pl-0": true,
+        },
+      ]}
+    >
+      <div className="dock-menu box grow"></div>
+    </Div>
+
+    <div className={`tab-content`} style={{ flexBasis: 420 }}>
+      Some content
+    </div>
+  </Div>
+);

packages/business-features/dock/src/dock/dock.scss

@@ -1,8 +1,8 @@
 .Dock {
-  position: relative;
-  background: var(--dockHeadBackground);
-  display: flex;
-  flex-direction: column;
+  //position: relative;
+  //background: var(--dockHeadBackground);
+  //display: flex;
+  //flex-direction: column;
 
   &:not(:focus-within) .DockTab.active {
     &::after {

packages/business-features/dock/src/dock/tab.tsx

@@ -0,0 +1,14 @@
+import { Div } from "@k8slens/ui-components";
+import React from "react";
+
+export interface TabProps {
+  children: React.ReactNode;
+}
+
+export const Tab = ({ children }: TabProps) => {
+  return (
+    <Div _className="Tab flex gaps align-center">
+      <div className="label">{children}</div>
+    </Div>
+  );
+};