[dashboard] enable naming of workspaces (#20017)

svenefftinge · web-flow · commit 64ce757564d3 · 2024-07-10T09:11:55.000-04:00
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
@@ -35,6 +35,7 @@ import {
 } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
 import { PartialMessage } from "@bufbuild/protobuf";
 import { trackEvent } from "../Analytics";
+import { fromWorkspaceName } from "../workspaces/RenameWorkspaceModal";
 
 const sessionId = v4();
 
@@ -562,7 +563,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                                 <div className="rounded-full w-3 h-3 text-sm bg-green-500">&nbsp;</div>
                                 <div>
                                     <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
-                                        {this.state.workspace.id}
+                                        {fromWorkspaceName(this.state.workspace) || this.state.workspace.id}
                                     </p>
                                     <a target="_parent" href={contextURL}>
                                         <p className="w-56 truncate hover:text-blue-600 dark:hover:text-blue-400">
@@ -667,7 +668,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                             <div className="rounded-full w-3 h-3 text-sm bg-kumquat-ripe">&nbsp;</div>
                             <div>
                                 <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
-                                    {this.state.workspace.id}
+                                    {fromWorkspaceName(this.state.workspace) || this.state.workspace.id}
                                 </p>
                                 <a target="_parent" href={contextURL}>
                                     <p className="w-56 truncate hover:text-blue-600 dark:hover:text-blue-400">
@@ -712,7 +713,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                             <div className="rounded-full w-3 h-3 text-sm bg-gray-300">&nbsp;</div>
                             <div>
                                 <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
-                                    {this.state.workspace.id}
+                                    {fromWorkspaceName(this.state.workspace) || this.state.workspace.id}
                                 </p>
                                 <a target="_parent" href={contextURL}>
                                     <p className="w-56 truncate hover:text-blue-600 dark:hover:text-blue-400">
diff --git a/components/dashboard/src/workspaces/DeleteWorkspaceModal.tsx b/components/dashboard/src/workspaces/DeleteWorkspaceModal.tsx
@@ -9,6 +9,7 @@ import ConfirmationModal from "../components/ConfirmationModal";
 import { useDeleteWorkspaceMutation } from "../data/workspaces/delete-workspace-mutation";
 import { useToast } from "../components/toasts/Toasts";
 import { Workspace } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { fromWorkspaceName } from "./RenameWorkspaceModal";
 
 type Props = {
     workspace: Workspace;
@@ -33,7 +34,7 @@ export const DeleteWorkspaceModal: FunctionComponent<Props> = ({ workspace, onCl
             areYouSureText="Are you sure you want to delete this workspace?"
             children={{
                 name: workspace.id,
-                description: workspace.metadata?.name,
+                description: fromWorkspaceName(workspace),
             }}
             buttonText="Delete Workspace"
             warningText={deleteWorkspace.isError ? "There was a problem deleting your workspace." : undefined}
diff --git a/components/dashboard/src/workspaces/RenameWorkspaceModal.tsx b/components/dashboard/src/workspaces/RenameWorkspaceModal.tsx
@@ -11,31 +11,42 @@ import { Workspace } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
 import { useUpdateWorkspaceMutation } from "../data/workspaces/update-workspace-mutation";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
 
+export const NAME_PREFIX = "named:";
+export function toWorkspaceName(name: string): string {
+    // unsetting the name
+    if (name.trim().length === 0) {
+        return "no-name";
+    }
+    return `${NAME_PREFIX}${name}`;
+}
+
+export function fromWorkspaceName(workspace?: Workspace): string | undefined {
+    if (workspace?.metadata?.name?.startsWith(NAME_PREFIX)) {
+        return workspace.metadata.name.slice(NAME_PREFIX.length);
+    }
+    return undefined;
+}
+
 type Props = {
     workspace: Workspace;
     onClose(): void;
 };
 export const RenameWorkspaceModal: FunctionComponent<Props> = ({ workspace, onClose }) => {
     const [errorMessage, setErrorMessage] = useState("");
-    const [name, setName] = useState(workspace.metadata?.name || "");
+    const [name, setName] = useState(fromWorkspaceName(workspace) || "");
     const updateWorkspace = useUpdateWorkspaceMutation();
 
     const updateWorkspaceDescription = useCallback(async () => {
         try {
-            if (name.length === 0) {
-                setErrorMessage("Description cannot not be empty.");
-                return;
-            }
-
             if (name.length > 250) {
-                setErrorMessage("Description is too long for readability.");
+                setErrorMessage("Name is too long for readability.");
                 return;
             }
 
             setErrorMessage("");
 
             // Using mutateAsync here so we can close the modal after it completes successfully
-            await updateWorkspace.mutateAsync({ workspaceId: workspace.id, metadata: { name } });
+            await updateWorkspace.mutateAsync({ workspaceId: workspace.id, metadata: { name: toWorkspaceName(name) } });
 
             // Close the modal
             onClose();
@@ -46,7 +57,7 @@ export const RenameWorkspaceModal: FunctionComponent<Props> = ({ workspace, onCl
 
     return (
         <Modal visible onClose={onClose} onSubmit={updateWorkspaceDescription}>
-            <ModalHeader>Rename Workspace Description</ModalHeader>
+            <ModalHeader>Rename Workspace</ModalHeader>
             <ModalBody>
                 {errorMessage.length > 0 ? (
                     <div className="bg-kumquat-light rounded-md p-3 text-gitpod-red text-sm mb-2">{errorMessage}</div>
@@ -60,7 +71,7 @@ export const RenameWorkspaceModal: FunctionComponent<Props> = ({ workspace, onCl
                     onChange={(e) => setName(e.target.value)}
                 />
                 <div className="mt-1">
-                    <p className="text-gray-500">Change the description to make it easier to go back to a workspace.</p>
+                    <p className="text-gray-500">Change the name to better identify the workspace.</p>
                     <p className="text-gray-500">Workspace URLs and endpoints will remain the same.</p>
                 </div>
             </ModalBody>
@@ -69,7 +80,7 @@ export const RenameWorkspaceModal: FunctionComponent<Props> = ({ workspace, onCl
                     Cancel
                 </Button>
                 <LoadingButton type="submit" loading={updateWorkspace.isLoading}>
-                    Update Description
+                    Update Name
                 </LoadingButton>
             </ModalFooter>
         </Modal>
diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx
@@ -15,6 +15,7 @@ import { WorkspaceStatusIndicator } from "./WorkspaceStatusIndicator";
 import { Workspace } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
 import { GitBranchIcon, PinIcon } from "lucide-react";
 import { useUpdateWorkspaceMutation } from "../data/workspaces/update-workspace-mutation";
+import { fromWorkspaceName } from "./RenameWorkspaceModal";
 
 type Props = {
     info: Workspace;
@@ -68,11 +69,13 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
                 <WorkspaceStatusIndicator status={workspace?.status} />
             </ItemFieldIcon>
             <div className="flex-grow flex flex-col h-full py-auto truncate">
-                <a href={startUrl}>
-                    <div className="font-medium text-gray-800 dark:text-gray-200 truncate hover:text-blue-600 dark:hover:text-blue-400">
-                        {info.id}
-                    </div>
-                </a>
+                <Tooltip content={info.id} allowWrap={true}>
+                    <a href={startUrl}>
+                        <div className="font-medium text-gray-800 dark:text-gray-200 truncate hover:text-blue-600 dark:hover:text-blue-400">
+                            {fromWorkspaceName(info) || info.id}
+                        </div>
+                    </a>
+                </Tooltip>
                 <Tooltip content={project ? "https://" + project : ""} allowWrap={true}>
                     <a href={project ? "https://" + project : undefined}>
                         <div className="text-sm overflow-ellipsis truncate text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
diff --git a/components/dashboard/src/workspaces/WorkspaceOverflowMenu.tsx b/components/dashboard/src/workspaces/WorkspaceOverflowMenu.tsx
@@ -105,11 +105,11 @@ export const WorkspaceEntryOverflowMenu: FunctionComponent<WorkspaceEntryOverflo
             title: "Open",
             href: startUrl.toString(),
         },
-        // {
-        //     title: "Rename",
-        //     href: "",
-        //     onClick: () => setRenameModalVisible(true),
-        // },
+        {
+            title: "Rename",
+            href: "",
+            onClick: () => setRenameModalVisible(true),
+        },
     ];
 
     if (state === WorkspacePhase_Phase.RUNNING) {
