Skip to content

Commit 5c90cd5

Browse files
fix: Improved Integrations UX (#16657)
1 parent 195940c commit 5c90cd5

File tree

3 files changed

+107
-56
lines changed

3 files changed

+107
-56
lines changed
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* Copyright (c) 2023 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
8+
import { useState } from "react";
9+
import { ContextMenuEntry } from "../components/ContextMenu";
10+
import { Item, ItemFieldIcon, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
11+
12+
interface AuthEntryItemParams {
13+
ap: AuthProviderInfo;
14+
isConnected: (authProviderId: string) => boolean;
15+
getUsername: (authProviderId: string) => string | undefined;
16+
getPermissions: (authProviderId: string) => string[] | undefined;
17+
gitProviderMenu: (provider: AuthProviderInfo) => ContextMenuEntry[];
18+
}
19+
20+
export const AuthEntryItem = (props: AuthEntryItemParams) => {
21+
const [menuVisible, setMenuVisible] = useState<boolean>(false);
22+
23+
const changeMenuState = (state: boolean) => {
24+
setMenuVisible(state);
25+
};
26+
27+
return (
28+
<Item key={"ap-" + props.ap.authProviderId} className="h-16" solid={menuVisible}>
29+
<ItemFieldIcon>
30+
<div
31+
className={
32+
"rounded-full w-3 h-3 text-sm align-middle m-auto " +
33+
(props.isConnected(props.ap.authProviderId) ? "bg-green-500" : "bg-gray-400")
34+
}
35+
>
36+
&nbsp;
37+
</div>
38+
</ItemFieldIcon>
39+
<ItemField className="w-4/12 xl:w-3/12 flex flex-col my-auto">
40+
<span className="my-auto font-medium truncate overflow-ellipsis">{props.ap.authProviderType}</span>
41+
<span className="text-sm my-auto text-gray-400 truncate overflow-ellipsis dark:text-gray-500">
42+
{props.ap.host}
43+
</span>
44+
</ItemField>
45+
<ItemField className="w-6/12 xl:w-3/12 flex flex-col my-auto">
46+
<span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
47+
{props.getUsername(props.ap.authProviderId) || "–"}
48+
</span>
49+
<span className="text-sm my-auto text-gray-400 dark:text-gray-500">Username</span>
50+
</ItemField>
51+
<ItemField className="hidden xl:w-5/12 xl:flex xl:flex-col my-auto">
52+
<span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
53+
{props.getPermissions(props.ap.authProviderId)?.join(", ") || "–"}
54+
</span>
55+
<span className="text-sm my-auto text-gray-400 dark:text-gray-500">Permissions</span>
56+
</ItemField>
57+
<ItemFieldContextMenu changeMenuState={changeMenuState} menuEntries={props.gitProviderMenu(props.ap)} />
58+
</Item>
59+
);
60+
};
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Copyright (c) 2023 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
8+
import { ContextMenuEntry } from "../components/ContextMenu";
9+
import { Item, ItemFieldIcon, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
10+
11+
export const IntegrationEntryItem = (props: {
12+
ap: AuthProviderEntry;
13+
gitProviderMenu: (provider: AuthProviderEntry) => ContextMenuEntry[];
14+
}) => {
15+
return (
16+
<Item key={"ap-" + props.ap.id} className="h-16">
17+
<ItemFieldIcon>
18+
<div
19+
className={
20+
"rounded-full w-3 h-3 text-sm align-middle m-auto " +
21+
(props.ap.status === "verified" ? "bg-green-500" : "bg-gray-400")
22+
}
23+
>
24+
&nbsp;
25+
</div>
26+
</ItemFieldIcon>
27+
<ItemField className="w-3/12 flex flex-col my-auto">
28+
<span className="font-medium truncate overflow-ellipsis">{props.ap.type}</span>
29+
</ItemField>
30+
<ItemField className="w-7/12 flex flex-col my-auto">
31+
<span className="my-auto truncate text-gray-500 overflow-ellipsis">{props.ap.host}</span>
32+
</ItemField>
33+
<ItemFieldContextMenu menuEntries={props.gitProviderMenu(props.ap)} />
34+
</Item>
35+
);
36+
};

components/dashboard/src/user-settings/Integrations.tsx

Lines changed: 11 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ import CheckBox from "../components/CheckBox";
1212
import ConfirmationModal from "../components/ConfirmationModal";
1313
import { ContextMenuEntry } from "../components/ContextMenu";
1414
import InfoBox from "../components/InfoBox";
15-
import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon, ItemsList } from "../components/ItemsList";
15+
import { ItemsList } from "../components/ItemsList";
1616
import Modal, { ModalBody, ModalHeader, ModalFooter } from "../components/Modal";
1717
import copy from "../images/copy.svg";
1818
import exclamation from "../images/exclamation.svg";
1919
import { openAuthorizeWindow } from "../provider-utils";
2020
import { getGitpodService, gitpodHostUrl } from "../service/service";
2121
import { UserContext } from "../user-context";
2222
import { isGitpodIo } from "../utils";
23+
import { AuthEntryItem } from "./AuthEntryItem";
24+
import { IntegrationEntryItem } from "./IntegrationItemEntry";
2325
import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
2426
import { SelectAccountModal } from "./SelectAccountModal";
2527

@@ -336,39 +338,13 @@ function GitProviders() {
336338
<ItemsList className="pt-6">
337339
{authProviders &&
338340
authProviders.map((ap) => (
339-
<Item key={"ap-" + ap.authProviderId} className="h-16">
340-
<ItemFieldIcon>
341-
<div
342-
className={
343-
"rounded-full w-3 h-3 text-sm align-middle m-auto " +
344-
(isConnected(ap.authProviderId) ? "bg-green-500" : "bg-gray-400")
345-
}
346-
>
347-
&nbsp;
348-
</div>
349-
</ItemFieldIcon>
350-
<ItemField className="w-4/12 xl:w-3/12 flex flex-col my-auto">
351-
<span className="my-auto font-medium truncate overflow-ellipsis">
352-
{ap.authProviderType}
353-
</span>
354-
<span className="text-sm my-auto text-gray-400 truncate overflow-ellipsis dark:text-gray-500">
355-
{ap.host}
356-
</span>
357-
</ItemField>
358-
<ItemField className="w-6/12 xl:w-3/12 flex flex-col my-auto">
359-
<span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
360-
{getUsername(ap.authProviderId) || "–"}
361-
</span>
362-
<span className="text-sm my-auto text-gray-400 dark:text-gray-500">Username</span>
363-
</ItemField>
364-
<ItemField className="hidden xl:w-5/12 xl:flex xl:flex-col my-auto">
365-
<span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
366-
{getPermissions(ap.authProviderId)?.join(", ") || "–"}
367-
</span>
368-
<span className="text-sm my-auto text-gray-400 dark:text-gray-500">Permissions</span>
369-
</ItemField>
370-
<ItemFieldContextMenu menuEntries={gitProviderMenu(ap)} />
371-
</Item>
341+
<AuthEntryItem
342+
isConnected={isConnected}
343+
gitProviderMenu={gitProviderMenu}
344+
getUsername={getUsername}
345+
getPermissions={getPermissions}
346+
ap={ap}
347+
/>
372348
))}
373349
</ItemsList>
374350
</div>
@@ -482,28 +458,7 @@ function GitIntegrations() {
482458
</div>
483459
)}
484460
<ItemsList className="pt-6">
485-
{providers &&
486-
providers.map((ap) => (
487-
<Item key={"ap-" + ap.id} className="h-16">
488-
<ItemFieldIcon>
489-
<div
490-
className={
491-
"rounded-full w-3 h-3 text-sm align-middle m-auto " +
492-
(ap.status === "verified" ? "bg-green-500" : "bg-gray-400")
493-
}
494-
>
495-
&nbsp;
496-
</div>
497-
</ItemFieldIcon>
498-
<ItemField className="w-3/12 flex flex-col my-auto">
499-
<span className="font-medium truncate overflow-ellipsis">{ap.type}</span>
500-
</ItemField>
501-
<ItemField className="w-7/12 flex flex-col my-auto">
502-
<span className="my-auto truncate text-gray-500 overflow-ellipsis">{ap.host}</span>
503-
</ItemField>
504-
<ItemFieldContextMenu menuEntries={gitProviderMenu(ap)} />
505-
</Item>
506-
))}
461+
{providers && providers.map((ap) => <IntegrationEntryItem ap={ap} gitProviderMenu={gitProviderMenu} />)}
507462
</ItemsList>
508463
</div>
509464
);

0 commit comments

Comments
 (0)