feat(CustomSelect): add selectedLabel (#1260)

Signed-off-by: Kim Anh Nguyen <4783194+kimanhou@users.noreply.github.com>

Author: kimanhou

src/components/CustomSelect/CustomSelect.stories.tsx

@@ -50,6 +50,107 @@ const generateCustomOptions = (): CustomSelectOption[] => {
   ];
 };
 
+const generateCustomOptionsWithSelectedLabel = () => {
+  const options = [
+    {
+      type: "ovn",
+      name: "ovntest",
+      config: {
+        "security.acls": "foo,bar",
+      },
+    },
+    {
+      type: "bridge",
+      name: "lxdbr0",
+      config: {},
+    },
+    {
+      type: "bridge",
+      name: "microbr0",
+      config: {},
+    },
+    {
+      type: "macvlan",
+      name: "macvlantest",
+      config: {},
+    },
+  ].map((network) => {
+    return {
+      label: (
+        <div className="label" style={{ display: "flex", gap: "5px" }}>
+          <span
+            title={network.name}
+            className="network-option u-truncate"
+            style={{ width: "12rem" }}
+          >
+            {network.name}
+          </span>
+          <span
+            title={network.type}
+            className="network-option u-truncate"
+            style={{ width: "8rem" }}
+          >
+            {network.type}
+          </span>
+          <span
+            title="network ACLs"
+            className="network-option u-truncate u-align--right"
+            style={{ paddingRight: "8px", width: "4rem" }}
+          >
+            {network.config["security.acls"]?.length || "-"}
+          </span>
+        </div>
+      ),
+      value: network.name,
+      text: `${network.name} - ${network.type}`,
+      disabled: false,
+      selectedLabel: (
+        <span>
+          {network.name}&nbsp;
+          <span className="u-text--muted">&#40;{network.type}&#41;</span>
+        </span>
+      ),
+    };
+  });
+
+  return options;
+};
+
+const getHeader = () => {
+  return (
+    <div
+      className="header"
+      style={{
+        backgroundColor: "$colors--theme--background-alt",
+        display: "flex",
+        gap: "$sph--small",
+        padding: "$sph--x-small $sph--small",
+        position: "sticky",
+        top: 0,
+      }}
+    >
+      <span
+        className="network-option u-no-margin--bottom"
+        style={{ color: "$colors--theme--text-default", width: "12rem" }}
+      >
+        Name
+      </span>
+      <span
+        className="network-option u-no-margin--bottom"
+        style={{ color: "$colors--theme--text-default", width: "8rem" }}
+      >
+        Type
+      </span>
+      <span
+        className="network-option u-no-margin--bottom"
+        style={{ color: "$colors--theme--text-default", width: "4rem" }}
+      >
+        ACLs
+      </span>
+    </div>
+  );
+};
+
 const Template = ({ ...props }: StoryProps) => {
   const [selected, setSelected] = useState<string>(props.value || "");
   return (
@@ -110,6 +211,19 @@ export const CustomOptions: Story = {
   },
 };
 
+/**
+ * If `label` is of `ReactNode` type. You can render custom content.
+ * In this case, the `selectedLabel` for each option is provided and will be displayed in the toggle instead of `text`
+ * The `text` property for each option is still required and is used for search and sort functionalities.
+ */
+export const CustomOptionsAndSelectedLabel: Story = {
+  args: {
+    options: generateCustomOptionsWithSelectedLabel(),
+    header: getHeader(),
+    dropdownClassName: "network-select-dropdown",
+  },
+};
+
 /**
  * For each option, if `disabled` is set to `true`, the option will be disabled.
  */

src/components/CustomSelect/CustomSelect.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
 import CustomSelect from "./CustomSelect";
 import { CustomSelectOption } from "./CustomSelectDropdown";
 import React from "react";
@@ -11,6 +11,18 @@ describe("CustomSelect", () => {
   const options: CustomSelectOption[] = [
     { value: "1", label: "Option 1" },
     { value: "2", label: "Option 2" },
+    {
+      value: "3",
+      label: "Option 3",
+      selectedLabel: "Selected label of 3",
+    },
+    {
+      value: "4",
+      label: "Option 4",
+      selectedLabel: (
+        <span data-testid="selected-label-test-id">🇯🇵 Selected label of 4</span>
+      ),
+    },
   ];
 
   afterEach(() => {
@@ -69,4 +81,52 @@ describe("CustomSelect", () => {
     const option = screen.queryByRole("option", { name: "Option 2" });
     expect(option).not.toBeInTheDocument();
   });
+
+  it("should display the default placeholder when no option is selected", () => {
+    render(<CustomSelect options={options} value={null} onChange={() => {}} />);
+    expect(screen.getByText("Select an option")).toBeInTheDocument();
+  });
+
+  it("should display the standard label when selected option has no selectedLabel", () => {
+    render(<CustomSelect options={options} value="1" onChange={() => {}} />);
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+  });
+
+  it("should display the selectedLabel when the selected option has one", () => {
+    render(<CustomSelect options={options} value="3" onChange={() => {}} />);
+    expect(screen.getByText("Selected label of 3")).toBeInTheDocument();
+    expect(screen.queryByText("Option 3")).not.toBeInTheDocument();
+  });
+
+  it("should correctly display a React element provided as a selectedLabel", () => {
+    render(<CustomSelect options={options} value="4" onChange={() => {}} />);
+
+    const span = screen.getByTestId("selected-label-test-id");
+    expect(
+      within(span).getByText("🇯🇵 Selected label of 4"),
+    ).toBeInTheDocument();
+  });
+
+  it("should update the displayed label when the selection changes", () => {
+    const { rerender } = render(
+      <CustomSelect
+        options={options}
+        value="1" // Initially selected
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+
+    rerender(
+      <CustomSelect
+        options={options}
+        value="3" // New selection
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Selected label of 3")).toBeInTheDocument();
+    expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+  });
 });

src/components/CustomSelect/CustomSelect.tsx

@@ -126,7 +126,9 @@ const CustomSelect = ({
 
   const toggleLabel = (
     <span className="toggle-label u-truncate">
-      {selectedOption ? getOptionText(selectedOption) : "Select an option"}
+      {selectedOption
+        ? selectedOption.selectedLabel || getOptionText(selectedOption)
+        : "Select an option"}
     </span>
   );
 

src/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -19,6 +19,8 @@ export type CustomSelectOption = LiHTMLAttributes<HTMLLIElement> & {
   // text must be provided if label is not a string
   text?: string;
   disabled?: boolean;
+  // What is displayed in toggle button once an option is selected. If selectedLabel is not provided, fall back onto text
+  selectedLabel?: ReactNode;
 };
 
 export type Props = {