From 6d159a5e2079f05d1c1e1c99d9330d1e3191d222 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Fri, 4 Oct 2024 14:21:40 +0100
Subject: [PATCH] Replace some lab commponents

---
 package-lock.json                             |  4 ---
 .../ui-src/__tests__/NodeKeyInput.spec.tsx    | 29 +++++++++++++++++++
 .../ui-src/components/NodeKeyInput.tsx        | 15 +++++-----
 .../copy-manager/ui-src/view/AdvancedView.tsx |  6 ++--
 packages/export-styles/package.json           |  1 -
 packages/table-generator/package.json         |  1 -
 .../ui-src/__tests__/view/DataView.spec.tsx   | 26 +++++++++++++++++
 .../ui-src/components/ContentStatus.tsx       | 16 ++++++++++
 .../table-generator/ui-src/view/DataView.tsx  |  2 +-
 9 files changed, 83 insertions(+), 17 deletions(-)
 create mode 100644 packages/copy-manager/ui-src/__tests__/NodeKeyInput.spec.tsx
 create mode 100644 packages/table-generator/ui-src/components/ContentStatus.tsx

diff --git a/package-lock.json b/package-lock.json
index 6b4e0e8..e25e006 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9146,7 +9146,6 @@
       "dependencies": {
         "@salt-ds/core": "^1.27.1",
         "@salt-ds/icons": "^1.11.2",
-        "@salt-ds/lab": "^1.0.0-alpha.44",
         "@salt-ds/theme": "^1.15.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
@@ -9159,7 +9158,6 @@
       "dependencies": {
         "@salt-ds/core": "^1.27.1",
         "@salt-ds/icons": "^1.11.2",
-        "@salt-ds/lab": "^1.0.0-alpha.44",
         "@salt-ds/theme": "^1.15.0",
         "papaparse": "^5.4.1",
         "react": "^18.3.0",
@@ -12762,7 +12760,6 @@
       "requires": {
         "@salt-ds/core": "^1.27.1",
         "@salt-ds/icons": "^1.11.2",
-        "@salt-ds/lab": "^1.0.0-alpha.44",
         "@salt-ds/theme": "^1.15.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
@@ -12773,7 +12770,6 @@
       "requires": {
         "@salt-ds/core": "^1.27.1",
         "@salt-ds/icons": "^1.11.2",
-        "@salt-ds/lab": "^1.0.0-alpha.44",
         "@salt-ds/theme": "^1.15.0",
         "@types/papaparse": "^5.3.8",
         "papaparse": "^5.4.1",
diff --git a/packages/copy-manager/ui-src/__tests__/NodeKeyInput.spec.tsx b/packages/copy-manager/ui-src/__tests__/NodeKeyInput.spec.tsx
new file mode 100644
index 0000000..56012ce
--- /dev/null
+++ b/packages/copy-manager/ui-src/__tests__/NodeKeyInput.spec.tsx
@@ -0,0 +1,29 @@
+import { NodeKeyInput } from "../components/NodeKeyInput";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvents from "@testing-library/user-event";
+import React from "react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { SelectableTextNodeInfo } from "../../shared-src/messages";
+
+describe("NodeKeyInput", () => {
+  test("call onUpdateNodeKey on blur", async () => {
+    const mockNodeInfo = {
+      characters: "a",
+      checked: false,
+      id: "node1:1",
+      key: "key",
+      name: "Frame 1",
+    } satisfies SelectableTextNodeInfo;
+    const updateSpy = vi.fn();
+    render(
+      <NodeKeyInput nodeInfo={mockNodeInfo} onUpdateNodeKey={updateSpy} />
+    );
+    await userEvents.type(
+      screen.getByPlaceholderText(mockNodeInfo.name),
+      "abc"
+    );
+    expect(updateSpy).not.toBeCalled();
+    fireEvent.blur(screen.getByPlaceholderText(mockNodeInfo.name));
+    expect(updateSpy).toBeCalledWith(mockNodeInfo.id, "keyabc");
+  });
+});
diff --git a/packages/copy-manager/ui-src/components/NodeKeyInput.tsx b/packages/copy-manager/ui-src/components/NodeKeyInput.tsx
index 75feb95..effc88b 100644
--- a/packages/copy-manager/ui-src/components/NodeKeyInput.tsx
+++ b/packages/copy-manager/ui-src/components/NodeKeyInput.tsx
@@ -1,6 +1,5 @@
-import { Button } from "@salt-ds/core";
+import { Button, Input } from "@salt-ds/core";
 import { CloseSmallIcon, WarningIcon } from "@salt-ds/icons";
-import { Input } from "@salt-ds/lab";
 import React from "react";
 import { SelectableTextNodeInfo } from "../../shared-src/messages";
 
@@ -17,7 +16,13 @@ export const NodeKeyInput = ({
       // Use `key` to force rerender a new Input when nodeInfo key changes
       key={`input-${nodeInfo.key}`}
       defaultValue={nodeInfo.key}
-      inputProps={{ placeholder: nodeInfo.name }}
+      inputProps={{
+        placeholder: nodeInfo.name,
+        onBlur: (e) => {
+          const updatedValue = e.target.value;
+          onUpdateNodeKey(nodeInfo.id, updatedValue);
+        },
+      }}
       endAdornment={
         nodeInfo.key ? (
           <Button onClick={() => onUpdateNodeKey(nodeInfo.id, "")}>
@@ -27,10 +32,6 @@ export const NodeKeyInput = ({
           <WarningIcon />
         )
       }
-      onBlur={(e) => {
-        const updatedValue = e.currentTarget.value;
-        onUpdateNodeKey(nodeInfo.id, updatedValue);
-      }}
     />
   );
 };
diff --git a/packages/copy-manager/ui-src/view/AdvancedView.tsx b/packages/copy-manager/ui-src/view/AdvancedView.tsx
index 4a18c57..1e70e6e 100644
--- a/packages/copy-manager/ui-src/view/AdvancedView.tsx
+++ b/packages/copy-manager/ui-src/view/AdvancedView.tsx
@@ -179,12 +179,12 @@ export const AdvancedView = () => {
         <table>
           <thead>
             <tr>
-              <th className="checkbox-col">
+              <td className="checkbox-col">
                 {/* <Checkbox className="tableCheckbox headerCheckbox" /> */}
-              </th>
+              </td>
               <th>Key</th>
               <th>Characters</th>
-              <th className="button-col">{/* Button column */}</th>
+              <td className="button-col">{/* Button column */}</td>
             </tr>
           </thead>
           <tbody>
diff --git a/packages/export-styles/package.json b/packages/export-styles/package.json
index 2aa988e..5d64e6b 100644
--- a/packages/export-styles/package.json
+++ b/packages/export-styles/package.json
@@ -35,7 +35,6 @@
   "dependencies": {
     "@salt-ds/core": "^1.27.1",
     "@salt-ds/icons": "^1.11.2",
-    "@salt-ds/lab": "^1.0.0-alpha.44",
     "@salt-ds/theme": "^1.15.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
diff --git a/packages/table-generator/package.json b/packages/table-generator/package.json
index 92b5335..50995f3 100644
--- a/packages/table-generator/package.json
+++ b/packages/table-generator/package.json
@@ -35,7 +35,6 @@
   "dependencies": {
     "@salt-ds/core": "^1.27.1",
     "@salt-ds/icons": "^1.11.2",
-    "@salt-ds/lab": "^1.0.0-alpha.44",
     "@salt-ds/theme": "^1.15.0",
     "papaparse": "^5.4.1",
     "react": "^18.3.0",
diff --git a/packages/table-generator/ui-src/__tests__/view/DataView.spec.tsx b/packages/table-generator/ui-src/__tests__/view/DataView.spec.tsx
index a9489d6..cf8aaff 100644
--- a/packages/table-generator/ui-src/__tests__/view/DataView.spec.tsx
+++ b/packages/table-generator/ui-src/__tests__/view/DataView.spec.tsx
@@ -27,6 +27,32 @@ describe("DataView", () => {
     vi.resetAllMocks();
   });
 
+  describe("default launch", () => {
+    test("shows initialzing message", () => {
+      expect(screen.getByText("Configure Data"));
+      expect(screen.getByText("Initializing"));
+      expect(screen.getByText("Please wait while parsing the data."));
+    });
+
+    test("invalid message after initialing", () => {
+      renderResult.rerender(
+        <DataView
+          setTableConfig={() => {}}
+          tableConfig={DEFAULT_TABLE_CONFIG}
+          validTableSelected={false}
+          initializing={false}
+        />
+      );
+      expect(screen.getByText("Configure Data"));
+      expect(screen.getByText("Invalid selection"));
+      expect(
+        screen.getByText(
+          "Please select a table generated by the plugin to populate data."
+        )
+      );
+    });
+  });
+
   describe("settings", async () => {
     beforeEach(() => {
       fireEvent(
diff --git a/packages/table-generator/ui-src/components/ContentStatus.tsx b/packages/table-generator/ui-src/components/ContentStatus.tsx
new file mode 100644
index 0000000..b2415f0
--- /dev/null
+++ b/packages/table-generator/ui-src/components/ContentStatus.tsx
@@ -0,0 +1,16 @@
+import { StackLayout, StatusIndicator, Text } from "@salt-ds/core";
+
+// Salt pattern - https://www.saltdesignsystem.com/salt/patterns/content-status
+export const ContentStatus = (props: { message: string; title: string }) => {
+  return (
+    <StackLayout>
+      <StatusIndicator status="info" size={2} />
+      <StackLayout gap={1}>
+        <Text>
+          <strong>{props.title}</strong>
+        </Text>
+        <Text>{props.message}</Text>
+      </StackLayout>
+    </StackLayout>
+  );
+};
diff --git a/packages/table-generator/ui-src/view/DataView.tsx b/packages/table-generator/ui-src/view/DataView.tsx
index 509077f..8040e80 100644
--- a/packages/table-generator/ui-src/view/DataView.tsx
+++ b/packages/table-generator/ui-src/view/DataView.tsx
@@ -7,7 +7,7 @@ import {
   Tooltip,
 } from "@salt-ds/core";
 import { CsvIcon, DownloadIcon } from "@salt-ds/icons";
-import { ContentStatus } from "@salt-ds/lab";
+import { ContentStatus } from "../components/ContentStatus";
 import { ParseResult, parse, unparse } from "papaparse";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { PostToFigmaMessage, PostToUIMessage } from "../../shared-src/messages";