Use Microsoft product icons in picker

Rhys Sullivan committed 4 months ago

Commit dcae4981 parent 0f656f74 files · +30 −1Browse files

Unified · Split

4 files

e2e/scenarios/provider-plugins-ui.test.ts +2 −0
packages/plugins/microsoft/src/react/MicrosoftScopePicker.tsx +10 −1
packages/plugins/microsoft/src/sdk/presets.test.ts +6 −0
packages/plugins/microsoft/src/sdk/presets.ts +12 −0

e2e/scenarios/provider-plugins-ui.test.ts+2−0

@@ -51,6 +51,8 @@ scenario( · 50 unmodified lines
51	51	await page.getByText("Customize Microsoft Graph").waitFor();
52	52	await page.getByText("Outlook Mail").waitFor();
53	53	await page.getByText("OneDrive Files").waitFor();
	54	+ await page.locator('img[src*="svgl.app/library/microsoft-outlook.svg"]').first().waitFor();
	55	+ await page.locator('img[src*="svgl.app/library/microsoft-onedrive.svg"]').waitFor();
54	56	await page.getByRole("button", { name: /View scopes/ }).click();
55	57	await page.getByText("offline_access").waitFor();
56	58	await page.getByText("Mail.ReadWrite").waitFor();

packages/plugins/microsoft/src/react/MicrosoftScopePicker.tsx+10−1

@@ -1,5 +1,10 @@
1	1	import { useMemo, useState } from "react";
2		−import { ChevronDownIcon, PlusIcon, ShieldAlertIcon, XIcon } from "lucide-react";
	2	+import {
	3	+ ChevronDownIcon,
	4	+ PlusIcon,
	5	+ ShieldAlertIcon,
	6	+ XIcon,
	7	+} from "lucide-react";
3	8
4	9	import { cn } from "@executor-js/react/lib/utils";
5	10	import { Badge } from "@executor-js/react/components/badge";
@@ -12,6 +17,7 @@ import { · 6 unmodified lines
12	17	} from "@executor-js/react/components/collapsible";
13	18	import { FieldLabel } from "@executor-js/react/components/field";
14	19	import { Input } from "@executor-js/react/components/input";
	20	+import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";
15	21
16	22	import {
17	23	microsoftGraphScopePresets,
@@ -56,6 +62,9 @@ const ScopeRow = ({ · 38 unmodified lines
56	62	)}
57	63	>
58	64	<Checkbox checked={checked} onCheckedChange={(next) => onToggle(next === true)} />
	65	+ <div className="shrink-0">
	66	+ <IntegrationFavicon icon={preset.icon} size={16} />
	67	+ </div>
59	68	<div className="min-w-0 flex-1">
60	69	<div className="flex min-w-0 items-center gap-2">
61	70	<span className="truncate text-sm font-medium text-foreground">{preset.name}</span>

packages/plugins/microsoft/src/sdk/presets.test.ts+6−0

@@ -29,4 +29,10 @@ describe("Microsoft Graph scope presets", () => { · 28 unmodified lines
29	29	expect(microsoftGraphExactPathsForPresetIds(["profile"])).toContain("/me");
30	30	expect(microsoftGraphPathPrefixesForPresetIds(["mail"])).toContain("/me/messages");
31	31	});
	32	+
	33	+ it("declares product icons for each workload", () => {
	34	+ for (const preset of microsoftGraphScopePresets) {
	35	+ expect(preset.icon).toMatch(/^https:\/\/svgl\.app\/library\/.+\.svg$/);
	36	+ }
	37	+ });
32	38	});

packages/plugins/microsoft/src/sdk/presets.ts+12−0

@@ -12,6 +12,7 @@ export interface MicrosoftGraphScopePreset { · 11 unmodified lines
12	12	readonly id: string;
13	13	readonly name: string;
14	14	readonly summary: string;
	15	+ readonly icon?: string;
15	16	readonly scopes: readonly string[];
16	17	readonly exactPaths?: readonly string[];
17	18	readonly pathPrefixes?: readonly string[];
@@ -20,6 +21,7 @@ export interface MicrosoftGraphScopePreset { · 2 unmodified lines
20	21	}
21	22
22	23	const MICROSOFT_ICON = "https://www.microsoft.com/favicon.ico";
	24	+const svglIcon = (name: string) => `https://svgl.app/library/${name}.svg`;
23	25
24	26	export const MICROSOFT_GRAPH_OPENAPI_URL =
25	27	"https://raw.githubusercontent.com/microsoftgraph/msgraph-metadata/master/openapi/v1.0/openapi.yaml";
@@ -46,6 +48,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 20 unmodified lines
46	48	id: "profile",
47	49	name: "Profile",
48	50	summary: "Signed-in user profile and photo.",
	51	+ icon: svglIcon("microsoft"),
49	52	scopes: ["User.Read"],
50	53	exactPaths: ["/me", "/me/photo", "/me/photo/$value"],
51	54	featured: true,
@@ -55,6 +58,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 3 unmodified lines
55	58	id: "mail",
56	59	name: "Outlook Mail",
57	60	summary: "Messages, folders, attachments, and send mail.",
	61	+ icon: svglIcon("microsoft-outlook"),
58	62	scopes: ["Mail.ReadWrite", "Mail.Send"],
59	63	pathPrefixes: [
60	64	"/me/messages",
@@ -71,6 +75,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 10 unmodified lines
71	75	id: "calendar",
72	76	name: "Outlook Calendar",
73	77	summary: "Calendars, events, and scheduling.",
	78	+ icon: svglIcon("microsoft-outlook"),
74	79	scopes: ["Calendars.ReadWrite"],
75	80	pathPrefixes: [
76	81	"/me/calendar",
@@ -89,6 +94,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 12 unmodified lines
89	94	id: "files",
90	95	name: "OneDrive Files",
91	96	summary: "Drives, files, folders, sharing links, and permissions.",
	97	+ icon: svglIcon("microsoft-onedrive"),
92	98	scopes: ["Files.ReadWrite.All"],
93	99	pathPrefixes: ["/me/drive", "/users/{user-id}/drive", "/drives", "/shares"],
94	100	featured: true,
@@ -98,6 +104,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 3 unmodified lines
98	104	id: "excel",
99	105	name: "Excel Workbooks",
100	106	summary: "Workbook tables, worksheets, ranges, charts, and sessions.",
	107	+ icon: svglIcon("microsoft-excel"),
101	108	scopes: ["Files.ReadWrite.All"],
102	109	pathPrefixes: [
103	110	"/me/drive/items/{driveItem-id}/workbook",
@@ -110,6 +117,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 6 unmodified lines
110	117	id: "contacts",
111	118	name: "Outlook Contacts",
112	119	summary: "Contacts and contact folders.",
	120	+ icon: svglIcon("microsoft-outlook"),
113	121	scopes: ["Contacts.ReadWrite"],
114	122	pathPrefixes: [
115	123	"/me/contacts",
@@ -123,6 +131,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 7 unmodified lines
123	131	id: "tasks",
124	132	name: "To Do Tasks",
125	133	summary: "Task lists, tasks, and checklist items.",
	134	+ icon: svglIcon("microsoft-todo"),
126	135	scopes: ["Tasks.ReadWrite"],
127	136	pathPrefixes: ["/me/todo", "/users/{user-id}/todo"],
128	137	audience: "standard-user",
@@ -131,6 +140,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 2 unmodified lines
131	140	id: "teams-chat",
132	141	name: "Teams Chats",
133	142	summary: "Chats, chat messages, installed apps, and members.",
	143	+ icon: svglIcon("microsoft-teams"),
134	144	scopes: ["Chat.ReadWrite"],
135	145	pathPrefixes: ["/me/chats", "/chats"],
136	146	audience: "standard-user",
@@ -139,6 +149,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 2 unmodified lines
139	149	id: "sites",
140	150	name: "SharePoint Sites",
141	151	summary: "Sites, lists, pages, and columns.",
	152	+ icon: svglIcon("microsoft-sharepoint"),
142	153	scopes: ["Sites.ReadWrite.All"],
143	154	pathPrefixes: ["/sites"],
144	155	audience: "admin",
@@ -147,6 +158,7 @@ export const microsoftGraphScopePresets: readonly MicrosoftGraphScopePreset[] = · 2 unmodified lines
147	158	id: "users",
148	159	name: "Directory Users",
149	160	summary: "Users, managers, app role assignments, and directory metadata.",
	161	+ icon: svglIcon("microsoft"),
150	162	scopes: ["User.ReadWrite.All", "Directory.Read.All"],
151	163	pathPrefixes: ["/users"],
152	164	audience: "admin",