src/apps refactors batch (#3773)

* Add refactors to apps folder

Remove default exports in apps/views

Rename apps/views components, ensure they have similar convention

Refactor apps indexes files

Rename marketplace mentions to appstore

Rename useMarketplaceApps to useAppstoreApps

Rename some marketplace mentions to appstore

fix test

* Add changeset

.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/apps-routing.tsx

@@ -2,27 +2,29 @@ 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} />
   );
 };
 
@@ -30,38 +32,40 @@ 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/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,8 +213,7 @@ describe("App List verified installed apps util", () => {
         brand: null,
       },
     ];
-    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      [
+    const installableMarketplaceApps: AppstoreApi.ReleasedSaleorApp[] = [
       {
         name: {
           en: "Test app",
@@ -303,8 +302,7 @@ describe("App List verified installable marketplace apps util", () => {
         brand: null,
       },
     ];
-    const installableMarketplaceApps: GetV2SaleorAppsResponse.ReleasedSaleorApp[] =
-      [
+    const installableMarketplaceApps: AppstoreApi.ReleasedSaleorApp[] = [
       {
         name: {
           en: "Test app",

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,3 +1,4 @@
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import * as context from "@dashboard/apps/context";
 import {
   comingSoonApp,
@@ -5,7 +6,6 @@ import {
   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,

src/apps/components/AppListRow/AppListRow.tsx

@@ -1,9 +1,9 @@
 // @ts-strict-ignore
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { useAppListContext } from "@dashboard/apps/context";
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
 import {
   getAppDetails,
-  resolveInstallationOfMarketplaceApp,
+  resolveInstallationOfAppstoreApp,
 } from "@dashboard/apps/utils";
 import { AppInstallationFragment } from "@dashboard/graphql";
 import { Box } from "@saleor/macaw-ui/next";
@@ -16,7 +16,7 @@ import AppListCardIntegrations from "./AppListCardIntegrations";
 import AppListCardLinks from "./AppListCardLinks";
 
 interface AppListRowProps {
-  appPair: GetV2SaleorAppsResponse.SaleorApp[];
+  appPair: AppstoreApi.SaleorApp[];
   appInstallationList?: AppInstallationFragment[];
   navigateToAppInstallPage?: (manifestUrl: string) => void;
   navigateToGithubForkPage?: (githubForkUrl: string) => void;
@@ -34,11 +34,11 @@ const AppListRow: React.FC<AppListRowProps> = ({
   const isSingleApp = appPair.length === 1;
 
   const appDetails = React.useCallback(
-    (app: GetV2SaleorAppsResponse.SaleorApp) =>
+    (app: AppstoreApi.SaleorApp) =>
       getAppDetails({
         intl,
         app,
-        appInstallation: resolveInstallationOfMarketplaceApp(
+        appInstallation: resolveInstallationOfAppstoreApp(
           app,
           appInstallationList,
         ),

src/apps/fixtures.ts

@@ -9,7 +9,7 @@ import {
   PermissionEnum,
 } from "@dashboard/graphql";
 
-import { GetV2SaleorAppsResponse } from "./marketplace.types";
+import { AppstoreApi } from "./appstore.types";
 
 export const activeApp: AppListItemFragment = {
   __typename: "App",
@@ -166,7 +166,7 @@ export const appAvatar: AppAvatarFragment = {
   __typename: "App",
 };
 
-export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
+export const releasedApp: AppstoreApi.ReleasedSaleorApp = {
   name: {
     en: "Test released app",
   },
@@ -212,7 +212,7 @@ export const releasedApp: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
   ],
 };
 
-export const comingSoonApp: GetV2SaleorAppsResponse.ComingSoonSaleorApp = {
+export const comingSoonApp: AppstoreApi.ComingSoonSaleorApp = {
   name: {
     en: "Test coming soon app",
   },

src/apps/hooks/useAppstoreApps.test.ts

@@ -2,18 +2,18 @@
 import { renderHook } from "@testing-library/react-hooks";
 
 import { comingSoonApp, releasedApp } from "../fixtures";
-import useMarketplaceApps from "./useMarketplaceApps";
+import useAppstoreApps from "./useAppstoreApps";
 
 const mockApps = [releasedApp, comingSoonApp];
 
 global.fetch = jest.fn(url => {
-  if (url === "https://marketplace.com/apps") {
+  if (url === "https://apps.saleor.io/apps") {
     return Promise.resolve({
       ok: true,
       json: jest.fn(() => Promise.resolve(mockApps)),
     } as unknown as Response);
   }
-  if (url === "https://marketplace.com/failing-apps-endpoint") {
+  if (url === "https://apps.saleor.io/failing-apps-endpoint") {
     return Promise.resolve({
       ok: false,
       statusText: "API error",
@@ -22,14 +22,14 @@ global.fetch = jest.fn(url => {
   return Promise.reject(new Error("API is down"));
 });
 
-describe("apps hooks useMarketplaceApps", () => {
-  it("should return apps when request to proper marketplace url returns apps", async () => {
+describe("apps hooks useAppstoreApps", () => {
+  it("should return apps when request to proper appstore url returns apps", async () => {
     // Arrange
-    const marketplaceUrl = "https://marketplace.com/apps";
+    const appstoreUrl = "https://apps.saleor.io/apps";
 
     // Act
     const { result, waitForNextUpdate } = renderHook(() =>
-      useMarketplaceApps(marketplaceUrl),
+      useAppstoreApps(appstoreUrl),
     );
     await waitForNextUpdate();
 
@@ -37,13 +37,13 @@ describe("apps hooks useMarketplaceApps", () => {
     expect(result.current).toEqual({ data: mockApps });
   });
 
-  it("should return error when request to proper marketplace url returns error", async () => {
+  it("should return error when request to proper appstore url returns error", async () => {
     // Arrange
-    const marketplaceUrl = "https://marketplace.com/failing-apps-endpoint";
+    const appstoreUrl = "https://apps.saleor.io/failing-apps-endpoint";
 
     // Act
     const { result, waitForNextUpdate } = renderHook(() =>
-      useMarketplaceApps(marketplaceUrl),
+      useAppstoreApps(appstoreUrl),
     );
     await waitForNextUpdate();
 
@@ -51,13 +51,13 @@ describe("apps hooks useMarketplaceApps", () => {
     expect(result.current).toEqual({ error: Error("API error") });
   });
 
-  it("should return error when request to wrong marketplace url fails", async () => {
+  it("should return error when request to wrong appstore url fails", async () => {
     // Arrange
-    const marketplaceUrl = "https://wrong-marketplace.com";
+    const appstoreUrl = "https://wrong-appstore.com";
 
     // Act
     const { result, waitForNextUpdate } = renderHook(() =>
-      useMarketplaceApps(marketplaceUrl),
+      useAppstoreApps(appstoreUrl),
     );
     await waitForNextUpdate();
 

src/apps/hooks/useAppstoreApps.ts

@@ -1,27 +1,22 @@
-import { GetV2SaleorAppsResponse } from "@dashboard/apps/marketplace.types";
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { useEffect, useReducer, useRef } from "react";
 
 interface State {
-  data?: GetV2SaleorAppsResponse.SaleorApp[];
+  data?: AppstoreApi.SaleorApp[];
   error?: Error;
 }
 
 interface Cache {
-  [url: string]: GetV2SaleorAppsResponse.SaleorApp[];
+  [url: string]: AppstoreApi.SaleorApp[];
 }
 
 // discriminated union type
 type Action =
   | { type: "loading" }
-  | { type: "fetched"; payload: GetV2SaleorAppsResponse.SaleorApp[] }
+  | { type: "fetched"; payload: AppstoreApi.SaleorApp[] }
   | { type: "error"; payload: Error };
 
-/**
- * Hook used to fetch apps list available under given marketplace url.
- * @param marketplaceUrl - url from which fetch data with apps list
- * @returns state object containing data with apps list or fetch error
- */
-function useMarketplaceApps(marketplaceUrl?: string): State {
+function useAppstoreApps(appstoreUrl?: string): State {
   const cache = useRef<Cache>({});
 
   // Used to prevent state update if the component is unmounted
@@ -54,7 +49,7 @@ function useMarketplaceApps(marketplaceUrl?: string): State {
 
   useEffect(() => {
     // Do nothing if the url is not given
-    if (!marketplaceUrl) {
+    if (!appstoreUrl) {
       return;
     }
 
@@ -64,20 +59,19 @@ function useMarketplaceApps(marketplaceUrl?: string): State {
       dispatch({ type: "loading" });
 
       // If a cache exists for this url, return it
-      if (cache.current[marketplaceUrl]) {
-        dispatch({ type: "fetched", payload: cache.current[marketplaceUrl] });
+      if (cache.current[appstoreUrl]) {
+        dispatch({ type: "fetched", payload: cache.current[appstoreUrl] });
         return;
       }
 
       try {
-        const response = await fetch(marketplaceUrl);
+        const response = await fetch(appstoreUrl);
         if (!response.ok) {
           throw new Error(response.statusText);
         }
 
-        const data =
-          (await response.json()) as GetV2SaleorAppsResponse.SaleorApp[];
-        cache.current[marketplaceUrl] = data;
+        const data = (await response.json()) as AppstoreApi.SaleorApp[];
+        cache.current[appstoreUrl] = data;
         if (cancelRequest.current) {
           return;
         }
@@ -100,9 +94,9 @@ function useMarketplaceApps(marketplaceUrl?: string): State {
       cancelRequest.current = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [marketplaceUrl]);
+  }, [appstoreUrl]);
 
   return state;
 }
 
-export default useMarketplaceApps;
+export default useAppstoreApps;

src/apps/index.ts

@@ -0,0 +1 @@
+export { AppsSectionRoot } from "./apps-routing";

src/apps/utils.test.ts

@@ -1,16 +1,16 @@
+import { AppstoreApi } from "@dashboard/apps/appstore.types";
 import { AppInstallationFragment, JobStatusEnum } from "@dashboard/graphql";
 import { intlMock } from "@test/intl";
 
 import { appsInProgress, releasedApp } from "./fixtures";
-import { GetV2SaleorAppsResponse } from "./marketplace.types";
-import { getAppDetails, resolveInstallationOfMarketplaceApp } from "./utils";
+import { getAppDetails, resolveInstallationOfAppstoreApp } from "./utils";
 
 type AppDetails = ReturnType<typeof getAppDetails>;
 
 describe("App utils app details", () => {
   it("should return app details when required released app data passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
+    const app: AppstoreApi.ReleasedSaleorApp = {
       name: {
         en: "Test app",
       },
@@ -68,7 +68,7 @@ describe("App utils app details", () => {
 
   it("should return app details when required coming soon app data passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ComingSoonSaleorApp = {
+    const app: AppstoreApi.ComingSoonSaleorApp = {
       name: {
         en: "Test app",
       },
@@ -109,7 +109,7 @@ describe("App utils app details", () => {
 
   it("should return app details when required app pending installation data passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
+    const app: AppstoreApi.ReleasedSaleorApp = {
       name: {
         en: "Test app",
       },
@@ -176,7 +176,7 @@ describe("App utils app details", () => {
 
   it("should return app details when required app failed installation data passed", () => {
     // Arrange
-    const app: GetV2SaleorAppsResponse.ReleasedSaleorApp = {
+    const app: AppstoreApi.ReleasedSaleorApp = {
       name: {
         en: "Test app",
       },
@@ -259,7 +259,7 @@ describe("App utils app details", () => {
       ];
 
       // Act
-      const installation = resolveInstallationOfMarketplaceApp(
+      const installation = resolveInstallationOfAppstoreApp(
         releasedApp,
         appInstallationList,
       );

src/apps/utils.ts

@@ -3,40 +3,36 @@ import { getAppsConfig } from "@dashboard/config";
 import { AppInstallationFragment, JobStatusEnum } from "@dashboard/graphql";
 import { IntlShape } from "react-intl";
 
-import { GetV2SaleorAppsResponse } from "./marketplace.types";
+import { AppstoreApi } from "./appstore.types";
 import { appsMessages } from "./messages";
 import { AppLink } from "./types";
 
-const getInstallableMarketplaceApps = (
-  marketplaceAppList?: GetV2SaleorAppsResponse.SaleorApp[],
+const getInstallableAppstoreApps = (
+  appstoreAppList?: AppstoreApi.SaleorApp[],
 ) =>
-  marketplaceAppList?.filter(
+  appstoreAppList?.filter(
     app => "manifestUrl" in app || "githubForkUrl" in app,
-  ) as GetV2SaleorAppsResponse.ReleasedSaleorApp[] | undefined;
+  ) as AppstoreApi.ReleasedSaleorApp[] | undefined;
 
-const getComingSoonMarketplaceApps = (
-  marketplaceAppList?: GetV2SaleorAppsResponse.SaleorApp[],
-) =>
-  marketplaceAppList?.filter(
+const getComingSoonAppstoreApps = (appstoreAppList?: AppstoreApi.SaleorApp[]) =>
+  appstoreAppList?.filter(
     app =>
       !("manifestUrl" in app) &&
       !("githubForkUrl" in app) &&
       "releaseDate" in app,
-  ) as GetV2SaleorAppsResponse.ComingSoonSaleorApp[] | undefined;
+  ) as AppstoreApi.ComingSoonSaleorApp[] | undefined;
 
-const getAppManifestUrl = (
-  marketplaceApp: GetV2SaleorAppsResponse.SaleorApp,
-) => {
-  if ("manifestUrl" in marketplaceApp) {
-    return marketplaceApp.manifestUrl;
+const getAppManifestUrl = (appstoreApp: AppstoreApi.SaleorApp) => {
+  if ("manifestUrl" in appstoreApp) {
+    return appstoreApp.manifestUrl;
   }
 };
 
-export const resolveInstallationOfMarketplaceApp = (
-  marketplaceApp: GetV2SaleorAppsResponse.SaleorApp,
+export const resolveInstallationOfAppstoreApp = (
+  appstoreApp: AppstoreApi.SaleorApp,
   appInstallations?: AppInstallationFragment[],
 ) => {
-  const manifestUrl = getAppManifestUrl(marketplaceApp);
+  const manifestUrl = getAppManifestUrl(appstoreApp);
 
   if (manifestUrl) {
     return appInstallations?.find(
@@ -45,11 +41,11 @@ export const resolveInstallationOfMarketplaceApp = (
   }
 };
 
-export const getMarketplaceAppsLists = (
-  isMarketplaceAvailable: boolean,
-  marketplaceAppList?: GetV2SaleorAppsResponse.SaleorApp[],
+export const getAppstoreAppsLists = (
+  isAppstoreAvailable: boolean,
+  appstoreAppList?: AppstoreApi.SaleorApp[],
 ) => {
-  if (!isMarketplaceAvailable) {
+  if (!isAppstoreAvailable) {
     return {
       installableMarketplaceApps: [],
       comingSoonMarketplaceApps: [],
@@ -57,9 +53,8 @@ export const getMarketplaceAppsLists = (
   }
 
   return {
-    installableMarketplaceApps:
-      getInstallableMarketplaceApps(marketplaceAppList),
-    comingSoonMarketplaceApps: getComingSoonMarketplaceApps(marketplaceAppList),
+    installableMarketplaceApps: getInstallableAppstoreApps(appstoreAppList),
+    comingSoonMarketplaceApps: getComingSoonAppstoreApps(appstoreAppList),
   };
 };
 
@@ -72,7 +67,7 @@ export const isAppInTunnel = (manifestUrl: string) =>
 
 const prepareAppLinks = (
   intl: IntlShape,
-  app: GetV2SaleorAppsResponse.ReleasedSaleorApp,
+  app: AppstoreApi.ReleasedSaleorApp,
 ): AppLink[] => [
   {
     name: intl.formatMessage(appsMessages.repository),
@@ -90,7 +85,7 @@ const prepareAppLinks = (
 
 interface GetAppDetailsOpts {
   intl: IntlShape;
-  app: GetV2SaleorAppsResponse.SaleorApp;
+  app: AppstoreApi.SaleorApp;
   appInstallation?: AppInstallationFragment;
   navigateToAppInstallPage?: (url: string) => void;
   navigateToGithubForkPage?: (url?: string) => void;

src/apps/views/AppDetails/index.ts

@@ -1,2 +0,0 @@
-export * from "./AppDetails";
-export { default } from "./AppDetails";

src/apps/views/AppInstall/index.ts

@@ -1,2 +0,0 @@
-export * from "./AppInstall";
-export { default } from "./AppInstall";

src/apps/views/AppInstallView/AppInstallView.tsx

@@ -18,13 +18,11 @@ import { RouteComponentProps } from "react-router-dom";
 
 import { messages } from "./messages";
 
-interface InstallAppCreateProps extends RouteComponentProps {
+interface Props extends RouteComponentProps {
   params: AppInstallUrlQueryParams;
 }
 
-export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
-  params,
-}) => {
+export const AppInstallView: React.FC<Props> = ({ params }) => {
   const [, setActiveInstallations] = useLocalStorage<
     Array<Record<"id" | "name", string>>
   >("activeInstallations", []);
@@ -114,5 +112,3 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
     </>
   );
 };
-
-export default InstallAppCreate;

src/apps/views/AppInstallView/index.ts

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

src/apps/views/AppList/index.ts

@@ -1,2 +0,0 @@
-export * from "./AppList";
-export { default } from "./AppList";

src/apps/views/AppListView/AppListView.tsx

@@ -2,7 +2,7 @@ import AppInProgressDeleteDialog from "@dashboard/apps/components/AppInProgressD
 import AppListPage from "@dashboard/apps/components/AppListPage/AppListPage";
 import { AppListContext, AppListContextValues } from "@dashboard/apps/context";
 import useActiveAppsInstallations from "@dashboard/apps/hooks/useActiveAppsInstallations";
-import useMarketplaceApps from "@dashboard/apps/hooks/useMarketplaceApps";
+import useAppstoreApps from "@dashboard/apps/hooks/useAppstoreApps";
 import {
   AppListUrlDialog,
   AppListUrlQueryParams,
@@ -10,7 +10,7 @@ import {
 } from "@dashboard/apps/urls";
 import {
   getAppInProgressName,
-  getMarketplaceAppsLists,
+  getAppstoreAppsLists,
 } from "@dashboard/apps/utils";
 import { getAppsConfig } from "@dashboard/config";
 import {
@@ -36,11 +36,11 @@ import { useIntl } from "react-intl";
 
 import { messages } from "./messages";
 
-interface AppsListProps {
+interface Props {
   params: AppListUrlQueryParams;
 }
 
-export const AppsList: React.FC<AppsListProps> = ({ params }) => {
+export const AppListView: React.FC<Props> = ({ params }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
@@ -139,12 +139,12 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
     [navigate, openModal],
   );
 
-  const { data: marketplaceAppList, error } = useMarketplaceApps(
+  const { data: marketplaceAppList, error } = useAppstoreApps(
     AppsConfig.marketplaceApiUri,
   );
 
   const { installableMarketplaceApps, comingSoonMarketplaceApps } =
-    getMarketplaceAppsLists(!!AppsConfig.marketplaceApiUri, marketplaceAppList);
+    getAppstoreAppsLists(!!AppsConfig.marketplaceApiUri, marketplaceAppList);
   const appsInstallations = appsInProgressData?.appsInstallations;
   const installedApps = mapEdgesToItems(installedAppsData?.apps);
 
@@ -175,4 +175,3 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
     </AppListContext.Provider>
   );
 };
-export default AppsList;

src/apps/views/AppListView/index.ts

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

src/apps/views/AppManageView/AppManageView.tsx

@@ -27,12 +27,12 @@ import {
 } from "../../urls";
 import { messages } from "./messages";
 
-interface AppDetailsProps {
+interface Props {
   id: string;
   params: AppDetailsUrlQueryParams;
 }
 
-export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
+export const AppManageView: React.FC<Props> = ({ id, params }) => {
   const client = useApolloClient();
   const { data, loading, refetch } = useAppQuery({
     displayLoader: true,
@@ -161,5 +161,3 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
     </>
   );
 };
-
-export default AppDetails;

src/apps/views/AppManageView/index.ts

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

src/apps/views/AppView/AppView.tsx

@@ -58,4 +58,3 @@ export const AppView: React.FC<AppProps> = ({ id }) => {
     />
   );
 };
-export default AppView;

src/apps/views/AppView/index.ts

@@ -1,2 +1 @@
 export * from "./AppView";
-export { default } from "./AppView";

src/apps/views/index.ts

@@ -0,0 +1,4 @@
+export * from "./AppInstallView";
+export * from "./AppView";
+export * from "./AppListView";
+export * from "./AppManageView";

src/index.tsx

@@ -16,7 +16,7 @@ import TagManager from "react-gtm-module";
 import { useIntl } from "react-intl";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
-import AppsSection from "./apps";
+import { AppsSectionRoot } from "./apps";
 import { ExternalAppProvider } from "./apps/components/ExternalAppContext";
 import { AppSections } from "./apps/urls";
 import AttributeSection from "./attributes";
@@ -286,7 +286,7 @@ const Routes: React.FC = () => {
               <SectionRoute
                 permissions={[PermissionEnum.MANAGE_APPS]}
                 path={AppSections.appsSection}
-                component={AppsSection}
+                component={AppsSectionRoot}
               />
               <SectionRoute
                 permissions={[PermissionEnum.MANAGE_PRODUCTS]}