Uncover new apps marketplace (#2993)

* Uncover new apps marketplace

* Update apps marketplace GitHub workflows envs

.github/workflows/deploy-cloud.yaml

@@ -17,13 +17,7 @@ jobs:
       REGION: ${{ github.event.client_payload.region }}
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      # Disable preview when new Marketplace features are in progress.
-      # If marketplace is done till next release this can be easily enabled
-      # MARKETPLACE_URL: "https://apps.saleor.io/"
-      # SALEOR_APPS_PAGE_PATH=saleor-apps
-      # SALEOR_APPS_JSON_PATH=api/saleor-apps
-      # APP_TEMPLATE_GALLERY_PATH=template-gallery
-      # APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
+      APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
       IS_CLOUD_INSTANCE: true
     steps:
       - uses: actions/checkout@v2

.github/workflows/deploy-demo-staging.yaml

@@ -20,13 +20,7 @@ jobs:
       SENTRY_URL_PREFIX: "~/dashboard/static"
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      # Disable preview when new Marketplace features are in progress.
-      # If marketplace is done till next release this can be easily enabled
-      # MARKETPLACE_URL: "https://apps.saleor.io/"
-      # SALEOR_APPS_PAGE_PATH=saleor-apps
-      # SALEOR_APPS_JSON_PATH=api/saleor-apps
-      # APP_TEMPLATE_GALLERY_PATH=template-gallery
-      # APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
+      APPS_MARKETPLACE_API_URI: "https://marketplace-gray.vercel.app/api/v2/saleor-apps"
       ENVIRONMENT: demo-staging
       DEMO_MODE: true
     steps:

.github/workflows/deploy-demo.yaml

@@ -15,13 +15,7 @@ jobs:
       SENTRY_URL_PREFIX: "~/dashboard/static"
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      # Disable preview when new Marketplace features are in progress.
-      # If marketplace is done till next release this can be easily enabled
-      # MARKETPLACE_URL: "https://apps.saleor.io/"
-      # SALEOR_APPS_PAGE_PATH=saleor-apps
-      # SALEOR_APPS_JSON_PATH=api/saleor-apps
-      # APP_TEMPLATE_GALLERY_PATH=template-gallery
-      # APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
+      APPS_MARKETPLACE_API_URI: "https://apps.saleor.io/api/v2/saleor-apps"
       ENVIRONMENT: demo
       DEMO_MODE: true
     steps:

.github/workflows/deploy-staging.yaml

@@ -22,13 +22,7 @@ jobs:
       SENTRY_URL_PREFIX: "~/dashboard/static"
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      # Disable preview when new Marketplace features are in progress.
-      # If marketplace is done till next release this can be easily enabled
-      # MARKETPLACE_URL: "https://apps.saleor.io/"
-      # SALEOR_APPS_PAGE_PATH=saleor-apps
-      # SALEOR_APPS_JSON_PATH=api/saleor-apps
-      # APP_TEMPLATE_GALLERY_PATH=template-gallery
-      # APPS_MARKETPLACE_API_URI: "https://marketplace-gray.vercel.app/api/v2/saleor-apps"
+      APPS_MARKETPLACE_API_URI: "https://marketplace-gray.vercel.app/api/v2/saleor-apps"
       VERSION: ${{ github.event.inputs.git_ref || github.ref_name }}
       IS_CLOUD_INSTANCE: true
     steps:

src/index.tsx

@@ -11,10 +11,8 @@ import TagManager from "react-gtm-module";
 import { useIntl } from "react-intl";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
-import AppsSection from "./apps";
 import { ExternalAppProvider } from "./apps/components/ExternalAppContext";
 import { useLocationState } from "./apps/hooks/useLocationState";
-import { appsSection } from "./apps/urls";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { useUser } from "./auth";
@@ -56,7 +54,7 @@ import MarketplaceSection from "./marketplace";
 import { marketplaceUrl } from "./marketplace/urls";
 import NavigationSection from "./navigation";
 import { navigationSection } from "./navigation/urls";
-import NewAppsSection from "./new-apps";
+import AppsSection from "./new-apps";
 import { AppSections } from "./new-apps/urls";
 import { NotFound } from "./NotFound";
 import OrdersSection from "./orders";
@@ -259,12 +257,8 @@ const Routes: React.FC = () => {
               />
               <SectionRoute
                 permissions={[PermissionEnum.MANAGE_APPS]}
-                path={appsSection}
-                component={AppsSection}
-              />
-              <SectionRoute
                 path={AppSections.appsSection}
-                component={NewAppsSection}
+                component={AppsSection}
               />
               <SectionRoute
                 permissions={[PermissionEnum.MANAGE_APPS]}

src/new-apps/index.tsx

@@ -1,3 +1,10 @@
+import {
+  AppDetailsUrlQueryParams,
+  AppInstallUrlQueryParams,
+} from "@dashboard/apps/urls";
+import AppView from "@dashboard/apps/views/App";
+import AppDetailsView from "@dashboard/apps/views/AppDetails";
+import AppInstallView from "@dashboard/apps/views/AppInstall";
 import { sectionNames } from "@dashboard/intl";
 import { parse as parseQs } from "qs";
 import React from "react";
@@ -8,6 +15,28 @@ import { WindowTitle } from "../components/WindowTitle";
 import { AppListUrlQueryParams, AppPaths } from "./urls";
 import AppListView from "./views/AppList";
 
+const AppDetails: React.FC<RouteComponentProps<{ id: string }>> = ({
+  match,
+}) => {
+  const qs = parseQs(location.search.substr(1));
+  const params: AppDetailsUrlQueryParams = qs;
+
+  return (
+    <AppDetailsView id={decodeURIComponent(match.params.id)} params={params} />
+  );
+};
+
+const App: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => (
+  <AppView id={decodeURIComponent(match.params.id)} />
+);
+
+const AppInstall: React.FC<RouteComponentProps> = props => {
+  const qs = parseQs(location.search.substr(1));
+  const params: AppInstallUrlQueryParams = qs;
+
+  return <AppInstallView params={params} {...props} />;
+};
+
 const AppList: React.FC<RouteComponentProps> = () => {
   const qs = parseQs(location.search.substr(1));
   const params: AppListUrlQueryParams = qs;
@@ -23,6 +52,13 @@ const Apps = () => {
       <WindowTitle title={intl.formatMessage(sectionNames.apps)} />
       <Switch>
         <Route exact path={AppPaths.appListPath} component={AppList} />
+        <Route exact path={AppPaths.appInstallPath} component={AppInstall} />
+        <Route
+          exact
+          path={AppPaths.resolveAppDetailsPath(":id")}
+          component={AppDetails}
+        />
+        <Route path={AppPaths.resolveAppPath(":id")} component={App} />
       </Switch>
     </>
   );

src/new-apps/urls.ts

@@ -8,7 +8,7 @@ export type AppListUrlDialog = "app-installation-remove";
 export type AppListUrlQueryParams = Dialog<AppListUrlDialog> & SingleAction;
 
 export const AppSections = {
-  appsSection: "/new-apps/",
+  appsSection: "/apps/",
 };
 
 export const AppPaths = {