Add new navigation for Installed Extensions page

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 { 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 from "react";
+
+interface AddExtensionDropdownProps {
+  testId?: string;
+}
+
+export const AddExtensionDropdown: React.FC<AddExtensionDropdownProps> = ({
+  testId = "add-extension-button",
+}) => {
+  const navigate = useNavigator();
+  const { enabled: isExtensionsDevEnabled } = useFlag("extensions_dev");
+  const { hasManagedAppsPermission } = useHasManagedAppsPermission();
+
+  const navigateToAppInstallPage = () => {
+    navigate(ExtensionsUrls.installCustomExtensionUrl());
+  };
+
+  const addExtensionOptions = [
+    {
+      label: "Explore",
+      testId: "explore-extensions",
+      onSelect: () => navigate(ExtensionsUrls.resolveExploreExtensionsUrl()),
+    },
+    {
+      label: "Install from manifest",
+      testId: "install-custom-extension",
+      onSelect: () => navigate(ExtensionsUrls.installCustomExtensionUrl()),
+    },
+    {
+      label: "Provide details manually",
+      testId: "add-custom-extension",
+      onSelect: () => navigate(ExtensionsUrls.addCustomExtensionUrl()),
+    },
+  ];
+
+  if (!isExtensionsDevEnabled) {
+    // Display old navigation
+    return (
+      <>
+        <RequestExtensionsButton />
+        {hasManagedAppsPermission && (
+          <InstallWithManifestFormButton onSubmitted={navigateToAppInstallPage} />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <ButtonWithDropdown
+      variant="primary"
+      icon={<PlusIcon />}
+      options={addExtensionOptions}
+      testId={testId}
+    >
+      Add Extension
+    </ButtonWithDropdown>
+  );
+};

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

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