[dashboard] Allow workspace renaming

Fixes #3946

Author: Laurie T. Malau

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -7,13 +7,15 @@
 import { CommitContext, Workspace, WorkspaceInfo, WorkspaceInstance, WorkspaceInstanceConditions, WorkspaceInstancePhase } from '@gitpod/gitpod-protocol';
 import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ConfirmationModal from '../components/ConfirmationModal';
+import Modal from '../components/Modal';
 import { ContextMenuEntry } from '../components/ContextMenu';
 import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon } from '../components/ItemsList';
 import PendingChangesDropdown from '../components/PendingChangesDropdown';
 import Tooltip from '../components/Tooltip';
 import { WorkspaceModel } from './workspace-model';
+import { getGitpodService } from '../service/service';
 
 function getLabel(state: WorkspaceInstancePhase, conditions?: WorkspaceInstanceConditions) {
     if (conditions?.failed) {
@@ -30,10 +32,14 @@ interface Props {
 }
 
 export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
-    const [isModalVisible, setModalVisible] = useState(false);
+    const [isDeleteModalVisible, setDeleteModalVisible] = useState(false);
+    const [isRenameModalVisible, setRenameModalVisible] = useState(false);
+    const renameInputRef = useRef<HTMLInputElement>(null);
     const state: WorkspaceInstancePhase = desc.latestInstance?.status?.phase || 'stopped';
     const currentBranch = desc.latestInstance?.status.repo?.branch || Workspace.getBranchName(desc.workspace) || '<unknown>';
     const ws = desc.workspace;
+    const [workspaceDescription, setWsDescription] = useState(ws.description);
+
     const startUrl = new GitpodHostUrl(window.location.href).with({
         pathname: '/start/',
         hash: '#' + ws.id
@@ -45,7 +51,16 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
         {
             title: 'Open',
             href: startUrl.toString()
-        }];
+        },
+        {
+            title: 'Rename',
+            href: "",
+            onClick: () => {
+                setRenameModalVisible(true);
+            }
+        },
+
+    ];
     if (state === 'running') {
         menuEntries.push({
             title: 'Stop',
@@ -78,13 +93,30 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                 title: 'Delete',
                 customFontStyle: 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300',
                 onClick: () => {
-                    setModalVisible(true);
+                    setDeleteModalVisible(true);
                 }
             }
         );
     }
     const project = getProject(ws);
 
+    const updateWorkspaceDescription = async () => {
+        // Need this check because ref is called twice
+        // https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
+        if (!renameInputRef.current) {
+            return;
+        }
+        try {
+            setWsDescription(renameInputRef.current!.value);
+            await getGitpodService().server.setWorkspaceDescription(ws.id, renameInputRef.current!.value);
+        } catch (error) {
+            // A simple alert for now because there is an open issue to introduce Toast
+            console.error(error);
+            window.alert("Something went wrong.  Please try renaming again.");
+        }
+        setRenameModalVisible(false);
+    }
+
     return <Item className="whitespace-nowrap py-6 px-6">
         <ItemFieldIcon>
             <WorkspaceStatusIndicator instance={desc?.latestInstance} />
@@ -96,7 +128,7 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
             </Tooltip>
         </ItemField>
         <ItemField className="w-4/12 flex flex-col">
-            <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{ws.description}</div>
+            <div className="text-gray-500 dark:text-gray-400 overflow-ellipsis truncate">{workspaceDescription}</div>
             <a href={ws.contextURL}>
                 <div className="text-sm text-gray-400 dark:text-gray-500 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
             </a>
@@ -111,18 +143,32 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
             </Tooltip>
         </ItemField>
         <ItemFieldContextMenu menuEntries={menuEntries} />
-        {isModalVisible && <ConfirmationModal
+        {isDeleteModalVisible && <ConfirmationModal
             title="Delete Workspace"
             areYouSureText="Are you sure you want to delete this workspace?"
             children={{
                 name: ws.id,
                 description: ws.description,
             }}
             buttonText="Delete Workspace"
-            visible={isModalVisible}
-            onClose={() => setModalVisible(false)}
+            visible={isDeleteModalVisible}
+            onClose={() => setDeleteModalVisible(false)}
             onConfirm={() => model.deleteWorkspace(ws.id)}
         />}
+        <Modal visible={isRenameModalVisible} onClose={() => setRenameModalVisible(false)} onEnter={() => { updateWorkspaceDescription(); return true }}>
+            <h3 className="mb-4">Rename Workspace Description</h3>
+            <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 space-y-2">
+                <input className="w-full" type="text" defaultValue={workspaceDescription} ref={renameInputRef} />
+                <div className="mt-1">
+                    <p className="text-gray-500">You can use a friendlier name for this workspace description.</p>
+                    <p className="text-gray-500"> Workspace URLs and endpoints will remain the same.</p>
+                </div>
+            </div>
+            <div className="flex justify-end mt-6">
+                <button className="secondary" onClick={() => setRenameModalVisible(false)}>Cancel</button>
+                <button className="ml-2" type="submit" onClick={updateWorkspaceDescription}>Rename</button>
+            </div>
+        </Modal>
     </Item>;
 }
 
@@ -134,7 +180,7 @@ export function getProject(ws: Workspace) {
     }
 }
 
-export function WorkspaceStatusIndicator({instance}: {instance?: WorkspaceInstance}) {
+export function WorkspaceStatusIndicator({ instance }: { instance?: WorkspaceInstance }) {
     const state: WorkspaceInstancePhase = instance?.status?.phase || 'stopped';
     const conditions = instance?.status?.conditions;
     let stateClassName = 'rounded-full w-3 h-3 text-sm align-middle';