From 9365a9f8d7a2c02d47c99110796b27beee1bc1d3 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Mon, 11 Sep 2023 23:23:02 +0000
Subject: [PATCH] wip

---
 .../src/components/SelectIDEComponent.tsx     |  4 +--
 .../SelectWorkspaceClassComponent.tsx         |  4 +--
 components/dashboard/src/icons/CaretDown.svg  |  4 +--
 .../create-workspace/WorkspaceClass.tsx       | 31 +++++++++++++++++--
 .../create-workspace/WorkspaceDetails.tsx     |  4 +--
 .../create-workspace/WorkspaceIDE.tsx         | 30 ++++++++++++++++--
 6 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/components/dashboard/src/components/SelectIDEComponent.tsx b/components/dashboard/src/components/SelectIDEComponent.tsx
index cf3a396158300b..ec24054b8c6d48 100644
--- a/components/dashboard/src/components/SelectIDEComponent.tsx
+++ b/components/dashboard/src/components/SelectIDEComponent.tsx
@@ -130,7 +130,7 @@ function capitalize(label?: string) {
     return label && label[0].toLocaleUpperCase() + label.slice(1);
 }
 
-const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({ option, useLatest, loading = false }) => {
+export const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({ option, useLatest, loading = false }) => {
     let version: string | undefined, label: string | undefined, title: string;
     if (!option) {
         title = "Select Editor";
@@ -171,7 +171,7 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({ option, useLatest
     );
 };
 
-function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
+export function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
     const { option, useLatest } = p;
     if (!option) {
         return <></>;
diff --git a/components/dashboard/src/components/SelectWorkspaceClassComponent.tsx b/components/dashboard/src/components/SelectWorkspaceClassComponent.tsx
index 3241197d74f2a4..846f859e946b7f 100644
--- a/components/dashboard/src/components/SelectWorkspaceClassComponent.tsx
+++ b/components/dashboard/src/components/SelectWorkspaceClassComponent.tsx
@@ -82,7 +82,7 @@ type WorkspaceClassDropDownElementSelectedProps = {
     loading?: boolean;
 };
 
-const WorkspaceClassDropDownElementSelected: FC<WorkspaceClassDropDownElementSelectedProps> = ({
+export const WorkspaceClassDropDownElementSelected: FC<WorkspaceClassDropDownElementSelectedProps> = ({
     wsClass,
     loading = false,
 }) => {
@@ -104,7 +104,7 @@ const WorkspaceClassDropDownElementSelected: FC<WorkspaceClassDropDownElementSel
     );
 };
 
-function WorkspaceClassDropDownElement(props: { wsClass: SupportedWorkspaceClass }): JSX.Element {
+export function WorkspaceClassDropDownElement(props: { wsClass: SupportedWorkspaceClass }): JSX.Element {
     const c = props.wsClass;
     return (
         <div className="flex ml-1 mt-1 flex-grow">
diff --git a/components/dashboard/src/icons/CaretDown.svg b/components/dashboard/src/icons/CaretDown.svg
index 56c029abc90adb..abf4cde0f2bb6c 100644
--- a/components/dashboard/src/icons/CaretDown.svg
+++ b/components/dashboard/src/icons/CaretDown.svg
@@ -1,3 +1,3 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="#CE4A3E"/>
+<svg width="10" height="6" viewBox="0 0 10 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" />
 </svg>
diff --git a/components/dashboard/src/workspaces/create-workspace/WorkspaceClass.tsx b/components/dashboard/src/workspaces/create-workspace/WorkspaceClass.tsx
index 588ef7d1383112..4570672912edc0 100644
--- a/components/dashboard/src/workspaces/create-workspace/WorkspaceClass.tsx
+++ b/components/dashboard/src/workspaces/create-workspace/WorkspaceClass.tsx
@@ -7,6 +7,10 @@
 import { FC, useMemo } from "react";
 import { useWorkspaceClasses } from "../../data/workspaces/workspace-classes-query";
 import ContextMenu, { ContextMenuEntry } from "../../components/ContextMenu";
+import { Button } from "../../components/Button";
+import WorkspaceClassIcon from "../../icons/WorkspaceClass.svg";
+import Arrow from "../../components/Arrow";
+import { WorkspaceClassDropDownElement } from "../../components/SelectWorkspaceClassComponent";
 
 type WorkspaceClassProps = {
     selectedWSClassID: string;
@@ -18,6 +22,7 @@ export const WorkspaceClass: FC<WorkspaceClassProps> = ({ selectedWSClassID, onC
     const menuEntries = useMemo((): ContextMenuEntry[] => {
         return (workspaceClasses || [])?.map((c) => ({
             title: c.displayName,
+            customContent: <WorkspaceClassDropDownElement wsClass={c} />,
             onClick: () => {
                 onChange(c.id);
             },
@@ -38,8 +43,30 @@ export const WorkspaceClass: FC<WorkspaceClassProps> = ({ selectedWSClassID, onC
     }
 
     return (
-        <ContextMenu menuEntries={menuEntries}>
-            <span>{selectedWSClass?.description ?? "unknown"}</span>
+        <ContextMenu menuEntries={menuEntries} customClasses="left-0">
+            <Button
+                type="secondary"
+                size="small"
+                icon={<img className="w-8 filter-grayscale" src={WorkspaceClassIcon} alt="logo" />}
+            >
+                <span className="font-semibold text-gray-600">{selectedWSClass?.displayName ?? "unknown"}</span>
+                {/* <div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
+                    <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z"
+                            fill="#78716C"
+                        />
+                        <title>Toggle organization selection menu</title>
+                    </svg>
+                </div> */}
+                <Arrow direction={"down"} />
+                {/* <span className="text-gray-600">
+                    <img className="w-4" src={CaretDownIcon} alt="logo" />
+                </span> */}
+            </Button>
+            {/* <span className="font-semibold">{selectedWSClass?.displayName ?? "unknown"}</span> */}
         </ContextMenu>
     );
 };
diff --git a/components/dashboard/src/workspaces/create-workspace/WorkspaceDetails.tsx b/components/dashboard/src/workspaces/create-workspace/WorkspaceDetails.tsx
index a92e8598c5d79e..b7e8b4053d3952 100644
--- a/components/dashboard/src/workspaces/create-workspace/WorkspaceDetails.tsx
+++ b/components/dashboard/src/workspaces/create-workspace/WorkspaceDetails.tsx
@@ -23,9 +23,9 @@ export const WorkspaceDetails: FC<Props> = ({
     onIDEChange,
 }) => {
     return (
-        <div className="flex flex-row gap-1">
+        <div className="flex flex-row justify-start items-center gap-2 mt-4 mx-2">
             <WorkspaceClass selectedWSClassID={selectedWSClassID} onChange={onWSClassChange} />
-            <span> class with </span>
+            <span>with</span>
             <WorkspaceIDE selectedIDE={selectedIDE} useLatestIDE={useLatestIDE} onChange={onIDEChange} />
         </div>
     );
diff --git a/components/dashboard/src/workspaces/create-workspace/WorkspaceIDE.tsx b/components/dashboard/src/workspaces/create-workspace/WorkspaceIDE.tsx
index 61851d99d4d161..57a3a153ccaa26 100644
--- a/components/dashboard/src/workspaces/create-workspace/WorkspaceIDE.tsx
+++ b/components/dashboard/src/workspaces/create-workspace/WorkspaceIDE.tsx
@@ -7,6 +7,10 @@
 import { FC, useMemo } from "react";
 import ContextMenu, { ContextMenuEntry } from "../../components/ContextMenu";
 import { useFilteredAndSortedIDEOptions } from "../../data/ide-options/ide-options-query";
+import { Button } from "../../components/Button";
+import Arrow from "../../components/Arrow";
+import Editor from "../../icons/Editor.svg";
+import { IdeOptionElementInDropDown } from "../../components/SelectIDEComponent";
 
 type WorkspaceIDEProps = {
     selectedIDE: string;
@@ -19,6 +23,7 @@ export const WorkspaceIDE: FC<WorkspaceIDEProps> = ({ selectedIDE, useLatestIDE,
     const menuEntries = useMemo((): ContextMenuEntry[] => {
         return (ideOptions || []).map((ide) => ({
             title: ide.title,
+            customContent: <IdeOptionElementInDropDown option={ide} useLatest={useLatestIDE} />,
             onClick: () => {
                 onChange(ide.id, useLatestIDE);
             },
@@ -38,8 +43,29 @@ export const WorkspaceIDE: FC<WorkspaceIDEProps> = ({ selectedIDE, useLatestIDE,
     }
 
     return (
-        <ContextMenu menuEntries={menuEntries}>
-            <span>{selectedOption?.title ?? "unknown"}</span>
+        <ContextMenu menuEntries={menuEntries} customClasses="right-0">
+            {/* {selectedOption ? (
+                <IdeOptionElementSelected option={selectedOption} useLatest={useLatestIDE} loading={isLoading} />
+            ) : (
+                <span>Please select an Editor</span>
+            )} */}
+            <Button
+                type="secondary"
+                size="small"
+                icon={<img className="w-4 filter-grayscale" src={Editor} alt="logo" />}
+            >
+                {/* <span className="flex flex-row gap-1 items-center"> */}
+                {/* <img className="w-4 filter-grayscale" src={Editor} alt="logo" /> */}
+                <span className="font-semibold">{selectedOption?.title ?? "unknown"}</span>
+                {selectedOption?.label && (
+                    <>
+                        <span className="text-gray-300 dark:text-gray-600 font-normal">&middot;</span>
+                        <span className="text-sm">{selectedOption?.label}</span>
+                    </>
+                )}
+                <Arrow direction={"down"} />
+                {/* </span> */}
+            </Button>
         </ContextMenu>
     );
 };