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

         await page.getByText("Customize Microsoft Graph").waitFor();
         await page.getByText("Outlook Mail").waitFor();
         await page.getByText("OneDrive Files").waitFor();
+        await page.locator('img[src*="svgl.app/library/microsoft-outlook.svg"]').first().waitFor();
+        await page.locator('img[src*="svgl.app/library/microsoft-onedrive.svg"]').waitFor();
         await page.getByRole("button", { name: /View scopes/ }).click();
         await page.getByText("offline_access").waitFor();
         await page.getByText("Mail.ReadWrite").waitFor();

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

 import { useMemo, useState } from "react";
-import { ChevronDownIcon, PlusIcon, ShieldAlertIcon, XIcon } from "lucide-react";
+import {
+  ChevronDownIcon,
+  PlusIcon,
+  ShieldAlertIcon,
+  XIcon,
+} from "lucide-react";
 import { cn } from "@executor-js/react/lib/utils";
 import { Badge } from "@executor-js/react/components/badge";
 } from "@executor-js/react/components/collapsible";
 import { FieldLabel } from "@executor-js/react/components/field";
 import { Input } from "@executor-js/react/components/input";
+import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";
 import {
   microsoftGraphScopePresets,
     )}
   >
     <Checkbox checked={checked} onCheckedChange={(next) => onToggle(next === true)} />
+    <div className="shrink-0">
+      <IntegrationFavicon icon={preset.icon} size={16} />
+    </div>
     <div className="min-w-0 flex-1">
       <div className="flex min-w-0 items-center gap-2">
         <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	expect(microsoftGraphExactPathsForPresetIds(["profile"])).toContain("/me");	29	expect(microsoftGraphExactPathsForPresetIds(["profile"])).toContain("/me");
30	expect(microsoftGraphPathPrefixesForPresetIds(["mail"])).toContain("/me/messages");	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

   readonly id: string;
   readonly name: string;
   readonly summary: string;
+  readonly icon?: string;
   readonly scopes: readonly string[];
   readonly exactPaths?: readonly string[];
   readonly pathPrefixes?: readonly string[];
 }
 const MICROSOFT_ICON = "https://www.microsoft.com/favicon.ico";
+const svglIcon = (name: string) => `https://svgl.app/library/${name}.svg`;
 export const MICROSOFT_GRAPH_OPENAPI_URL =
   "https://raw.githubusercontent.com/microsoftgraph/msgraph-metadata/master/openapi/v1.0/openapi.yaml";
     id: "profile",
     name: "Profile",
     summary: "Signed-in user profile and photo.",
+    icon: svglIcon("microsoft"),
     scopes: ["User.Read"],
     exactPaths: ["/me", "/me/photo", "/me/photo/$value"],
     featured: true,
     id: "mail",
     name: "Outlook Mail",
     summary: "Messages, folders, attachments, and send mail.",
+    icon: svglIcon("microsoft-outlook"),
     scopes: ["Mail.ReadWrite", "Mail.Send"],
     pathPrefixes: [
       "/me/messages",
     id: "calendar",
     name: "Outlook Calendar",
     summary: "Calendars, events, and scheduling.",
+    icon: svglIcon("microsoft-outlook"),
     scopes: ["Calendars.ReadWrite"],
     pathPrefixes: [
       "/me/calendar",
     id: "files",
     name: "OneDrive Files",
     summary: "Drives, files, folders, sharing links, and permissions.",
+    icon: svglIcon("microsoft-onedrive"),
     scopes: ["Files.ReadWrite.All"],
     pathPrefixes: ["/me/drive", "/users/{user-id}/drive", "/drives", "/shares"],
     featured: true,
     id: "excel",
     name: "Excel Workbooks",
     summary: "Workbook tables, worksheets, ranges, charts, and sessions.",
+    icon: svglIcon("microsoft-excel"),
     scopes: ["Files.ReadWrite.All"],
     pathPrefixes: [
       "/me/drive/items/{driveItem-id}/workbook",
     id: "contacts",
     name: "Outlook Contacts",
     summary: "Contacts and contact folders.",
+    icon: svglIcon("microsoft-outlook"),
     scopes: ["Contacts.ReadWrite"],
     pathPrefixes: [
       "/me/contacts",
     id: "tasks",
     name: "To Do Tasks",
     summary: "Task lists, tasks, and checklist items.",
+    icon: svglIcon("microsoft-todo"),
     scopes: ["Tasks.ReadWrite"],
     pathPrefixes: ["/me/todo", "/users/{user-id}/todo"],
     audience: "standard-user",
     id: "teams-chat",
     name: "Teams Chats",
     summary: "Chats, chat messages, installed apps, and members.",
+    icon: svglIcon("microsoft-teams"),
     scopes: ["Chat.ReadWrite"],
     pathPrefixes: ["/me/chats", "/chats"],
     audience: "standard-user",
     id: "sites",
     name: "SharePoint Sites",
     summary: "Sites, lists, pages, and columns.",
+    icon: svglIcon("microsoft-sharepoint"),
     scopes: ["Sites.ReadWrite.All"],
     pathPrefixes: ["/sites"],
     audience: "admin",
     id: "users",
     name: "Directory Users",
     summary: "Users, managers, app role assignments, and directory metadata.",
+    icon: svglIcon("microsoft"),
     scopes: ["User.ReadWrite.All", "Directory.Read.All"],
     pathPrefixes: ["/users"],
     audience: "admin",