Extensions install buttons permission check

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<AppListPageProps> = props => {
         )}
       >
         <Box display="flex" gap={4} alignItems="center">
-          {isExtensionsEnabled && (
-            <Button variant="secondary" target="_blank" as="a" href={CONST_TYPEFORM_URL}>
-              {intl.formatMessage(messages.missingExtensionsButton)}
-            </Button>
-          )}
+          {isExtensionsEnabled && <RequestExtensionsButton />}
           {hasManagedAppsPermission && (
             <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
           )}

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",
-  },
 });

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();
   });

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 && (
-        <Link href={AppUrls.resolveAppInstallUrl(manifestUrl)}>
-          <Button variant="secondary">{intl.formatMessage(messages.install)}</Button>
-        </Link>
-      )}
+      {manifestUrl && <AppInstallButton manifestUrl={manifestUrl} />}
       {repositoryUrl && (
         <Link target="_blank" href={repositoryUrl}>
           <Button variant="secondary" display="flex" alignItems="center" gap={2}>

src/extensions/components/ExtenionItem/components/AppInstallButton.tsx

@@ -0,0 +1,50 @@
+import { AppUrls } from "@dashboard/apps/urls";
+import { ButtonWithTooltip } from "@dashboard/components/ButtonWithTooltip";
+import Link from "@dashboard/components/Link";
+import { IS_CLOUD_INSTANCE } from "@dashboard/config";
+import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission";
+import { buttonMessages } from "@dashboard/intl";
+import { Button } from "@saleor/macaw-ui-next";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { messages } from "../../../messages";
+
+export const AppInstallButton = ({ manifestUrl }: { manifestUrl: string }) => {
+  const intl = useIntl();
+  const { hasManagedAppsPermission } = useHasManagedAppsPermission();
+
+  if (!hasManagedAppsPermission) {
+    return (
+      <ButtonWithTooltip
+        variant="primary"
+        disabled
+        tooltip={intl.formatMessage(buttonMessages.noPermission)}
+      >
+        <FormattedMessage {...buttonMessages.install} />
+      </ButtonWithTooltip>
+    );
+  }
+
+  if (IS_CLOUD_INSTANCE) {
+    return (
+      <Link href={AppUrls.resolveAppInstallUrl(manifestUrl)}>
+        <Button variant="primary" data-test-id="app-install-button">
+          <FormattedMessage {...buttonMessages.install} />
+        </Button>
+      </Link>
+    );
+  }
+
+  return (
+    <span tabIndex={0}>
+      <ButtonWithTooltip
+        tooltip={intl.formatMessage(messages.installationCloudOnly)}
+        data-test-id="app-install-button"
+        disabled
+      >
+        <FormattedMessage {...buttonMessages.install} />
+      </ButtonWithTooltip>
+    </span>
+  );
+};

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({

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 (
+    <Button variant="secondary" target="_blank" as="a" href={CONST_TYPEFORM_URL}>
+      {intl.formatMessage(extensionsMessages.missingExtensionsButton)}
+    </Button>
+  );
+};

src/extensions/messages.ts

@@ -104,4 +104,14 @@ export const messages = defineMessages({
     defaultMessage: "Clear search",
     id: "4YJHut",
   },
+  installationCloudOnly: {
+    defaultMessage: "Use Saleor Cloud to access Saleor Apps",
+    description: "description",
+    id: "IEpmGQ",
+  },
+  missingExtensionsButton: {
+    id: "VS0YOp",
+    defaultMessage: "Request Extension",
+    description: "Request extension",
+  },
 });

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 (
     <>
       <TopNav title={intl.formatMessage(headerTitles.exploreExtensions)}>
-        {hasManagedAppsPermission && (
-          <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
-        )}
+        <Box display="flex" gap={4} alignItems="center">
+          <RequestExtensionsButton />
+          {hasManagedAppsPermission && (
+            <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
+          )}
+        </Box>
       </TopNav>
       <Box paddingX={6}>
         <Box __width="370px" marginTop={8} marginBottom={12}>