diff --git a/components/dashboard/src/components/PendingChangesDropdown.tsx b/components/dashboard/src/components/PendingChangesDropdown.tsx new file mode 100644 index 00000000000000..655a99d7f58c70 --- /dev/null +++ b/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

No Changes

; + } + return +

+ {totalChanges} Change{totalChanges === 1 ? '' : 's'} + +

+
; +} \ No newline at end of file diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx index 89e4bbc065ad23..352ae2bb43aeca 100644 --- a/components/dashboard/src/start/StartWorkspace.tsx +++ b/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 -
+
 

{this.state.workspaceInstance.workspaceId}

@@ -296,40 +295,6 @@ export default class StartWorkspace extends React.Component 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

No Changes

; - } - return -

- {totalChanges} Change{totalChanges === 1 ? '' : 's'} - -

-
; -} - interface ImageBuildViewProps { workspaceId: string; onStartWithDefaultImage: () => void; diff --git a/components/dashboard/src/workspaces/WorkspaceEntry.tsx b/components/dashboard/src/workspaces/WorkspaceEntry.tsx index 3b5f1a42848cfe..69fe815a318a3b 100644 --- a/components/dashboard/src/workspaces/WorkspaceEntry.tsx +++ b/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) || ''; 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
@@ -109,16 +97,9 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
-
0 ? showChanges : undefined}> -
-
{currentBranch}
- { - numberOfChanges > 0 ? -
{changesLabel}
- : -
No Changes
- } -
+
+
{currentBranch}
+
@@ -131,9 +112,6 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
- setChangesModalVisible(false)}> - {getChangesPopup(pendingChanges)} - {isModalVisible && setModalVisible(false)}>

Delete Workspace

@@ -155,36 +133,6 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
; } -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
- {changes.map(c => { - return
-
{c.message}
- {c.items.map(i =>
{i}
)} -
; - })} -
-} - 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';