Add new navigation for Installed Extensions page

locale/defaultMessages.json

@@ -1514,6 +1514,9 @@
     "context": "error message",
     "string": "You don't have permission to login."
   },
+  "7JlauX": {
+    "string": "Explore"
+  },
   "7KRGqz": {
     "context": "Payment card title",
     "string": "Payment balance"

src/extensions/messages.ts

@@ -32,6 +32,10 @@ export const buttonLabels = defineMessages({
     defaultMessage: "Provide details manually",
     id: "+pGERa",
   },
+  explore: {
+    defaultMessage: "Explore",
+    id: "7JlauX",
+  },
   addCustomExtensions: {
     defaultMessage: "Add Custom Extensions",
     id: "u9WrRb",

src/extensions/views/InstalledExtensions/InstalledExtensions.tsx

@@ -1,8 +1,5 @@
-import { InstallWithManifestFormButton } from "@dashboard/apps/components/InstallWithManifestFormButton";
-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 { headerTitles, messages } from "@dashboard/extensions/messages";
 import {
   ExtensionsListUrlDialog,
@@ -14,9 +11,10 @@ import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsP
 import useNavigator from "@dashboard/hooks/useNavigator";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import { Box } from "@saleor/macaw-ui-next";
-import React, { useCallback } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
+import { AddExtensionDropdown } from "./components/AddExtensionDropdown";
 import { DeleteFailedInstallationDialog } from "./components/DeleteFailedInstallationDialog";
 import { InstalledExtensionsList } from "./components/InstalledExtensionsList";
 import { useInstalledExtensions } from "./hooks/useInstalledExtensions";
@@ -31,13 +29,6 @@ export const InstalledExtensions = ({ params }: InstalledExtensionsProps) => {
   const navigate = useNavigator();
   const { hasManagedAppsPermission } = useHasManagedAppsPermission();
 
-  const navigateToAppInstallPage = useCallback(
-    (manifestUrl: string) => {
-      navigate(AppUrls.resolveAppInstallUrl(manifestUrl));
-    },
-    [navigate],
-  );
-
   const [openModal, closeModal] = createDialogActionHandlers<
     ExtensionsListUrlDialog,
     ExtensionsListUrlQueryParams
@@ -68,10 +59,7 @@ export const InstalledExtensions = ({ params }: InstalledExtensionsProps) => {
     <>
       <TopNav title={intl.formatMessage(headerTitles.installedExtensions)}>
         <Box display="flex" gap={4} alignItems="center">
-          <RequestExtensionsButton />
-          {hasManagedAppsPermission && (
-            <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
-          )}
+          {hasManagedAppsPermission && <AddExtensionDropdown />}
         </Box>
       </TopNav>
       <Box paddingX={6}>

src/extensions/views/InstalledExtensions/components/AddExtensionDropdown/AddExtensionDropdown.tsx

@@ -0,0 +1,66 @@
+import { InstallWithManifestFormButton } from "@dashboard/apps/components/InstallWithManifestFormButton";
+import { ButtonWithDropdown } from "@dashboard/components/ButtonWithDropdown";
+import { RequestExtensionsButton } from "@dashboard/extensions/components/RequestExtensionsButton";
+import { buttonLabels } from "@dashboard/extensions/messages";
+import { ExtensionsUrls } from "@dashboard/extensions/urls";
+import { useFlag } from "@dashboard/featureFlags";
+import { useHasManagedAppsPermission } from "@dashboard/hooks/useHasManagedAppsPermission";
+import useNavigator from "@dashboard/hooks/useNavigator";
+import { PlusIcon } from "@saleor/macaw-ui-next";
+import React, { useMemo } from "react";
+import { useIntl } from "react-intl";
+
+export const AddExtensionDropdown = () => {
+  const intl = useIntl();
+  const navigate = useNavigator();
+  const { enabled: isExtensionsDevEnabled } = useFlag("extensions_dev");
+  const { hasManagedAppsPermission } = useHasManagedAppsPermission();
+
+  const navigateToAppInstallPage = () => {
+    navigate(ExtensionsUrls.installCustomExtensionUrl());
+  };
+
+  const addExtensionOptions = useMemo(
+    () => [
+      {
+        label: intl.formatMessage(buttonLabels.explore),
+        testId: "explore-extensions",
+        onSelect: () => navigate(ExtensionsUrls.resolveExploreExtensionsUrl()),
+      },
+      {
+        label: intl.formatMessage(buttonLabels.installFromManifest),
+        testId: "install-custom-extension",
+        onSelect: () => navigate(ExtensionsUrls.installCustomExtensionUrl()),
+      },
+      {
+        label: intl.formatMessage(buttonLabels.installManually),
+        testId: "add-custom-extension",
+        onSelect: () => navigate(ExtensionsUrls.addCustomExtensionUrl()),
+      },
+    ],
+    [intl, navigate],
+  );
+
+  if (!isExtensionsDevEnabled) {
+    // Display old navigation
+    return (
+      <>
+        <RequestExtensionsButton />
+        {hasManagedAppsPermission && (
+          <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <ButtonWithDropdown
+      variant="primary"
+      icon={<PlusIcon />}
+      options={addExtensionOptions}
+      testId="add-extension-button"
+    >
+      Add Extension
+    </ButtonWithDropdown>
+  );
+};

src/extensions/views/InstalledExtensions/components/AddExtensionDropdown/index.ts

@@ -0,0 +1 @@
+export * from "./AddExtensionDropdown";