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 = ({ }) => (