From 8ba29059a2f42e733cc76d498c058515accd0fae Mon Sep 17 00:00:00 2001 From: Lukasz Ostrowski Date: Thu, 15 Jun 2023 16:06:08 +0200 Subject: [PATCH] Display custom Apps' logos (#3749) * wip * implement logo in all contexts * fix types * Improve icons rendering * Reuse App Header in Manage App page * Remove loading fallback icon for official Saleor apps. It will be fetched with manifest now * Imprve app fallback icon * wip fix tests * Remove useless test * Add sizes for logos queries * Fix thumbnail size --- src/apps/components/AppAvatar/AppAvatar.tsx | 62 +-- .../components/AppDetailsPage/Header.test.tsx | 90 ---- src/apps/components/AppDetailsPage/Header.tsx | 20 +- .../AppDetailsPage/HeaderOptions.tsx | 11 - .../AppInstallPage/AppInstallPage.tsx | 49 +- src/apps/components/AppInstallPage/styles.ts | 18 - src/apps/components/AppListPage/utils.test.ts | 8 +- src/apps/components/AppListPage/utils.ts | 2 - src/apps/components/AppPage/AppPage.tsx | 3 + src/apps/components/AppPage/AppPageNav.tsx | 65 ++- .../InstalledAppList/InstalledAppList.tsx | 10 +- .../components/InstalledAppListRow/styles.ts | 8 +- .../NotInstalledAppListRow/styles.ts | 8 +- src/apps/fixtures.ts | 7 + src/apps/queries.ts | 5 + src/apps/types.ts | 1 - src/apps/utils.test.ts | 3 + src/fragments/apps.ts | 20 + src/graphql/fragmentTypes.generated.ts | 1 + src/graphql/hooks.generated.ts | 25 + src/graphql/typePolicies.generated.ts | 156 +++++- src/graphql/types.generated.ts | 481 ++++++++++++++++-- 22 files changed, 787 insertions(+), 266 deletions(-) delete mode 100644 src/apps/components/AppDetailsPage/Header.test.tsx diff --git a/src/apps/components/AppAvatar/AppAvatar.tsx b/src/apps/components/AppAvatar/AppAvatar.tsx index fb41c66a2..a9daed26a 100644 --- a/src/apps/components/AppAvatar/AppAvatar.tsx +++ b/src/apps/components/AppAvatar/AppAvatar.tsx @@ -2,39 +2,33 @@ import { AppLogo } from "@dashboard/apps/types"; import { Box, GenericAppIcon } from "@saleor/macaw-ui/next"; import React from "react"; -const avatarSize = 8; - export const AppAvatar: React.FC<{ logo?: AppLogo | undefined; -}> = ({ logo }) => { - if (logo?.source) { - return ( - - - - ); - } else { - return ( - - - - ); - } -}; + size?: 8 | 12; +}> = ({ logo, size = 8 }) => + logo ? ( + + + + ) : ( + + + + ); diff --git a/src/apps/components/AppDetailsPage/Header.test.tsx b/src/apps/components/AppDetailsPage/Header.test.tsx deleted file mode 100644 index 64bb86a0c..000000000 --- a/src/apps/components/AppDetailsPage/Header.test.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { appDetails } from "@dashboard/apps/fixtures"; -import { render } from "@testing-library/react"; -import React from "react"; - -import Header from "./Header"; - -const mockHeaderOptions = jest.fn(); -const mockTopNav = jest.fn(); - -jest.mock("@dashboard/components/AppLayout/TopNav", () => ({ - TopNav: props => { - mockTopNav(props); - return <>{props.children}; - }, -})); -jest.mock("../DeactivatedText", () => () => "deactivated"); -jest.mock("react-intl", () => ({ - useIntl: jest.fn(() => ({ - formatMessage: jest.fn(x => x.defaultMessage), - })), - defineMessages: jest.fn(x => x), - FormattedMessage: ({ defaultMessage }) => <>{defaultMessage}, -})); -jest.mock("./HeaderOptions", () => props => { - mockHeaderOptions(props); - return <>; -}); - -beforeEach(() => { - mockHeaderOptions.mockClear(); - mockTopNav.mockClear(); -}); - -describe("Apps AppDetailsPage Header", () => { - it("displays app details options when active app data passed", () => { - // Arrange - const onAppActivateOpen = jest.fn(); - const onAppDeactivateOpen = jest.fn(); - const onAppDeleteOpen = jest.fn(); - - // Act - render( -
, - ); - const title = render(mockTopNav.mock.calls[0][0].title); - - // Assert - expect(mockHeaderOptions).toHaveBeenCalledWith({ - data: appDetails, - onAppActivateOpen, - onAppDeactivateOpen, - onAppDeleteOpen, - }); - expect(mockTopNav).toHaveBeenCalled(); - expect(title.container).toHaveTextContent(appDetails.name as string); - }); - - it("displays app details options when inactive app data passed", () => { - // Arrange - const onAppActivateOpen = jest.fn(); - const onAppDeactivateOpen = jest.fn(); - const onAppDeleteOpen = jest.fn(); - - // Act - render( -
, - ); - const title = render(mockTopNav.mock.calls[0][0].title); - - // Assert - expect(mockHeaderOptions).toHaveBeenCalledWith({ - data: { ...appDetails, isActive: false }, - onAppActivateOpen, - onAppDeactivateOpen, - onAppDeleteOpen, - }); - expect(mockTopNav).toHaveBeenCalled(); - expect(title.container).toHaveTextContent(`${appDetails.name} deactivated`); - }); -}); diff --git a/src/apps/components/AppDetailsPage/Header.tsx b/src/apps/components/AppDetailsPage/Header.tsx index 5530443b5..a145d5045 100644 --- a/src/apps/components/AppDetailsPage/Header.tsx +++ b/src/apps/components/AppDetailsPage/Header.tsx @@ -1,9 +1,8 @@ +import { AppPageNav } from "@dashboard/apps/components/AppPage/AppPageNav"; import { AppUrls } from "@dashboard/apps/urls"; -import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { AppQuery } from "@dashboard/graphql"; import React from "react"; -import DeactivatedText from "../DeactivatedText"; import HeaderOptions from "./HeaderOptions"; interface HeaderProps { @@ -36,14 +35,17 @@ const Header: React.FC = ({ return ( <> - - {data?.name} {!data?.isActive && } - - } + + = ({ return (
- - - - = ({ }) => { const intl = useIntl(); const classes = useStyles(); + const { theme } = useTheme(); + + const getSaleorLogoUrl = () => { + switch (theme) { + case "defaultLight": + return saleorLogoLightMode; + case "defaultDark": + return saleorLogoDarkMode; + default: + throw new Error("Invalid theme mode, should not happen."); + } + }; const name = data?.name || ""; @@ -62,18 +76,27 @@ export const AppInstallPage: React.FC = ({ ) : (
-
- -
+ Saleor + -
- -
+
)} diff --git a/src/apps/components/AppInstallPage/styles.ts b/src/apps/components/AppInstallPage/styles.ts index 5121d8f8d..b4b798db1 100644 --- a/src/apps/components/AppInstallPage/styles.ts +++ b/src/apps/components/AppInstallPage/styles.ts @@ -29,17 +29,6 @@ export const useStyles = makeStyles( justifyContent: "center", position: "relative", }, - installIcon: { - alignItems: "center", - backgroundColor: theme.palette.divider, - border: `1px solid ${theme.palette.divider}`, - borderRadius: "50%", - display: "flex", - height: theme.spacing(9), - justifyContent: "center", - overflow: "hidden", - width: theme.spacing(9), - }, installPermissionTitle: { fontWeight: 500, }, @@ -51,13 +40,6 @@ export const useStyles = makeStyles( color: theme.palette.text.hint, marginTop: theme.spacing(1), }, - installSaleorIcon: { - backgroundColor: - theme.palette.type === "dark" - ? theme.palette.saleor.gray.default - : theme.palette.saleor.main[1], - border: "none", - }, installSpacer: { margin: theme.spacing(2, 0), }, diff --git a/src/apps/components/AppListPage/utils.test.ts b/src/apps/components/AppListPage/utils.test.ts index 6cc67656d..2946981c3 100644 --- a/src/apps/components/AppListPage/utils.test.ts +++ b/src/apps/components/AppListPage/utils.test.ts @@ -187,6 +187,7 @@ describe("App List verified installed apps util", () => { name: "Manage customers.", }, ], + brand: null, }, { __typename: "App", @@ -209,6 +210,7 @@ describe("App List verified installed apps util", () => { name: "Manage customers.", }, ], + brand: null, }, ]; const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] = @@ -244,10 +246,6 @@ describe("App List verified installed apps util", () => { { app: installedApps[0], isExternal: false, - logo: { - source: "https://www.example.com/logo", - color: "#000000", - }, }, { app: installedApps[1], @@ -279,6 +277,7 @@ describe("App List verified installable marketplace apps util", () => { name: "Manage customers.", }, ], + brand: null, }, { __typename: "App", @@ -301,6 +300,7 @@ describe("App List verified installable marketplace apps util", () => { name: "Manage customers.", }, ], + brand: null, }, ]; const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] = diff --git a/src/apps/components/AppListPage/utils.ts b/src/apps/components/AppListPage/utils.ts index befdf80f3..af9758cd1 100644 --- a/src/apps/components/AppListPage/utils.ts +++ b/src/apps/components/AppListPage/utils.ts @@ -48,7 +48,6 @@ export const getVerifiedInstalledApps = ( return { app, isExternal: !marketplaceApp, - logo: marketplaceApp?.logo, }; }); @@ -65,7 +64,6 @@ export const getVerifiedAppsInstallations = ( return { appInstallation, isExternal: !marketplaceApp, - logo: marketplaceApp?.logo, }; }); diff --git a/src/apps/components/AppPage/AppPage.tsx b/src/apps/components/AppPage/AppPage.tsx index c8e29dd56..db91d377e 100644 --- a/src/apps/components/AppPage/AppPage.tsx +++ b/src/apps/components/AppPage/AppPage.tsx @@ -1,3 +1,4 @@ +import { AppUrls } from "@dashboard/apps/urls"; import { borderHeight, topBarHeight, @@ -25,11 +26,13 @@ export const AppPage: React.FC = ({ }) => (