[dashboard] Standardize PendingChangesDropdown component in workspaces list (replaces Modal) and stopped page (unchanged)

components/dashboard/src/components/PendingChangesDropdown.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { WorkspaceInstance } from "@gitpod/gitpod-protocol";
+import ContextMenu, { ContextMenuEntry } from "./ContextMenu";
+import CaretDown from "../icons/CaretDown.svg";
+
+export default function PendingChangesDropdown(props: { workspaceInstance?: WorkspaceInstance }) {
+  const repo = props.workspaceInstance?.status?.repo;
+  const headingStyle = 'text-gray-500 text-left';
+  const itemStyle = 'text-gray-400 text-left -mt-5';
+  const menuEntries: ContextMenuEntry[] = [];
+  let totalChanges = 0;
+  if (repo) {
+    if ((repo.totalUntrackedFiles || 0) > 0) {
+      totalChanges += repo.totalUntrackedFiles || 0;
+      menuEntries.push({ title: 'Untracked Files', customFontStyle: headingStyle });
+      (repo.untrackedFiles || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
+    }
+    if ((repo.totalUncommitedFiles || 0) > 0) {
+      totalChanges += repo.totalUncommitedFiles || 0;
+      menuEntries.push({ title: 'Uncommitted Files', customFontStyle: headingStyle });
+      (repo.uncommitedFiles || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
+    }
+    if ((repo.totalUnpushedCommits || 0) > 0) {
+      totalChanges += repo.totalUnpushedCommits || 0;
+      menuEntries.push({ title: 'Unpushed Commits', customFontStyle: headingStyle });
+      (repo.unpushedCommits || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
+    }
+  }
+  if (totalChanges <= 0) {
+    return <p>No Changes</p>;
+  }
+  return <ContextMenu menuEntries={menuEntries} width="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
+    <p className="flex justify-center text-gitpod-red">
+      <span>{totalChanges} Change{totalChanges === 1 ? '' : 's'}</span>
+      <img className="m-2" src={CaretDown}/>
+    </p>
+  </ContextMenu>;
+}

components/dashboard/src/start/StartWorkspace.tsx

@@ -9,8 +9,7 @@ import React, { useEffect, Suspense } from "react";
 import { DisposableCollection, WorkspaceInstance, WorkspaceImageBuild, Workspace, WithPrebuild } from "@gitpod/gitpod-protocol";
 import { HeadlessLogEvent } from "@gitpod/gitpod-protocol/lib/headless-workspace-log";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
-import ContextMenu, { ContextMenuEntry } from "../components/ContextMenu";
-import CaretDown from "../icons/CaretDown.svg";
+import PendingChangesDropdown from "../components/PendingChangesDropdown";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { StartPage, StartPhase, StartWorkspaceError } from "./StartPage";
 
@@ -274,7 +273,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
           title = 'Timed Out';
         }
         statusMessage = <div>
-          <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100 dark:bg-gray-800">
+          <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-gray-100 dark:bg-gray-800">
             <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">{this.state.workspaceInstance.workspaceId}</p>
@@ -296,40 +295,6 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
   }
 }
 
-function PendingChangesDropdown(props: { workspaceInstance?: WorkspaceInstance }) {
-  const repo = props.workspaceInstance?.status?.repo;
-  const headingStyle = 'text-gray-500 text-left';
-  const itemStyle = 'text-gray-400 text-left -mt-5';
-  const menuEntries: ContextMenuEntry[] = [];
-  let totalChanges = 0;
-  if (repo) {
-    if ((repo.totalUntrackedFiles || 0) > 0) {
-      totalChanges += repo.totalUntrackedFiles || 0;
-      menuEntries.push({ title: 'Untracked Files', customFontStyle: headingStyle });
-      (repo.untrackedFiles || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
-    }
-    if ((repo.totalUncommitedFiles || 0) > 0) {
-      totalChanges += repo.totalUncommitedFiles || 0;
-      menuEntries.push({ title: 'Uncommitted Files', customFontStyle: headingStyle });
-      (repo.uncommitedFiles || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
-    }
-    if ((repo.totalUnpushedCommits || 0) > 0) {
-      totalChanges += repo.totalUnpushedCommits || 0;
-      menuEntries.push({ title: 'Unpushed Commits', customFontStyle: headingStyle });
-      (repo.unpushedCommits || []).forEach(item => menuEntries.push({ title: item, customFontStyle: itemStyle }));
-    }
-  }
-  if (totalChanges <= 0) {
-    return <p className="mt-2">No Changes</p>;
-  }
-  return <ContextMenu menuEntries={menuEntries} width="w-64 max-h-48 overflow-scroll mx-auto left-0 right-0">
-    <p className="mt-2 flex justify-center text-gitpod-red">
-      <span>{totalChanges} Change{totalChanges === 1 ? '' : 's'}</span>
-      <img className="m-2" src={CaretDown}/>
-    </p>
-  </ContextMenu>;
-}
-
 interface ImageBuildViewProps {
   workspaceId: string;
   onStartWithDefaultImage: () => void;

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -9,8 +9,9 @@ import { GitpodHostUrl } from '@gitpod/gitpod-protocol/lib/util/gitpod-host-url'
 import ContextMenu, { ContextMenuEntry } from '../components/ContextMenu';
 import moment from 'moment';
 import Modal from '../components/Modal';
-import { MouseEvent, useState } from 'react';
+import { useState } from 'react';
 import { WorkspaceModel } from './workspace-model';
+import PendingChangesDropdown from '../components/PendingChangesDropdown';
 import Tooltip from '../components/Tooltip';
 
 function getLabel(state: WorkspaceInstancePhase) {
@@ -26,16 +27,7 @@ interface Props {
 
 export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
     const [isModalVisible, setModalVisible] = useState(false);
-    const [isChangesModalVisible, setChangesModalVisible] = useState(false);
     const state: WorkspaceInstancePhase = desc.latestInstance?.status?.phase || 'stopped';
-    const pendingChanges = getPendingChanges(desc.latestInstance);
-    const numberOfChanges = pendingChanges.reduceRight((i, c) => i + c.items.length, 0)
-    let changesLabel = 'No Changes';
-    if (numberOfChanges === 1) {
-        changesLabel = '1 Change';
-    } else if (numberOfChanges > 1) {
-        changesLabel = numberOfChanges + ' Changes';
-    }
     const currentBranch = desc.latestInstance?.status.repo?.branch || Workspace.getBranchName(desc.workspace) || '<unknown>';
     const ws = desc.workspace;
     const startUrl = new GitpodHostUrl(window.location.href).with({
@@ -88,10 +80,6 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
         );
     }
     const project = getProject(ws);
-    const showChanges = (event: MouseEvent) => {
-        event.preventDefault();
-        setChangesModalVisible(true);
-    }
     return <div>
         <div className="rounded-xl whitespace-nowrap flex space-x-2 py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
             <div className="pr-3 self-center">
@@ -109,16 +97,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                     </a>
                 </div>
             </div>
-            <div className="flex w-2/12 truncate" onClick={numberOfChanges > 0 ? showChanges : undefined}>
-                <div className="flex flex-col">
-                    <div className="text-gray-500 truncate">{currentBranch}</div>
-                    {
-                        numberOfChanges > 0 ?
-                            <div className={"text-sm text-red-600 truncate cursor-pointer bg-red-50 group-hover:bg-red-100 hover:text-red-800 px-1.5 py-0.5 relative rounded-md -top-0.5"} onClick={showChanges}>{changesLabel}</div>
-                            :
-                            <div className="text-sm text-gray-400 truncate ">No Changes</div>
-                    }
-                </div>
+            <div className="flex flex-col items-start w-2/12">
+                <div className="text-gray-500 truncate">{currentBranch}</div>
+                <PendingChangesDropdown workspaceInstance={desc.latestInstance} />
             </div>
             <div className="flex w-2/12 self-center">
                 <Tooltip content={`Created ${moment(desc.workspace.creationTime).fromNow()}`}>
@@ -131,9 +112,6 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
                 </ContextMenu>
             </div>
         </div>
-        <Modal visible={isChangesModalVisible} onClose={() => setChangesModalVisible(false)}>
-            {getChangesPopup(pendingChanges)}
-        </Modal>
         {isModalVisible && <Modal visible={isModalVisible} onClose={() => setModalVisible(false)}>
             <div>
                 <h3 className="pb-2">Delete Workspace</h3>
@@ -155,36 +133,6 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
     </div>;
 }
 
-export interface PendingChanges {
-    message: string, items: string[]
-}
-
-export function getPendingChanges(wsi?: WorkspaceInstance): PendingChanges[] {
-    const pendingChanges: { message: string, items: string[] }[] = [];
-    const repo = wsi?.status.repo;
-    if (repo) {
-        if (repo.totalUncommitedFiles || 0 > 0) {
-            pendingChanges.push({
-                message: repo.totalUncommitedFiles === 1 ? 'an uncommited file' : `${repo.totalUncommitedFiles} uncommited files`,
-                items: repo.uncommitedFiles || []
-            });
-        }
-        if (repo.totalUntrackedFiles || 0 > 0) {
-            pendingChanges.push({
-                message: repo.totalUntrackedFiles === 1 ? 'an untracked file' : `${repo.totalUntrackedFiles} untracked files`,
-                items: repo.untrackedFiles || []
-            });
-        }
-        if (repo.totalUnpushedCommits || 0 > 0) {
-            pendingChanges.push({
-                message: repo.totalUnpushedCommits === 1 ? 'an unpushed commit' : `${repo.totalUnpushedCommits} unpushed commits`,
-                items: repo.unpushedCommits || []
-            });
-        }
-    }
-    return pendingChanges;
-}
-
 export function getProject(ws: Workspace) {
     if (CommitContext.is(ws.context)) {
         return `${ws.context.repository.host}/${ws.context.repository.owner}/${ws.context.repository.name}`;
@@ -193,17 +141,6 @@ export function getProject(ws: Workspace) {
     }
 }
 
-export function getChangesPopup(changes: PendingChanges[]) {
-    return <div className="flex flex-col space-y-4 w-96">
-        {changes.map(c => {
-            return <div className="">
-                <div className="text-gray-500">{c.message}</div>
-                {c.items.map(i => <div className="text-gray-400 text-xs">{i}</div>)}
-            </div>;
-        })}
-    </div>
-}
-
 export function WorkspaceStatusIndicator({instance}: {instance?: WorkspaceInstance}) {
     const state: WorkspaceInstancePhase = instance?.status?.phase || 'stopped';
     let stateClassName = 'rounded-full w-3 h-3 text-sm align-middle';