From 7b3792d6fc6e6a89233adc8a9d2261f2917ad4c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Mon, 24 Mar 2025 15:36:31 +0100 Subject: [PATCH 1/3] Add install buttons permission check --- .../ExtenionItem/components/AppActions.tsx | 7 +-- .../components/AppInstallButton.tsx | 50 +++++++++++++++++++ src/extensions/messages.ts | 5 ++ 3 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 src/extensions/components/ExtenionItem/components/AppInstallButton.tsx diff --git a/src/extensions/components/ExtenionItem/components/AppActions.tsx b/src/extensions/components/ExtenionItem/components/AppActions.tsx index 31ea136df51..b14513c841f 100644 --- a/src/extensions/components/ExtenionItem/components/AppActions.tsx +++ b/src/extensions/components/ExtenionItem/components/AppActions.tsx @@ -1,5 +1,6 @@ import { AppUrls } from "@dashboard/apps/urls"; import Link from "@dashboard/components/Link"; +import { AppInstallButton } from "@dashboard/extensions/components/ExtenionItem/components/AppInstallButton"; import { Box, Button, ExternalLinkIcon } from "@saleor/macaw-ui-next"; import React from "react"; import { useIntl } from "react-intl"; @@ -41,11 +42,7 @@ export const AppActions = ({ return ( <> - {manifestUrl && ( - - - - )} + {manifestUrl && } {repositoryUrl && ( + + ); + } + + return ( + + + + + + ); +}; diff --git a/src/extensions/messages.ts b/src/extensions/messages.ts index b6c6ce3587f..92576a2504e 100644 --- a/src/extensions/messages.ts +++ b/src/extensions/messages.ts @@ -88,4 +88,9 @@ export const messages = defineMessages({ defaultMessage: "No extensions API URL provided", id: "gZ1qnD", }, + installationCloudOnly: { + defaultMessage: "Use Saleor Cloud to access Saleor Apps", + description: "description", + id: "IEpmGQ", + }, }); From e98ed959909ca00faf919ef58ce56f2aa6053031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Mon, 24 Mar 2025 15:42:22 +0100 Subject: [PATCH 2/3] Update test --- src/extensions/components/ExtenionItem/ExtensionItem.test.tsx | 2 +- .../components/ExtenionItem/hooks/useExtension.test.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/extensions/components/ExtenionItem/ExtensionItem.test.tsx b/src/extensions/components/ExtenionItem/ExtensionItem.test.tsx index 4a5869e1b41..b3b3e3da02e 100644 --- a/src/extensions/components/ExtenionItem/ExtensionItem.test.tsx +++ b/src/extensions/components/ExtenionItem/ExtensionItem.test.tsx @@ -58,7 +58,7 @@ describe("Extensions / Components / ExtensionItem", () => { expect(screen.getByText("Avatax")).toBeInTheDocument(); expect(screen.getByText("Avatax description")).toBeInTheDocument(); expect(screen.getByText("Developed by {developer}")).toBeInTheDocument(); - expect(screen.getByRole("link", { name: "Install" })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Install" })).toBeInTheDocument(); expect(screen.getByRole("link", { name: "View on GitHub" })).toBeInTheDocument(); expect(screen.queryByText("Installed")).not.toBeInTheDocument(); }); diff --git a/src/extensions/components/ExtenionItem/hooks/useExtension.test.tsx b/src/extensions/components/ExtenionItem/hooks/useExtension.test.tsx index 6320b8e38c7..6136a251750 100644 --- a/src/extensions/components/ExtenionItem/hooks/useExtension.test.tsx +++ b/src/extensions/components/ExtenionItem/hooks/useExtension.test.tsx @@ -125,12 +125,11 @@ describe("Extensions / ExtensionItem / useExtension", () => { render(result.current.actions); - expect(screen.getByRole("link", { name: "Install" })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "Install" })).toBeInTheDocument(); expect(screen.getByRole("link", { name: "View on GitHub" })).toHaveAttribute( "href", "https://example.com/repository", ); - expect(screen.getAllByRole("link").length).toEqual(2); expect(result.current).toEqual( expect.objectContaining({ From 37b41abd3ad8ac01cb4716e0ea71313a49f19f68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= Date: Tue, 25 Mar 2025 10:00:32 +0100 Subject: [PATCH 3/3] Request extensions on explore page --- .../components/AppListPage/AppListPage.tsx | 11 ++++------- src/apps/components/AppListPage/messages.ts | 5 ----- .../components/RequestExtensionsButton.tsx | 18 ++++++++++++++++++ src/extensions/messages.ts | 5 +++++ src/extensions/views/ExploreExtensions.tsx | 10 +++++++--- 5 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 src/extensions/components/RequestExtensionsButton.tsx diff --git a/src/apps/components/AppListPage/AppListPage.tsx b/src/apps/components/AppListPage/AppListPage.tsx index a6d0aaa9a1b..fcfe712453a 100644 --- a/src/apps/components/AppListPage/AppListPage.tsx +++ b/src/apps/components/AppListPage/AppListPage.tsx @@ -1,12 +1,13 @@ import { AppUrls } from "@dashboard/apps/urls"; import { TopNav } from "@dashboard/components/AppLayout/TopNav"; +import { RequestExtensionsButton } from "@dashboard/extensions/components/RequestExtensionsButton"; import { headerTitles } from "@dashboard/extensions/messages"; import { useFlag } from "@dashboard/featureFlags"; import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission"; import useNavigator from "@dashboard/hooks/useNavigator"; import { sectionNames } from "@dashboard/intl"; import { ListProps } from "@dashboard/types"; -import { Box, Button, Skeleton, sprinkles, Text } from "@saleor/macaw-ui-next"; +import { Box, Skeleton, sprinkles, Text } from "@saleor/macaw-ui-next"; import React, { useCallback } from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -15,7 +16,7 @@ import InstalledAppList from "../InstalledAppList"; import { InstallWithManifestFormButton } from "../InstallWithManifestFormButton"; import MarketplaceAlert from "../MarketplaceAlert"; import { messages } from "./messages"; -import { CONST_TYPEFORM_URL, MissingAppsFooter } from "./MissingAppsFooter"; +import { MissingAppsFooter } from "./MissingAppsFooter"; import { useStyles } from "./styles"; import { AppListPageSections } from "./types"; import { @@ -81,11 +82,7 @@ export const AppListPage: React.FC = props => { )} > - {isExtensionsEnabled && ( - - )} + {isExtensionsEnabled && } {hasManagedAppsPermission && ( )} diff --git a/src/apps/components/AppListPage/messages.ts b/src/apps/components/AppListPage/messages.ts index ff59bd874b5..be199f68ae6 100644 --- a/src/apps/components/AppListPage/messages.ts +++ b/src/apps/components/AppListPage/messages.ts @@ -41,9 +41,4 @@ export const messages = defineMessages({ defaultMessage: "Request integration", description: "Request integration", }, - missingExtensionsButton: { - id: "VS0YOp", - defaultMessage: "Request Extension", - description: "Request extension", - }, }); diff --git a/src/extensions/components/RequestExtensionsButton.tsx b/src/extensions/components/RequestExtensionsButton.tsx new file mode 100644 index 00000000000..ee8432b9900 --- /dev/null +++ b/src/extensions/components/RequestExtensionsButton.tsx @@ -0,0 +1,18 @@ +import { MISSING_APPS_TYPEFORM_URL } from "@dashboard/links"; +import { Button } from "@saleor/macaw-ui-next"; +import React from "react"; +import { useIntl } from "react-intl"; + +import { messages as extensionsMessages } from "../messages"; + +export const CONST_TYPEFORM_URL = `${MISSING_APPS_TYPEFORM_URL}?utm_button=${encodeURIComponent("Request integration")}`; + +export const RequestExtensionsButton = () => { + const intl = useIntl(); + + return ( + + ); +}; diff --git a/src/extensions/messages.ts b/src/extensions/messages.ts index a91aed2a9b3..15ccd621ab1 100644 --- a/src/extensions/messages.ts +++ b/src/extensions/messages.ts @@ -109,4 +109,9 @@ export const messages = defineMessages({ description: "description", id: "IEpmGQ", }, + missingExtensionsButton: { + id: "VS0YOp", + defaultMessage: "Request Extension", + description: "Request extension", + }, }); diff --git a/src/extensions/views/ExploreExtensions.tsx b/src/extensions/views/ExploreExtensions.tsx index 9220a865eaf..949d6eeceb5 100644 --- a/src/extensions/views/ExploreExtensions.tsx +++ b/src/extensions/views/ExploreExtensions.tsx @@ -2,6 +2,7 @@ import { InstallWithManifestFormButton } from "@dashboard/apps/components/Instal import { AppUrls } from "@dashboard/apps/urls"; import { TopNav } from "@dashboard/components/AppLayout"; import SearchInput from "@dashboard/components/AppLayout/ListFilters/components/SearchInput"; +import { RequestExtensionsButton } from "@dashboard/extensions/components/RequestExtensionsButton"; import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission"; import useNavigator from "@dashboard/hooks/useNavigator"; import { Box } from "@saleor/macaw-ui-next"; @@ -35,9 +36,12 @@ export const ExploreExtensions = () => { return ( <> - {hasManagedAppsPermission && ( - - )} + + + {hasManagedAppsPermission && ( + + )} +