src/apps refactors batch

.changeset/chatty-lamps-worry.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Applied refactors on "apps" module. Renamed some "marketplace" symbols to "appstore". Replaced some "Default" exports to named ones. Didn't introduce any visual or functional changes.

src/apps/index.tsx → src/apps/apps-routing.tsx

@@ -2,66 +2,70 @@ import {
   AppDetailsUrlQueryParams,
   AppInstallUrlQueryParams,
 } from "@dashboard/apps/urls";
-import AppInstallView from "@dashboard/apps/views/AppInstall";
 import { sectionNames } from "@dashboard/intl";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import {
+  AppInstallView,
+  AppListView,
+  AppManageView,
+  AppView,
+} from "src/apps/views";
 
 import { WindowTitle } from "../components/WindowTitle";
 import { AppListUrlQueryParams, AppPaths } from "./urls";
-import AppDetailsView from "./views/AppDetails";
-import AppListView from "./views/AppList";
-import AppView from "./views/AppView";
 
-const AppDetails: React.FC<RouteComponentProps<{ id: string }>> = ({
+const AppManageRoute: 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} />
+    <AppManageView id={decodeURIComponent(match.params.id)} params={params} />
   );
 };
 
 const AppViewRoute: React.FC<RouteComponentProps<{ id: string }>> = ({
   match,
 }) => <AppView id={decodeURIComponent(match.params.id)} />;
 
-const AppInstall: React.FC<RouteComponentProps> = props => {
+const AppInstallRoute: 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 AppListRoute: React.FC<RouteComponentProps> = () => {
   const qs = parseQs(location.search.substr(1));
   const params: AppListUrlQueryParams = qs;
 
   return <AppListView params={params} />;
 };
 
-const Apps = () => {
+export const AppsSectionRoot = () => {
   const intl = useIntl();
 
   return (
     <>
       <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.appListPath} component={AppListRoute} />
+        <Route
+          exact
+          path={AppPaths.appInstallPath}
+          component={AppInstallRoute}
+        />
         <Route
           exact
           path={AppPaths.resolveAppDetailsPath(":id")}
-          component={AppDetails}
+          component={AppManageRoute}
         />
         <Route path={AppPaths.resolveAppPath(":id")} component={AppViewRoute} />
       </Switch>
     </>
   );
 };
-
-export default Apps;

src/apps/marketplace.types.ts → src/apps/appstore.types.ts

@@ -1,5 +1,8 @@
+/**
+ * Interfaces for shapes of data fetched from AppStore API.
+ */
 // eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace GetV2SaleorAppsResponse {
+export namespace AppstoreApi {
   export interface SaleorAppBase {
     name: {
       en: string;

src/apps/components/AllAppList/AllAppList.tsx

@@ -1,4 +1,4 @@
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { AppInstallationFragment } from "@dashboard/graphql";
 import { Skeleton } from "@material-ui/lab";
 import { Box } from "@saleor/macaw-ui/next";
@@ -8,7 +8,7 @@ import React from "react";
 import AppListRow from "../AppListRow";
 
 interface AllAppListProps {
-  appList?: GetV2SaleorAppsResponse.SaleorApp[];
+  appList?: AppstoreApi.SaleorApp[];
   appInstallationList?: AppInstallationFragment[];
   navigateToAppInstallPage?: (manifestUrl: string) => void;
   navigateToGithubForkPage?: (githubForkUrl: string) => void;

src/apps/components/AppListPage/types.ts

@@ -1,4 +1,4 @@
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import {
   AppInstallationFragment,
   AppListItemFragment,
@@ -7,6 +7,6 @@ import {
 export interface AppListPageSections {
   appsInstallations?: AppInstallationFragment[];
   installedApps?: AppListItemFragment[];
-  installableMarketplaceApps?: GetV2SaleorAppsResponse.ReleasedSaleorApp[];
-  comingSoonMarketplaceApps?: GetV2SaleorAppsResponse.ComingSoonSaleorApp[];
+  installableMarketplaceApps?: AppstoreApi.ReleasedSaleorApp[];
+  comingSoonMarketplaceApps?: AppstoreApi.ComingSoonSaleorApp[];
 }

src/apps/components/AppListPage/utils.test.ts

@@ -1,10 +1,10 @@
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import {
   appsInProgress,
   comingSoonApp,
   installedAppsList,
   releasedApp,
 } from "@dashboard/apps/fixtures";
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
 import {
   AppListItemFragment,
   AppTypeEnum,
@@ -213,27 +213,26 @@ describe("App List verified installed apps util", () => {
         brand: null,
       },
     ];
-    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      [
-        {
-          name: {
-            en: "Test app",
-          },
-          description: {
-            en: "Test app description",
-          },
-          logo: {
-            source: "https://www.example.com/logo",
-            color: "#000000",
-          },
-          integrations: [],
-          manifestUrl: "https://www.example.com/manifest",
-          privacyUrl: "https://www.example.com/privacy",
-          supportUrl: "https://www.example.com/support",
-          repositoryUrl: "https://www.example.com/repository",
-          githubForkUrl: "https://www.example.com/repository/fork",
+    const installableMarketplaceApps: AppstoreApi.ReleasedSaleorApp[] = [
+      {
+        name: {
+          en: "Test app",
         },
-      ];
+        description: {
+          en: "Test app description",
+        },
+        logo: {
+          source: "https://www.example.com/logo",
+          color: "#000000",
+        },
+        integrations: [],
+        manifestUrl: "https://www.example.com/manifest",
+        privacyUrl: "https://www.example.com/privacy",
+        supportUrl: "https://www.example.com/support",
+        repositoryUrl: "https://www.example.com/repository",
+        githubForkUrl: "https://www.example.com/repository/fork",
+      },
+    ];
 
     // Act
     const verifiedInstalledApps = getVerifiedInstalledApps(
@@ -303,45 +302,44 @@ describe("App List verified installable marketplace apps util", () => {
         brand: null,
       },
     ];
-    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      [
-        {
-          name: {
-            en: "Test app",
-          },
-          description: {
-            en: "Test app description",
-          },
-          logo: {
-            source: "https://www.example.com/logo",
-            color: "#000000",
-          },
-          integrations: [],
-          manifestUrl: "https://www.example.com/manifest",
-          privacyUrl: "https://www.example.com/privacy",
-          supportUrl: "https://www.example.com/support",
-          repositoryUrl: "https://www.example.com/repository",
-          githubForkUrl: "https://www.example.com/repository/fork",
+    const installableMarketplaceApps: AppstoreApi.ReleasedSaleorApp[] = [
+      {
+        name: {
+          en: "Test app",
         },
-        {
-          name: {
-            en: "Test app",
-          },
-          description: {
-            en: "Test app description",
-          },
-          logo: {
-            source: "https://www.example-2.com/logo",
-            color: "#000000",
-          },
-          integrations: [],
-          manifestUrl: "https://www.example-2.com/manifest",
-          privacyUrl: "https://www.example-2.com/privacy",
-          supportUrl: "https://www.example-2.com/support",
-          repositoryUrl: "https://www.example-2.com/repository",
-          githubForkUrl: "https://www.example-2.com/repository/fork",
+        description: {
+          en: "Test app description",
+        },
+        logo: {
+          source: "https://www.example.com/logo",
+          color: "#000000",
+        },
+        integrations: [],
+        manifestUrl: "https://www.example.com/manifest",
+        privacyUrl: "https://www.example.com/privacy",
+        supportUrl: "https://www.example.com/support",
+        repositoryUrl: "https://www.example.com/repository",
+        githubForkUrl: "https://www.example.com/repository/fork",
+      },
+      {
+        name: {
+          en: "Test app",
+        },
+        description: {
+          en: "Test app description",
         },
-      ];
+        logo: {
+          source: "https://www.example-2.com/logo",
+          color: "#000000",
+        },
+        integrations: [],
+        manifestUrl: "https://www.example-2.com/manifest",
+        privacyUrl: "https://www.example-2.com/privacy",
+        supportUrl: "https://www.example-2.com/support",
+        repositoryUrl: "https://www.example-2.com/repository",
+        githubForkUrl: "https://www.example-2.com/repository/fork",
+      },
+    ];
 
     // Act
     const verifiedInstallableMarketplaceApps =

src/apps/components/AppListPage/utils.ts

@@ -1,5 +1,4 @@
-// @ts-strict-ignore
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { AppInstallation, InstalledApp } from "@dashboard/apps/types";
 import {
   AppInstallationFragment,
@@ -25,7 +24,7 @@ export const resolveSectionsAvailability = ({
 
 const findAppInMarketplace = (
   manifestUrl: string | null,
-  installableMarketplaceApps?: GetV2SaleorAppsResponse.ReleasedSaleorApp[],
+  installableMarketplaceApps?: AppstoreApi.ReleasedSaleorApp[],
 ) => {
   if (!manifestUrl) {
     return undefined;
@@ -38,7 +37,7 @@ const findAppInMarketplace = (
 
 export const getVerifiedInstalledApps = (
   installedApps?: AppListItemFragment[],
-  installableMarketplaceApps?: GetV2SaleorAppsResponse.ReleasedSaleorApp[],
+  installableMarketplaceApps?: AppstoreApi.ReleasedSaleorApp[],
 ): InstalledApp[] | undefined =>
   installedApps?.map(app => {
     const marketplaceApp = findAppInMarketplace(
@@ -54,7 +53,7 @@ export const getVerifiedInstalledApps = (
 
 export const getVerifiedAppsInstallations = (
   appsInstallations?: AppInstallationFragment[],
-  installableMarketplaceApps?: GetV2SaleorAppsResponse.ReleasedSaleorApp[],
+  installableMarketplaceApps?: AppstoreApi.ReleasedSaleorApp[],
 ): AppInstallation[] | undefined =>
   appsInstallations?.map(appInstallation => {
     const marketplaceApp = findAppInMarketplace(
@@ -74,14 +73,14 @@ export const getVerifiedAppsInstallations = (
  * not relying on one page of installed apps list.
  */
 const isAppNotInstalled = (
-  manifestUrl: string,
+  manifestUrl: string | null,
   installedApps?: AppListItemFragment[],
 ) => installedApps?.every(app => app.manifestUrl !== manifestUrl);
 
 export const getVerifiedInstallableMarketplaceApps = (
   installedApps?: AppListItemFragment[],
-  installableMarketplaceApps?: GetV2SaleorAppsResponse.ReleasedSaleorApp[],
-): GetV2SaleorAppsResponse.ReleasedSaleorApp[] | undefined =>
+  installableMarketplaceApps?: AppstoreApi.ReleasedSaleorApp[],
+): AppstoreApi.ReleasedSaleorApp[] | undefined =>
   installableMarketplaceApps?.filter(app =>
     isAppNotInstalled(app.manifestUrl, installedApps),
   );

src/apps/components/AppListRow/AppListCardDescription.tsx

@@ -1,11 +1,11 @@
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 import { AppLogo } from "./AppLogo";
 
 interface AppListCardDescriptionProps {
-  app: GetV2SaleorAppsResponse.SaleorApp;
+  app: AppstoreApi.SaleorApp;
 }
 
 const AppListCardDescription: React.FC<AppListCardDescriptionProps> = ({

src/apps/components/AppListRow/AppListCardIntegrations.tsx

@@ -1,10 +1,10 @@
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { useTheme } from "@saleor/macaw-ui";
 import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 interface AppListCardIntegrationsProps {
-  integrations: GetV2SaleorAppsResponse.SaleorApp["integrations"];
+  integrations: AppstoreApi.SaleorApp["integrations"];
 }
 
 const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({

src/apps/components/AppListRow/AppListRow.test.tsx

@@ -1,11 +1,11 @@
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import * as context from "@dashboard/apps/context";
 import {
   comingSoonApp,
   failedAppInProgress,
   pendingAppInProgress,
   releasedApp,
 } from "@dashboard/apps/fixtures";
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
 import { appInstallationStatusMessages } from "@dashboard/apps/messages";
 import Wrapper from "@test/wrapper";
 import { render, screen, within } from "@testing-library/react";
@@ -127,7 +127,7 @@ describe("Apps AppListRow", () => {
 
   it("displays placeholder initial when no released app logo passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
+    const app: AppstoreApi.ReleasedSaleorApp = {
       ...releasedApp,
       logo: {
         ...releasedApp.logo,
@@ -153,7 +153,7 @@ describe("Apps AppListRow", () => {
 
   it("displays placeholder initial when no coming soon app logo passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ComingSoonSaleorApp = {
+    const app: AppstoreApi.ComingSoonSaleorApp = {
       ...comingSoonApp,
       logo: {
         ...comingSoonApp.logo,