+
([]);
+
+ useEffect(() => {
+ let localState = getLocalStorageObject(KEY_APP_NOTIFICATIONS);
+ if (Array.isArray(localState)) {
+ setNotifications(localState);
+ return;
+ }
+ (async () => {
+ const serverState = await getGitpodService().server.getNotifications();
+ setNotifications(serverState);
+ setLocalStorageObject(KEY_APP_NOTIFICATIONS, serverState);
+ })();
+ }, []);
+
+ const topNotification = notifications[0];
+ if (topNotification === undefined) {
+ return null;
+ }
+
+ const dismissNotification = () => {
+ removeLocalStorageObject(KEY_APP_NOTIFICATIONS);
+ setNotifications([]);
+ };
+
+ return (
+ (false);
@@ -66,6 +58,7 @@ export default function Menu() {
"members",
"settings",
"billing",
+ "usage",
// admin sub-pages
"users",
"workspaces",
@@ -107,7 +100,9 @@ export default function Menu() {
}
// Hide most of the top menu when in a full-page form.
- const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
+ const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
+ const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
+ const isAdminUI = inResource(window.location.pathname, ["admin"]);
const [teamMembers, setTeamMembers] = useState>({});
useEffect(() => {
@@ -161,26 +156,6 @@ export default function Menu() {
]).then((setters) => setters.forEach((s) => s()));
}, []);
- useEffect(() => {
- if (!user) {
- return;
- }
- (async () => {
- const isUsageBasedBillingEnabled = await getExperimentsClient().getValueAsync(
- "isUsageBasedBillingEnabled",
- false,
- {
- userId: user?.id,
- projectId: project?.id,
- teamId: team?.id,
- teamName: team?.name,
- teams,
- },
- );
- setShowUsageBasedUI(isUsageBasedBillingEnabled);
- })();
- }, [user, teams, team, project]);
-
const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
const leftMenu: Entry[] = (() => {
// Project menu
@@ -216,6 +191,12 @@ export default function Menu() {
link: `/t/${team.slug}/members`,
},
];
+ if (showUsageBasedPricingUI) {
+ teamSettingsList.push({
+ title: "Usage",
+ link: `/t/${team.slug}/usage`,
+ });
+ }
if (currentUserInTeam?.role === "owner") {
teamSettingsList.push({
title: "Settings",
@@ -228,11 +209,6 @@ export default function Menu() {
}
// User menu
return [
- {
- title: "Workspaces",
- link: "/workspaces",
- alternatives: ["/"],
- },
{
title: "Projects",
link: "/projects",
@@ -240,7 +216,7 @@ export default function Menu() {
{
title: "Settings",
link: "/settings",
- alternatives: getSettingsMenu({ showPaymentUI, showUsageBasedUI }).flatMap((e) => e.link),
+ alternatives: getSettingsMenu({ showPaymentUI, showUsageBasedPricingUI }).flatMap((e) => e.link),
},
];
})();
@@ -250,13 +226,14 @@ export default function Menu() {
{
title: "Admin",
link: "/admin",
- alternatives: adminMenu.flatMap((e) => e.link),
+ alternatives: getAdminMenu().flatMap((e) => e.link),
},
]
: []),
{
- title: "Docs",
- link: "https://www.gitpod.io/docs/",
+ title: "Workspaces",
+ link: "/workspaces",
+ alternatives: ["/"],
},
];
@@ -268,25 +245,39 @@ export default function Menu() {
setFeedbackFormVisible(false);
};
const renderTeamMenu = () => {
+ const classes =
+ "flex h-full text-base py-0 " +
+ (!projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug
+ ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50 border-gray-700"
+ : "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700");
return (
-
+ dismissNotification()}
+ showIcon={true}
+ className="flex rounded mb-2 w-full"
+ >
+ {topNotification}
+
+
+ );
+}
+
+function getLocalStorageObject(key: string): any {
+ try {
+ const string = window.localStorage.getItem(key);
+ if (!string) {
+ return;
+ }
+ return JSON.parse(string);
+ } catch (error) {
+ return;
+ }
+}
+
+function removeLocalStorageObject(key: string): void {
+ window.localStorage.removeItem(key);
+}
+
+function setLocalStorageObject(key: string, object: Object): void {
+ try {
+ window.localStorage.setItem(key, JSON.stringify(object));
+ } catch (error) {
+ console.error("Setting localstorage item failed", key, object, error);
+ }
+}
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 2d7207fb3529ab..bd3ba86ae2a1e7 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -11,13 +11,11 @@ import { useLocation, useRouteMatch } from "react-router";
import { Location } from "history";
import { countries } from "countries-list";
import gitpodIcon from "./icons/gitpod.svg";
-import CaretDown from "./icons/CaretDown.svg";
-import CaretUpDown from "./icons/CaretUpDown.svg";
import { getGitpodService, gitpodHostUrl } from "./service/service";
import { UserContext } from "./user-context";
import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
import getSettingsMenu from "./settings/settings-menu";
-import { adminMenu } from "./admin/admin-menu";
+import { getAdminMenu } from "./admin/admin-menu";
import ContextMenu from "./components/ContextMenu";
import Separator from "./components/Separator";
import PillMenuItem from "./components/PillMenuItem";
@@ -27,8 +25,8 @@ import { getProjectSettingsMenu } from "./projects/ProjectSettings";
import { ProjectContext } from "./projects/project-context";
import { PaymentContext } from "./payment-context";
import FeedbackFormModal from "./feedback-form/FeedbackModal";
-import { isGitpodIo } from "./utils";
-import { getExperimentsClient } from "./experiments/client";
+import { inResource, isGitpodIo } from "./utils";
+import { FeatureFlagContext } from "./contexts/FeatureFlagContext";
interface Entry {
title: string;
@@ -41,15 +39,9 @@ export default function Menu() {
const { teams } = useContext(TeamsContext);
const location = useLocation();
const team = getCurrentTeam(location, teams);
- const {
- showPaymentUI,
- setShowPaymentUI,
- showUsageBasedUI,
- setShowUsageBasedUI,
- setCurrency,
- setIsStudent,
- setIsChargebeeCustomer,
- } = useContext(PaymentContext);
+ const { showPaymentUI, setShowPaymentUI, setCurrency, setIsStudent, setIsChargebeeCustomer } =
+ useContext(PaymentContext);
+ const { showUsageBasedPricingUI } = useContext(FeatureFlagContext);
const { project, setProject } = useContext(ProjectContext);
const [isFeedbackFormVisible, setFeedbackFormVisible] = useState
+
{projectSlug && (
-
+ Search workspaces using workspace ID.
+
{props.warningText} );
+ children.unshift({props.warningText} );
}
const isEntity = (x: any): x is Entity => typeof x === "object" && "name" in x;
if (props.children) {
if (isEntity(props.children)) {
- child.push(
-
-
-
- {team?.name || userFullName}
-
-
-
+
+
+ {team?.name || userFullName}
+
+
+ )}
+ {!projectSlug && (
+
+
+ {team?.name || userFullName}
+
+
)}
-
+
+
-
diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx
index 5fb39365ef271e..7fe4dd3525d4a7 100644
--- a/components/dashboard/src/admin/ProjectsSearch.tsx
+++ b/components/dashboard/src/admin/ProjectsSearch.tsx
@@ -9,17 +9,16 @@ import { useLocation } from "react-router";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
-import { adminMenu } from "./admin-menu";
import ProjectDetail from "./ProjectDetail";
import { getGitpodService } from "../service/service";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
export default function ProjectsSearchPage() {
return (
-
+
+
);
}
diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx
index d901fd2a83b1c3..b77134dbb36c82 100644
--- a/components/dashboard/src/admin/Settings.tsx
+++ b/components/dashboard/src/admin/Settings.tsx
@@ -8,12 +8,11 @@ import { useContext } from "react";
import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol";
import { AdminContext } from "../admin-context";
import CheckBox from "../components/CheckBox";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService } from "../service/service";
-import { adminMenu } from "./admin-menu";
import { useEffect, useState } from "react";
import InfoBox from "../components/InfoBox";
import { isGitpodIo } from "../utils";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
export default function Settings() {
const { adminSettings, setAdminSettings } = useContext(AdminContext);
@@ -39,34 +38,53 @@ export default function Settings() {
return (
+
+
);
}
diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx
index f7e9e750e7e7e9..d5df4f01206cc1 100644
--- a/components/dashboard/src/admin/UserDetail.tsx
+++ b/components/dashboard/src/admin/UserDetail.tsx
@@ -18,11 +18,10 @@ import moment from "moment";
import { useEffect, useRef, useState } from "react";
import CheckBox from "../components/CheckBox";
import Modal from "../components/Modal";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService } from "../service/service";
-import { adminMenu } from "./admin-menu";
import { WorkspaceSearch } from "./WorkspacesSearch";
import Property from "./Property";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
export default function UserDetail(p: { user: User }) {
const [activity, setActivity] = useState(false);
@@ -117,7 +116,7 @@ export default function UserDetail(p: { user: User }) {
return (
<>
-
+
setEditFeatureFlags(false)}
diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
index 88b0c98f525cf3..0187c0a8b9f5d7 100644
--- a/components/dashboard/src/admin/UserSearch.tsx
+++ b/components/dashboard/src/admin/UserSearch.tsx
@@ -9,9 +9,8 @@ import moment from "moment";
import { useEffect, useState } from "react";
import { useLocation } from "react-router";
import { Link } from "react-router-dom";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService } from "../service/service";
-import { adminMenu } from "./admin-menu";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
import UserDetail from "./UserDetail";
export default function UserSearch() {
@@ -58,7 +57,7 @@ export default function UserSearch() {
}
};
return (
-
+
+
diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx
index a7d5a456c628b4..6482668c03f317 100644
--- a/components/dashboard/src/admin/WorkspacesSearch.tsx
+++ b/components/dashboard/src/admin/WorkspacesSearch.tsx
@@ -19,12 +19,11 @@ import moment from "moment";
import { useEffect, useState } from "react";
import { useLocation } from "react-router";
import { Link } from "react-router-dom";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService } from "../service/service";
import { getProject, WorkspaceStatusIndicator } from "../workspaces/WorkspaceEntry";
-import { adminMenu } from "./admin-menu";
import WorkspaceDetail from "./WorkspaceDetail";
-import info from "../images/info.svg";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
+import Alert from "../components/Alert";
interface Props {
user?: User;
@@ -32,9 +31,9 @@ interface Props {
export default function WorkspaceSearchPage() {
return (
-
+
+
);
}
@@ -139,14 +138,9 @@ export function WorkspaceSearch(props: Props) {
-
{userFullName}
@@ -295,7 +286,7 @@ export default function Menu() {
),
active: !team,
separator: true,
- link: "/",
+ link: "/projects",
},
...(teams || [])
.map((t) => ({
@@ -332,9 +323,9 @@ export default function Menu() {
>
@@ -343,35 +334,50 @@ export default function Menu() {
},
]}
>
-
- {!projectSlug && (
-
- {team?.name || userFullName}
-
- )}
- 
+
- {projectSlug && (
-
+
-
-
- {project?.name}
-
-
-
+ {projectSlug && !prebuildId && !isAdminUI && (
+
+
+ {project?.name}
+
+
)}
{prebuildId && (
-
- 
- {prebuildId}
+
+
+ {project?.name}
+
+
+ )}
+ {prebuildId && (
+
@@ -380,11 +386,8 @@ export default function Menu() {
return (
<>
-
+
)}
+
+
+
+
+ {prebuildId.substring(0, 8).trimEnd()}
+
+
+
+
@@ -393,7 +396,7 @@ export default function Menu() {
{isFeedbackFormVisible &&
-
+
- The following usage data is sent to provide insights on how you use your Gitpod instance, so
- we can provide a better overall experience.{" "}
-
- Read our Privacy Policy
-
+ Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
+ below.
}
checked={adminSettings?.sendTelemetry ?? false}
onChange={(evt) =>
actuallySetTelemetryPrefs({
+ ...adminSettings,
sendTelemetry: evt.target.checked,
- })
+ } as InstallationAdminSettings)
}
/>
+
+ Include an optional customer ID in usage telemetry to provide individualized support.
+
+ }
+ checked={adminSettings?.sendCustomerID ?? false}
+ onChange={(evt) =>
+ actuallySetTelemetryPrefs({
+ ...adminSettings,
+ sendCustomerID: evt.target.checked,
+ } as InstallationAdminSettings)
+ }
+ />
+
-
+
);
}
diff --git a/components/dashboard/src/admin/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx
index c54710085ca937..354921ea074af3 100644
--- a/components/dashboard/src/admin/TeamsSearch.tsx
+++ b/components/dashboard/src/admin/TeamsSearch.tsx
@@ -8,19 +8,18 @@ import moment from "moment";
import { useState, useEffect } from "react";
import TeamDetail from "./TeamDetail";
-import { adminMenu } from "./admin-menu";
import { useLocation } from "react-router";
import { Link } from "react-router-dom";
import { getGitpodService } from "../service/service";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol";
import Label from "./Label";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
export default function TeamsSearchPage() {
return (
- Usage Statistics
++ We collect usage telemetry to gain insights on how you use your Gitpod instance, so we can provide a + better overall experience. +
++ + Read our Privacy Policy + +
Telemetry preview
{JSON.stringify(telemetryData, null, 2)}
@@ -190,7 +189,9 @@ export default function UserDetail(p: { user: User }) {
>
{accountStatement?.subscriptions
? accountStatement.subscriptions
- .filter((s) => Subscription.isActive(s, new Date().toISOString()))
+ .filter(
+ (s) => !s.deleted && Subscription.isActive(s, new Date().toISOString()),
+ )
.map((s) => Plans.getById(s.planId)?.name)
.join(", ")
: "---"}
@@ -244,7 +245,7 @@ export default function UserDetail(p: { user: User }) {
@@ -104,7 +103,7 @@ export default function UserSearch() {
-
+
);
}
diff --git a/components/dashboard/src/admin/WorkspaceDetail.tsx b/components/dashboard/src/admin/WorkspaceDetail.tsx
index 281de115fb0b18..2c6b87dabd9b79 100644
--- a/components/dashboard/src/admin/WorkspaceDetail.tsx
+++ b/components/dashboard/src/admin/WorkspaceDetail.tsx
@@ -144,6 +144,11 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
{workspace.stoppedTime ? moment(workspace.stoppedTime).fromNow() : "---"}
+
+
+
{workspace.status.nodeName ?? "not assigned"}
+ {[0, 1, 2].map(adminLink)}
{[3, 4, 5].map(adminLink)}
- 
- Please enter complete IDs - this search does not perform partial-matching.
-
+
diff --git a/components/dashboard/src/admin/admin-menu.ts b/components/dashboard/src/admin/admin-menu.ts
index a62001a9fafb60..7c1a1210b2c907 100644
--- a/components/dashboard/src/admin/admin-menu.ts
+++ b/components/dashboard/src/admin/admin-menu.ts
@@ -4,29 +4,35 @@
* See License-AGPL.txt in the project root for license information.
*/
-export const adminMenu = [
- {
- title: "Users",
- link: ["/admin/users", "/admin"],
- },
- {
- title: "Workspaces",
- link: ["/admin/workspaces"],
- },
- {
- title: "Projects",
- link: ["/admin/projects"],
- },
- {
- title: "Teams",
- link: ["/admin/teams"],
- },
- {
- title: "License",
- link: ["/admin/license"],
- },
- {
- title: "Settings",
- link: ["/admin/settings"],
- },
-];
+export function getAdminMenu() {
+ return [
+ {
+ title: "Users",
+ link: ["/admin/users", "/admin"],
+ },
+ {
+ title: "Workspaces",
+ link: ["/admin/workspaces"],
+ },
+ {
+ title: "Projects",
+ link: ["/admin/projects"],
+ },
+ {
+ title: "Teams",
+ link: ["/admin/teams"],
+ },
+ {
+ title: "Blocked Repositories",
+ link: ["/admin/blocked-repositories"],
+ },
+ {
+ title: "License",
+ link: ["/admin/license"],
+ },
+ {
+ title: "Settings",
+ link: ["/admin/settings"],
+ },
+ ];
+}
diff --git a/components/dashboard/src/components/Alert.tsx b/components/dashboard/src/components/Alert.tsx
index e93dda95ae0594..a74db4e67c4e21 100644
--- a/components/dashboard/src/components/Alert.tsx
+++ b/components/dashboard/src/components/Alert.tsx
@@ -26,6 +26,7 @@ export interface AlertProps {
// Without background color, default false
light?: boolean;
closable?: boolean;
+ onClose?: () => void;
showIcon?: boolean;
icon?: React.ReactNode;
children?: React.ReactNode;
@@ -79,7 +80,17 @@ export default function Alert(props: AlertProps) {
{showIcon && {props.icon ?? info.icon}}
{props.children}
{props.closable && (
- setVisible(false)} className="mt-1 ml-4 w-3 h-3 cursor-pointer">
+
+ {
+ setVisible(false);
+ if (props.onClose) {
+ props.onClose();
+ }
+ }}
+ className="w-3 h-4 cursor-pointer"
+ >
+
)}
);
diff --git a/components/dashboard/src/components/Arrow.tsx b/components/dashboard/src/components/Arrow.tsx
index ff1132afc53798..4fcb79fb1ed11c 100644
--- a/components/dashboard/src/components/Arrow.tsx
+++ b/components/dashboard/src/components/Arrow.tsx
@@ -4,13 +4,23 @@
* See License-AGPL.txt in the project root for license information.
*/
-function Arrow(props: { up: boolean; customBorderClasses?: string }) {
+function Arrow(props: { direction: string; customBorderClasses?: string }) {
+ const { direction, customBorderClasses } = props;
+
+ // Using any because of known TS bug with bracket notation:
+ // https://github.com/microsoft/TypeScript/issues/10530
+ const directionMap: any = {
+ up: "-135deg",
+ down: "45deg",
+ left: "135deg",
+ right: "315deg",
+ };
return (
);
diff --git a/components/dashboard/src/components/ConfirmationModal.tsx b/components/dashboard/src/components/ConfirmationModal.tsx
index ae5d005891a41a..c9ba391cfd5129 100644
--- a/components/dashboard/src/components/ConfirmationModal.tsx
+++ b/components/dashboard/src/components/ConfirmationModal.tsx
@@ -19,17 +19,21 @@ export default function ConfirmationModal(props: {
onClose: () => void;
onConfirm: () => void;
}) {
- const child: React.ReactChild[] = [{props.areYouSureText}
]; + const children: React.ReactChild[] = [ ++ {props.areYouSureText} +
, + ]; if (props.warningText) { - child.unshift(
+ children.push(
+
,
);
} else if (Array.isArray(props.children)) {
- child.push(...props.children);
+ children.push(...props.children);
} else {
- child.push(props.children);
+ children.push(props.children);
}
}
const cancelButtonRef = useRef(null);
@@ -76,7 +80,7 @@ export default function ConfirmationModal(props: {
return true;
}}
>
- {child}
+ {children}
);
}
diff --git a/components/dashboard/src/components/DropDown.tsx b/components/dashboard/src/components/DropDown.tsx
index 7cb488d83a9458..32a7204d36290d 100644
--- a/components/dashboard/src/components/DropDown.tsx
+++ b/components/dashboard/src/components/DropDown.tsx
@@ -49,7 +49,7 @@ function DropDown(props: DropDownProps) {
>
{props.prefix}
{current}
- ) => {
+ setValue({ ...value, ...pev });
+ setErrorMsg("");
+ };
+
+ useEffect(() => {
+ setValue({ ...props.value });
+ setErrorMsg("");
+ }, [props.value]);
+
+ const save = async () => {
+ const tmp = SSHPublicKeyValue.validate(value);
+ if (tmp) {
+ setErrorMsg(tmp);
+ return false;
+ }
+ try {
+ await getGitpodService().server.addSSHPublicKey(value);
+ } catch (e) {
+ setErrorMsg(e.message.replace("Request addSSHPublicKey failed with message: ", ""));
+ return false;
+ }
+ props.onClose();
+ props.onSave();
+ return true;
+ };
+
+ return (
+
+ Add SSH Key
+
+ }
+ visible={true}
+ onClose={props.onClose}
+ onEnter={save}
+ >
+ <>
+ {errorMsg.length > 0 && (
+
+ {errorMsg}
+
+ )}
+
+
+ SSH key are used to connect securely to workspaces.{" "}
+
+ Learn how to create an SSH Key
+
+
+
{props.children.name}
{props.children.description && ({props.children.description}
@@ -37,9 +41,9 @@ export default function ConfirmationModal(props: {{props.children}
;
}
-export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean }) {
+export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean; solid?: boolean }) {
+ // cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
+ const solidClassName = props.solid ? "bg-gray-50 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
- const notHeaderClassName = "rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light";
+ const notHeaderClassName = "rounded-xl focus:bg-gitpod-kumquat-light " + solidClassName;
return (
{props.children}
;
}
-export function ItemFieldContextMenu(props: { menuEntries: ContextMenuEntry[]; className?: string }) {
+export function ItemFieldContextMenu(props: {
+ menuEntries: ContextMenuEntry[];
+ className?: string;
+ position?: "start" | "center" | "end";
+}) {
+ const cls = "self-" + (props.position ?? "center");
return (
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index 70484bfcb2d0d0..df1a4e65d06072 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -13,13 +13,14 @@ export default function Modal(props: {
// specify a key if having the same title and window.location
specify?: string;
title?: string;
+ hideDivider?: boolean;
buttons?: React.ReactChild[] | React.ReactChild;
children: React.ReactChild[] | React.ReactChild;
visible: boolean;
closeable?: boolean;
className?: string;
onClose: () => void;
- onEnter?: () => boolean;
+ onEnter?: () => boolean | Promise;
}) {
const closeModal = (manner: CloseModalManner) => {
props.onClose();
@@ -36,7 +37,10 @@ export default function Modal(props: {
.then()
.catch(console.error);
};
- const handler = (evt: KeyboardEvent) => {
+ const handler = async (evt: KeyboardEvent) => {
+ if (!props.visible) {
+ return;
+ }
if (evt.defaultPrevented) {
return;
}
@@ -45,7 +49,7 @@ export default function Modal(props: {
}
if (evt.key === "Enter") {
if (props.onEnter) {
- if (props.onEnter()) {
+ if (await props.onEnter()) {
closeModal("enter");
}
} else {
@@ -91,7 +95,12 @@ export default function Modal(props: {
{props.title ? (
<>
+
+
+
+ }
+ >
+ {props.title}
-
+
-
-
+
Prebuild
@@ -216,7 +216,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
>
-
@@ -243,7 +243,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
);
diff --git a/components/dashboard/src/projects/Project.tsx b/components/dashboard/src/projects/Project.tsx
index 1953451d3de03c..85ce2bdf7e560f 100644
--- a/components/dashboard/src/projects/Project.tsx
+++ b/components/dashboard/src/projects/Project.tsx
@@ -34,7 +34,7 @@ export default function () {
const [isLoading, setIsLoading] = useState(false);
const [isLoadingBranches, setIsLoadingBranches] = useState(false);
const [branches, setBranches] = useState([]);
- const [lastPrebuilds, setLastPrebuilds] = useState>(new Map());
+ const [prebuilds, setPrebuilds] = useState>(new Map());
const [prebuildLoaders] = useState>(new Set());
const [searchFilter, setSearchFilter] = useState();
@@ -122,18 +122,18 @@ export default function () {
});
};
- const lastPrebuild = (branch: Project.BranchDetails) => {
- const lastPrebuild = lastPrebuilds.get(branch.name);
- if (!lastPrebuild) {
+ const matchingPrebuild = (branch: Project.BranchDetails) => {
+ const matchingPrebuild = prebuilds.get(branch.name);
+ if (!matchingPrebuild) {
// do not await here.
loadPrebuild(branch);
}
- return lastPrebuild;
+ return matchingPrebuild;
};
const loadPrebuild = async (branch: Project.BranchDetails) => {
- if (prebuildLoaders.has(branch.name) || lastPrebuilds.has(branch.name)) {
- // `lastPrebuilds.has(branch.name)` will be true even if loading finished with no prebuild found.
+ if (prebuildLoaders.has(branch.name) || prebuilds.has(branch.name)) {
+ // `prebuilds.has(branch.name)` will be true even if loading finished with no prebuild found.
// TODO(at): this need to be revised once prebuild events are integrated
return;
}
@@ -141,12 +141,12 @@ export default function () {
return;
}
prebuildLoaders.add(branch.name);
- const lastPrebuild = await getGitpodService().server.findPrebuilds({
+ const branchPrebuilds = await getGitpodService().server.findPrebuilds({
projectId: project.id,
branch: branch.name,
latest: true,
});
- setLastPrebuilds((prev) => new Map(prev).set(branch.name, lastPrebuild[0]));
+ setPrebuilds((prev) => new Map(prev).set(branch.name, branchPrebuilds[0]));
prebuildLoaders.delete(branch.name);
};
@@ -269,8 +269,10 @@ export default function () {
.filter(filter)
.slice(0, 10)
.map((branch, index) => {
- const prebuild = lastPrebuild(branch); // this might lazily trigger fetching of prebuild details
-
+ let prebuild = matchingPrebuild(branch); // this might lazily trigger fetching of prebuild details
+ if (prebuild && prebuild.info.changeHash !== branch.changeHash) {
+ prebuild = undefined;
+ }
const avatar = branch.changeAuthorAvatar && (
![]()
cancelPrebuild(prebuild.info.id),
+ onClick: () =>
+ prebuild && cancelPrebuild(prebuild.info.id),
},
]
: []
diff --git a/components/dashboard/src/projects/ProjectSettings.tsx b/components/dashboard/src/projects/ProjectSettings.tsx
index 3a6362ee15056b..955b634cedda2b 100644
--- a/components/dashboard/src/projects/ProjectSettings.tsx
+++ b/components/dashboard/src/projects/ProjectSettings.tsx
@@ -4,15 +4,16 @@
* See License-AGPL.txt in the project root for license information.
*/
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
import { useLocation } from "react-router";
-import { Project, Team } from "@gitpod/gitpod-protocol";
+import { Project, ProjectSettings, Team } from "@gitpod/gitpod-protocol";
import CheckBox from "../components/CheckBox";
import { getGitpodService } from "../service/service";
import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
import { PageWithSubMenu } from "../components/PageWithSubMenu";
import PillLabel from "../components/PillLabel";
import { ProjectContext } from "./project-context";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
export function getProjectSettingsMenu(project?: Project, team?: Team) {
const teamOrUserSlug = !!team ? "t/" + team.slug : "projects";
@@ -49,40 +50,22 @@ export function ProjectSettingsPage(props: { project?: Project; children?: React
}
export default function () {
- const { project } = useContext(ProjectContext);
+ const { showPersistentVolumeClaimUI } = useContext(FeatureFlagContext);
+ const { project, setProject } = useContext(ProjectContext);
- const [isLoading, setIsLoading] = useState(true);
- const [isIncrementalPrebuildsEnabled, setIsIncrementalPrebuildsEnabled] = useState(false);
+ if (!project) return null;
- useEffect(() => {
- if (!project) {
- return;
- }
- setIsLoading(false);
- setIsIncrementalPrebuildsEnabled(!!project.settings?.useIncrementalPrebuilds);
- }, [project]);
+ const updateProjectSettings = (settings: ProjectSettings) => {
+ if (!project) return;
- const toggleIncrementalPrebuilds = async () => {
- if (!project) {
- return;
- }
- setIsLoading(true);
- try {
- await getGitpodService().server.updateProjectPartial({
- id: project.id,
- settings: {
- useIncrementalPrebuilds: !isIncrementalPrebuildsEnabled,
- },
- });
- setIsIncrementalPrebuildsEnabled(!isIncrementalPrebuildsEnabled);
- } finally {
- setIsLoading(false);
- }
+ const newSettings = { ...project.settings, ...settings };
+ getGitpodService().server.updateProjectPartial({ id: project.id, settings: newSettings });
+ setProject({ ...project, settings: newSettings });
};
return (
-
@@ -102,10 +85,34 @@ export default function () {
}
- checked={isIncrementalPrebuildsEnabled}
- disabled={isLoading}
- onChange={toggleIncrementalPrebuilds}
+ checked={project.settings?.useIncrementalPrebuilds ?? false}
+ onChange={({ target }) => updateProjectSettings({ useIncrementalPrebuilds: target.checked })}
/>
+ Cancel Prebuilds on Outdated Commits }
+ desc={Cancel pending or running prebuilds on the same branch when new commits are pushed.}
+ checked={!project.settings?.keepOutdatedPrebuildsRunning}
+ onChange={({ target }) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !target.checked })}
+ />
+ {showPersistentVolumeClaimUI && (
+ <>
+
+
+ Enable Persistent Volume Claim{" "}
+
+ Experimental
+
+
+ }
+ desc={Experimental feature that is still under development.}
+ checked={project.settings?.usePersistentVolumeClaim ?? false}
+ onChange={({ target }) => updateProjectSettings({ usePersistentVolumeClaim: target.checked })}
+ />
+
+ )}
);
}
diff --git a/components/dashboard/src/service/service-mock.ts b/components/dashboard/src/service/service-mock.ts
index d416d04d04409e..22d395d16c5705 100644
--- a/components/dashboard/src/service/service-mock.ts
+++ b/components/dashboard/src/service/service-mock.ts
@@ -210,6 +210,61 @@ const gitpodServiceMock = createServiceMock({
onDidCloseConnection: Event.None,
trackEvent: async (event) => {},
trackLocation: async (event) => {},
+ getSupportedWorkspaceClasses: async () => {
+ return [
+ {
+ id: "g1-standard",
+ category: "GENERAL PURPOSE",
+ displayName: "Standard",
+ description: "Up to 4 vCPU, 8GB memory, 30GB disk",
+ powerups: 1,
+ isDefault: true,
+ },
+ {
+ id: "g1-large",
+ category: "GENERAL PURPOSE",
+ displayName: "Large",
+ description: "Up to 8 vCPU, 16GB memory, 50GB disk",
+ powerups: 2,
+ isDefault: false,
+ },
+ ];
+ },
+ getShowPaymentUI: async () => {
+ return false;
+ },
+ getClientRegion: async () => {
+ return "europe-west-1";
+ },
+ isStudent: async () => {
+ return false;
+ },
+ isChargebeeCustomer: async () => {
+ return false;
+ },
+ getSuggestedContextURLs: async () => {
+ return [];
+ },
+ getIDEOptions: async () => {
+ return {
+ defaultDesktopIde: "code-desktop",
+ defaultIde: "code",
+ options: {
+ code: {
+ title: "VS Code",
+ type: "browser",
+ logo: "",
+ image: "eu.gcr.io/gitpod-core-dev/build/ide/code:commit-050c611f28564c6c7b1e58db470f07997dfb4730",
+ },
+ "code-desktop": {
+ title: "VS Code",
+ type: "desktop",
+ logo: "",
+ image: "eu.gcr.io/gitpod-core-dev/build/ide/code-desktop:commit-9b29fc94cc1f0c776ef74f60dc3a7ce68d41bdbe",
+ },
+ },
+ };
+ },
});
export { gitpodServiceMock };
diff --git a/components/dashboard/src/settings/Account.tsx b/components/dashboard/src/settings/Account.tsx
index 356c3df76114e6..d5bad975dd1fb8 100644
--- a/components/dashboard/src/settings/Account.tsx
+++ b/components/dashboard/src/settings/Account.tsx
@@ -6,22 +6,33 @@
import { User } from "@gitpod/gitpod-protocol";
import { useContext, useState } from "react";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService, gitpodHostUrl } from "../service/service";
import { UserContext } from "../user-context";
-import getSettingsMenu from "./settings-menu";
import ConfirmationModal from "../components/ConfirmationModal";
-import CodeText from "../components/CodeText";
-import { PaymentContext } from "../payment-context";
+import ProfileInformation, { ProfileState } from "./ProfileInformation";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
export default function Account() {
- const { user } = useContext(UserContext);
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
-
+ const { user, setUser } = useContext(UserContext);
const [modal, setModal] = useState(false);
+ const primaryEmail = User.getPrimaryEmail(user!) || "";
const [typedEmail, setTypedEmail] = useState("");
+ const original = User.getProfile(user!);
+ const [profileState, setProfileState] = useState(original);
+ const [errorMessage, setErrorMessage] = useState("");
+ const [updated, setUpdated] = useState(false);
- const primaryEmail = User.getPrimaryEmail(user!) || "---";
+ const saveProfileState = () => {
+ const error = ProfileState.validate(profileState);
+ setErrorMessage(error);
+ if (error) {
+ return;
+ }
+ const updatedUser = User.setProfile(user!, profileState);
+ setUser(updatedUser);
+ getGitpodService().server.updateLoggedInUser(updatedUser);
+ setUpdated(true);
+ };
const deleteAccount = async () => {
await getGitpodService().server.deleteAccount();
@@ -55,36 +66,30 @@ export default function Account() {
setTypedEmail(e.target.value)}>
-
+
();
+
+ useEffect(() => {
+ if (!teams) {
+ setTeamsWithBillingEnabled(undefined);
+ return;
+ }
+ const teamsWithBilling: Team[] = [];
+ Promise.all(
+ teams.map(async (t) => {
+ const subscriptionId = await getGitpodService().server.findStripeSubscriptionIdForTeam(t.id);
+ if (subscriptionId) {
+ teamsWithBilling.push(t);
+ }
+ }),
+ ).then(() => setTeamsWithBillingEnabled(teamsWithBilling));
+ }, [teams]);
+
+ const setUsageAttributionTeam = async (team?: Team) => {
+ if (!user) {
+ return;
+ }
+ const usageAttributionId = team ? `team:${team.id}` : `user:${user.id}`;
+ await getGitpodService().server.setUsageAttribution(usageAttributionId);
+ };
return (
-
-
+
+
);
}
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index 372004ab69d023..eb9b7ef7389435 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -5,15 +5,13 @@
*/
import { UserEnvVar, UserEnvVarValue } from "@gitpod/gitpod-protocol";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import ConfirmationModal from "../components/ConfirmationModal";
import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
import Modal from "../components/Modal";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import { getGitpodService } from "../service/service";
-import getSettingsMenu from "./settings-menu";
import CodeText from "../components/CodeText";
-import { PaymentContext } from "../payment-context";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
interface EnvVarModalProps {
envVar: UserEnvVarValue;
@@ -146,7 +144,6 @@ function sortEnvVars(a: UserEnvVarValue, b: UserEnvVarValue) {
}
export default function EnvVars() {
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
const [envVars, setEnvVars] = useState([] as UserEnvVarValue[]);
const [currentEnvVar, setCurrentEnvVar] = useState({
name: "",
@@ -207,11 +204,7 @@ export default function EnvVars() {
};
return (
-
+
{isAddEnvVarModalVisible && (
)}
-
+
);
}
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 099e7340c7ebff..293455dc2bec6e 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -14,31 +14,26 @@ import { ContextMenuEntry } from "../components/ContextMenu";
import InfoBox from "../components/InfoBox";
import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon, ItemsList } from "../components/ItemsList";
import Modal from "../components/Modal";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import copy from "../images/copy.svg";
import exclamation from "../images/exclamation.svg";
-import { PaymentContext } from "../payment-context";
import { openAuthorizeWindow } from "../provider-utils";
import { getGitpodService, gitpodHostUrl } from "../service/service";
import { UserContext } from "../user-context";
import { isGitpodIo } from "../utils";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
import { SelectAccountModal } from "./SelectAccountModal";
-import getSettingsMenu from "./settings-menu";
export default function Integrations() {
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
-
return (
+ {children}
+
+ );
+}
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
index 6be4a0e5b9d393..a3cbde324599f0 100644
--- a/components/dashboard/src/settings/Plans.tsx
+++ b/components/dashboard/src/settings/Plans.tsx
@@ -22,10 +22,9 @@ import Modal from "../components/Modal";
import SelectableCard from "../components/SelectableCard";
import { getGitpodService } from "../service/service";
import { UserContext } from "../user-context";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import Tooltip from "../components/Tooltip";
-import getSettingsMenu from "./settings-menu";
import { PaymentContext } from "../payment-context";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
type PlanWithOriginalPrice = Plan & { originalPrice?: number };
type Pending = { pendingSince: number };
@@ -45,8 +44,7 @@ type TeamClaimModal =
export default function () {
const { user } = useContext(UserContext);
- const { showPaymentUI, showUsageBasedUI, currency, setCurrency, isStudent, isChargebeeCustomer } =
- useContext(PaymentContext);
+ const { showPaymentUI, currency, setCurrency, isStudent, isChargebeeCustomer } = useContext(PaymentContext);
const [accountStatement, setAccountStatement] = useState();
const [availableCoupons, setAvailableCoupons] = useState();
const [appliedCoupons, setAppliedCoupons] = useState();
@@ -636,11 +634,7 @@ export default function () {
return (
(localStorage.theme || "system");
const actuallySetTheme = (theme: Theme) => {
@@ -52,14 +52,11 @@ export default function Preferences() {
return (
+
);
}
diff --git a/components/dashboard/src/settings/ProfileInformation.tsx b/components/dashboard/src/settings/ProfileInformation.tsx
new file mode 100644
index 00000000000000..bfa010c3641cbd
--- /dev/null
+++ b/components/dashboard/src/settings/ProfileInformation.tsx
@@ -0,0 +1,176 @@
+/**
+ * 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 { User } from "@gitpod/gitpod-protocol";
+import { hoursBefore, isDateSmaller } from "@gitpod/gitpod-protocol/lib/util/timeutil";
+import React, { useContext, useState } from "react";
+import Alert from "../components/Alert";
+import CodeText from "../components/CodeText";
+import Modal from "../components/Modal";
+import { getGitpodService } from "../service/service";
+import { UserContext } from "../user-context";
+import { isGitpodIo } from "../utils";
+
+export namespace ProfileState {
+ function shouldNudgeForUpdate(user: User): boolean {
+ if (!isGitpodIo()) {
+ return false;
+ }
+ if (!user.additionalData?.profile) {
+ // never updated profile information and account is older than 24 hours (i.e. ask on second day).
+ return !isDateSmaller(hoursBefore(new Date().toISOString(), 24), user.creationDate);
+ }
+ // if the profile wasn't updated for 12 months ask again.
+ return !(
+ !!user.additionalData.profile.lastUpdatedDetailsNudge &&
+ isDateSmaller(
+ hoursBefore(new Date().toISOString(), 24 * 365),
+ user.additionalData.profile.lastUpdatedDetailsNudge,
+ )
+ );
+ }
+
+ /**
+ * @param state
+ * @returns error message or empty string when valid
+ */
+ export function validate(state: User.Profile): string {
+ if (state.name.trim() === "") {
+ return "Name must not be empty.";
+ }
+ if (state.email.trim() === "") {
+ return "Email must not be empty.";
+ }
+ if (
+ !/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+ state.email.trim(),
+ )
+ ) {
+ return "Please enter a valid email.";
+ }
+ return "";
+ }
+
+ export function NudgeForProfileUpdateModal() {
+ const { user, setUser } = useContext(UserContext);
+ const original = User.getProfile(user!);
+ const [profileState, setProfileState] = useState(original);
+ const [errorMessage, setErrorMessage] = useState("");
+ const [visible, setVisible] = useState(shouldNudgeForUpdate(user!));
+
+ const saveProfileState = () => {
+ const error = ProfileState.validate(profileState);
+ setErrorMessage(error);
+ if (error) {
+ return;
+ }
+ const updatedUser = User.setProfile(user!, profileState);
+ setUser(updatedUser);
+ getGitpodService().server.updateLoggedInUser(updatedUser);
+ setVisible(shouldNudgeForUpdate(updatedUser!));
+ };
+
+ const cancelProfileUpdate = () => {
+ setProfileState(original);
+ saveProfileState();
+ };
+
+ return (
+
{props.children}
{props.buttons}
diff --git a/components/dashboard/src/components/PageWithSubMenu.tsx b/components/dashboard/src/components/PageWithSubMenu.tsx
index 0006a52df606e9..8518396c8055b1 100644
--- a/components/dashboard/src/components/PageWithSubMenu.tsx
+++ b/components/dashboard/src/components/PageWithSubMenu.tsx
@@ -25,7 +25,7 @@ export function PageWithSubMenu(p: PageWithSubMenuProps) {
-
-
+
-
+
+ Time + ++ Commit + ++ Prebuild Status + +
+ {isLoadingEvents && (
+ -
+
+ +++{formatDate(event.creationTime)}
++ ++++ {event?.branch} ++{event?.commit?.substring(0, 8)}
++ {event.prebuildId && ( + + {<>{status}} + + )} + {!event.prebuildId && ( + +++ )} ++ {status} ++{event?.message}
+
+ );
+ })}
+
-
{p.subMenu.map((e) => {
let classes = "flex block py-2 px-4 rounded-md";
if (e.link.some((l) => l === location.pathname)) {
diff --git a/components/dashboard/src/components/Pagination.tsx b/components/dashboard/src/components/Pagination.tsx
new file mode 100644
index 00000000000000..69177626ab9850
--- /dev/null
+++ b/components/dashboard/src/components/Pagination.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2022 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 Arrow from "./Arrow";
+
+function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
+ const { numberOfPages, currentPage, setCurrentPage } = props;
+ const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
+
+ const nextPage = () => {
+ if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
+ };
+ const prevPage = () => {
+ if (currentPage !== 1) setCurrentPage(currentPage - 1);
+ };
+
+ return (
+
+ );
+}
+
+export default Pagination;
diff --git a/components/dashboard/src/components/PillMenuItem.tsx b/components/dashboard/src/components/PillMenuItem.tsx
index 5616b9cd63316f..27e0e572c3c809 100644
--- a/components/dashboard/src/components/PillMenuItem.tsx
+++ b/components/dashboard/src/components/PillMenuItem.tsx
@@ -13,8 +13,10 @@ export default function PillMenuItem(p: {
onClick?: (event: React.MouseEvent) => void;
}) {
const classes =
- "flex block font-medium dark:text-gray-200 px-2 py-1 rounded-lg transition ease-in-out " +
- (p.selected ? "bg-gray-200 dark:bg-gray-700" : "text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800");
+ "flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
+ (p.selected
+ ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
+ : "hover:bg-gray-100 dark:hover:bg-gray-700");
return !p.link || p.link.startsWith("https://") ? (
{p.name}
diff --git a/components/dashboard/src/components/PrebuildLogs.tsx b/components/dashboard/src/components/PrebuildLogs.tsx
index af158827f3d49d..4c065cfa4c6c79 100644
--- a/components/dashboard/src/components/PrebuildLogs.tsx
+++ b/components/dashboard/src/components/PrebuildLogs.tsx
@@ -7,97 +7,185 @@
import EventEmitter from "events";
import React, { Suspense, useEffect, useState } from "react";
import {
- Workspace,
WorkspaceInstance,
DisposableCollection,
WorkspaceImageBuild,
HEADLESS_LOG_STREAM_STATUS_CODE_REGEX,
Disposable,
+ PrebuildWithStatus,
} from "@gitpod/gitpod-protocol";
import { getGitpodService } from "../service/service";
+import { PrebuildStatus } from "../projects/Prebuilds";
const WorkspaceLogs = React.lazy(() => import("./WorkspaceLogs"));
export interface PrebuildLogsProps {
- workspaceId?: string;
+ // The workspace ID of the "prebuild" workspace
+ workspaceId: string | undefined;
+ onIgnorePrebuild?: () => void;
+ children?: React.ReactNode;
}
export default function PrebuildLogs(props: PrebuildLogsProps) {
- const [workspace, setWorkspace] = useState
+
);
}
-export function watchHeadlessLogs(
+function retryWatchWorkspaceImageBuildLogs(workspaceId: string): Disposable {
+ let abortImageLogs = false;
+ (async () => {
+ // Linear backoff + abort for re-trying fetching of imagebuild logs
+ const initialDelaySeconds = 1;
+ const backoffFactor = 1.2;
+ const maxBackoffSeconds = 5;
+ let delayInSeconds = initialDelaySeconds;
+
+ while (true) {
+ delayInSeconds = Math.min(delayInSeconds * backoffFactor, maxBackoffSeconds);
+
+ console.debug("re-trying image build logs");
+ // eslint-disable-next-line
+ await new Promise((resolve) => {
+ setTimeout(resolve, delayInSeconds * 1000);
+ });
+ if (abortImageLogs) {
+ return;
+ }
+ try {
+ await getGitpodService().server.watchWorkspaceImageBuildLogs(workspaceId);
+ } catch (err) {
+ console.error("watchWorkspaceImageBuildLogs", err);
+ }
+ }
+ })();
+ return Disposable.create(() => {
+ abortImageLogs = true;
+ });
+}
+
+function watchHeadlessLogs(
instanceId: string,
onLog: (chunk: string) => void,
checkIsDone: () => Promise
+
+
+ {prebuild &&
+
+
+ );
+}
+
+export default WorkspaceClass;
diff --git a/components/dashboard/src/contexts/FeatureFlagContext.tsx b/components/dashboard/src/contexts/FeatureFlagContext.tsx
new file mode 100644
index 00000000000000..6d6b160f17cac2
--- /dev/null
+++ b/components/dashboard/src/contexts/FeatureFlagContext.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2022 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 React, { createContext, useContext, useState, useEffect } from "react";
+import { useLocation } from "react-router";
+import { getExperimentsClient } from "../experiments/client";
+import { ProjectContext } from "../projects/project-context";
+import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
+import { UserContext } from "../user-context";
+
+interface FeatureFlagConfig {
+ [flagName: string]: { defaultValue: boolean; setter: React.Dispatch
+
+ + {props.category} +
+ +
+
+
+ {props.friendlyName}
+
+
+ {props.description}
+
+
+
+
+
+ {showAuthBanner ? (
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/components/dashboard/src/projects/Prebuild.tsx b/components/dashboard/src/projects/Prebuild.tsx
index 2bab83b1be939e..8f231004e701e2 100644
--- a/components/dashboard/src/projects/Prebuild.tsx
+++ b/components/dashboard/src/projects/Prebuild.tsx
@@ -13,7 +13,6 @@ import PrebuildLogs from "../components/PrebuildLogs";
import Spinner from "../icons/Spinner.svg";
import { getGitpodService, gitpodHostUrl } from "../service/service";
import { TeamsContext, getCurrentTeam } from "../teams/teams-context";
-import { PrebuildStatus } from "./Prebuilds";
import { shortCommitMessage } from "./render-utils";
export default function () {
@@ -156,47 +155,40 @@ export default function () {
<>
+
+ ) : (
+ <>
+
+ 
+
+ No Access
+
+ Authorize {showAuthBanner.host}
+ to access project information. +
+
+ + to access project information. +
+
+
+
+
+
+
+
+ setSearchFilter(e.target.value)}
+ />
+
+ 
+ Fetching Prebuild Events...
+
+ )}
+ {events
+ .filter(filter)
+ .slice(0, 10)
+ .map((event, index) => {
+ const status = renderStatus(event);
+
+ return (
+
-
+ {["aborted", "timeout", "failed"].includes(prebuild?.status || "") || !!prebuild?.error ? (
+
+ ) : ["building", "queued"].includes(prebuild?.status || "") ? (
+
+ ) : prebuild?.status === "available" ? (
+
+
+
+ ) : (
+
+ )}
+
);
diff --git a/components/dashboard/src/projects/Prebuilds.tsx b/components/dashboard/src/projects/Prebuilds.tsx
index 441a654e806512..5a201e41a77f30 100644
--- a/components/dashboard/src/projects/Prebuilds.tsx
+++ b/components/dashboard/src/projects/Prebuilds.tsx
@@ -190,7 +190,7 @@ export default function (props: { project?: Project; isAdminDashboard?: boolean
-
+
-
-
- {prebuild &&
-
-
Incremental Prebuilds
+Prebuilds
+
Workspace Persistence
+Profile
-
- The following information will be used to set up Git configuration. You can override Git author name
- and email per project by using the default environment variables{" "}
-
-
);
}
diff --git a/components/dashboard/src/settings/Billing.tsx b/components/dashboard/src/settings/Billing.tsx
index 19588ee6eac5aa..8b05e521ecbcd0 100644
--- a/components/dashboard/src/settings/Billing.tsx
+++ b/components/dashboard/src/settings/Billing.tsx
@@ -4,21 +4,86 @@
* See License-AGPL.txt in the project root for license information.
*/
-import { useContext } from "react";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
-import { PaymentContext } from "../payment-context";
-import getSettingsMenu from "./settings-menu";
+import { Team } from "@gitpod/gitpod-protocol";
+import { useContext, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { ReactComponent as Spinner } from "../icons/Spinner.svg";
+import DropDown from "../components/DropDown";
+import { getGitpodService } from "../service/service";
+import { TeamsContext } from "../teams/teams-context";
+import { UserContext } from "../user-context";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
export default function Billing() {
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
+ const { user } = useContext(UserContext);
+ const { teams } = useContext(TeamsContext);
+ const [teamsWithBillingEnabled, setTeamsWithBillingEnabled] = useState
-
-
-
- Name
- -
- Email
- -
-
-
+
+
- 
+
- Avatar
-Delete Account
This action will remove all the data associated with your account in Gitpod. @@ -92,7 +97,7 @@ export default function Account() { - +
Billing
-Usage-Based Billing
+Manage usage-based billing, spending limit, and payment method.
+
+
+ Billing Account
+ {teamsWithBillingEnabled === undefined &&
+
+
+ Create a team
+ {" "}
+ to set up usage-based billing.
+
+
+ )}
+ {teamsWithBillingEnabled && teamsWithBillingEnabled.length > 0 && (
+
+ Bill all my usage to:
+ `team:${t.id}` === user?.usageAttributionId)?.name
+ }
+ customClasses="w-32"
+ renderAsLink={true}
+ entries={[
+ {
+ title: "(myself)",
+ onClick: () => setUsageAttributionTeam(undefined),
+ },
+ ].concat(
+ teamsWithBillingEnabled.map((t) => ({
+ title: t.name,
+ onClick: () => setUsageAttributionTeam(t),
+ })),
+ )}
+ />
+
+ )}
+
-
+
);
}
diff --git a/components/dashboard/src/settings/Notifications.tsx b/components/dashboard/src/settings/Notifications.tsx
index 8e1680e1b761d9..f2f6c352587f7e 100644
--- a/components/dashboard/src/settings/Notifications.tsx
+++ b/components/dashboard/src/settings/Notifications.tsx
@@ -8,14 +8,11 @@ import { useContext, useState } from "react";
import { getGitpodService } from "../service/service";
import { UserContext } from "../user-context";
import CheckBox from "../components/CheckBox";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
-import getSettingsMenu from "./settings-menu";
import { identifyUser } from "../Analytics";
-import { PaymentContext } from "../payment-context";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
export default function Notifications() {
const { user, setUser } = useContext(UserContext);
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
const [isOnboardingMail, setOnboardingMail] = useState(
!!user?.additionalData?.emailNotificationSettings?.allowsOnboardingMail,
);
@@ -83,11 +80,7 @@ export default function Notifications() {
return (
-
+
+
);
}
diff --git a/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx b/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx
new file mode 100644
index 00000000000000..2e7afbe305a090
--- /dev/null
+++ b/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2022 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 { useContext } from "react";
+import { PageWithSubMenu } from "../components/PageWithSubMenu";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { PaymentContext } from "../payment-context";
+import getSettingsMenu from "./settings-menu";
+
+export interface PageWithAdminSubMenuProps {
+ title: string;
+ subtitle: string;
+ children: React.ReactNode;
+}
+
+export function PageWithSettingsSubMenu({ title, subtitle, children }: PageWithAdminSubMenuProps) {
+ const { showUsageBasedPricingUI } = useContext(FeatureFlagContext);
+ const { showPaymentUI } = useContext(PaymentContext);
+
+ return (
+ Email Notification Preferences
-
+
{showPaymentUI && (
)}
-
+
);
}
diff --git a/components/dashboard/src/settings/Preferences.tsx b/components/dashboard/src/settings/Preferences.tsx
index ce47dd27507769..0dc3940615bc11 100644
--- a/components/dashboard/src/settings/Preferences.tsx
+++ b/components/dashboard/src/settings/Preferences.tsx
@@ -5,22 +5,22 @@
*/
import { useContext, useState } from "react";
-import { PageWithSubMenu } from "../components/PageWithSubMenu";
import SelectableCardSolid from "../components/SelectableCardSolid";
import { getGitpodService } from "../service/service";
import { ThemeContext } from "../theme-context";
import { UserContext } from "../user-context";
-import getSettingsMenu from "./settings-menu";
import { trackEvent } from "../Analytics";
-import { PaymentContext } from "../payment-context";
import SelectIDE from "./SelectIDE";
+import SelectWorkspaceClass from "./selectClass";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
+import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
type Theme = "light" | "dark" | "system";
export default function Preferences() {
const { user } = useContext(UserContext);
- const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
const { setIsDark } = useContext(ThemeContext);
+ const { showWorkspaceClassesUI } = useContext(FeatureFlagContext);
const [theme, setTheme] = useState@@ -858,7 +852,7 @@ export default function () {
-
+
- Editor
Choose the editor for opening workspaces.
Theme
Early bird or night owl? Choose your side.
@@ -115,9 +112,7 @@ export default function Preferences() {
- - Dotfiles{" "} -
+Dotfiles
Customize workspaces using dotfiles.
Repository URL
@@ -141,7 +136,7 @@ export default function Preferences() {
+
+ {props.errorMessage}
+
+ )}
+ {props.updated && (
+
+ Profile information has been updated.
+
+ )}
+
+ );
+}
diff --git a/components/dashboard/src/settings/SSHKeys.tsx b/components/dashboard/src/settings/SSHKeys.tsx
new file mode 100644
index 00000000000000..ab1c724526d929
--- /dev/null
+++ b/components/dashboard/src/settings/SSHKeys.tsx
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2022 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 { useEffect, useState } from "react";
+import Modal from "../components/Modal";
+import Alert from "../components/Alert";
+import { Item, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
+import ConfirmationModal from "../components/ConfirmationModal";
+import { SSHPublicKeyValue, UserSSHPublicKeyValue } from "@gitpod/gitpod-protocol";
+import { getGitpodService } from "../service/service";
+import moment from "moment";
+import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
+
+interface AddModalProps {
+ value: SSHPublicKeyValue;
+ onClose: () => void;
+ onSave: () => void;
+}
+
+interface DeleteModalProps {
+ value: UserSSHPublicKeyValue;
+ onConfirm: () => void;
+ onClose: () => void;
+}
+
+export function AddSSHKeyModal(props: AddModalProps) {
+ const [errorMsg, setErrorMsg] = useState("");
+
+ const [value, setValue] = useState({ ...props.value });
+ const update = (pev: Partial
+ The following information will be used to set up Git configuration. You can override Git author name and
+ email per project by using the default environment variables
+
+ {props.children || null}
+
+
+
+
+ Name
+ props.setProfileState({ ...props.profileState, name: e.target.value })} + /> +
+ Email
+ props.setProfileState({ ...props.profileState, email: e.target.value })} + /> +
+
+
+ Company
+ props.setProfileState({ ...props.profileState, company: e.target.value })} + /> +
+
+
+ 
+
+ Avatar
+
+ Add an SSH key for secure access workspaces via SSH.{" "}
+
+ Learn more
+
+
+
+