From 58a3c26f7ee4b61a374f1b765905e11be1bd0df1 Mon Sep 17 00:00:00 2001 From: Lukasz Ostrowski Date: Tue, 27 Jun 2023 09:29:40 +0200 Subject: [PATCH] `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 | 5 + src/apps/{index.tsx => apps-routing.tsx} | 32 ++--- ...marketplace.types.ts => appstore.types.ts} | 5 +- src/apps/components/AllAppList/AllAppList.tsx | 4 +- src/apps/components/AppListPage/types.ts | 6 +- src/apps/components/AppListPage/utils.test.ts | 114 +++++++++--------- src/apps/components/AppListPage/utils.ts | 15 ++- .../AppListRow/AppListCardDescription.tsx | 4 +- .../AppListRow/AppListCardIntegrations.tsx | 4 +- .../components/AppListRow/AppListRow.test.tsx | 6 +- src/apps/components/AppListRow/AppListRow.tsx | 10 +- src/apps/fixtures.ts | 6 +- ...ceApps.test.ts => useAppstoreApps.test.ts} | 26 ++-- ...eMarketplaceApps.ts => useAppstoreApps.ts} | 32 ++--- src/apps/index.ts | 1 + src/apps/utils.test.ts | 14 +-- src/apps/utils.ts | 49 ++++---- src/apps/views/AppDetails/index.ts | 2 - src/apps/views/AppInstall/index.ts | 2 - .../AppInstallView.tsx} | 8 +- src/apps/views/AppInstallView/index.ts | 1 + .../messages.ts | 0 src/apps/views/AppList/index.ts | 2 - .../AppListView.tsx} | 13 +- src/apps/views/AppListView/index.ts | 1 + .../{AppList => AppListView}/messages.ts | 0 .../AppManageView.tsx} | 6 +- src/apps/views/AppManageView/index.ts | 1 + .../{AppDetails => AppManageView}/messages.ts | 0 src/apps/views/AppView/AppView.tsx | 1 - src/apps/views/AppView/index.ts | 1 - src/apps/views/index.ts | 4 + src/index.tsx | 4 +- 33 files changed, 185 insertions(+), 194 deletions(-) create mode 100644 .changeset/chatty-lamps-worry.md rename src/apps/{index.tsx => apps-routing.tsx} (69%) rename src/apps/{marketplace.types.ts => appstore.types.ts} (88%) rename src/apps/hooks/{useMarketplaceApps.test.ts => useAppstoreApps.test.ts} (58%) rename src/apps/hooks/{useMarketplaceApps.ts => useAppstoreApps.ts} (67%) create mode 100644 src/apps/index.ts delete mode 100644 src/apps/views/AppDetails/index.ts delete mode 100644 src/apps/views/AppInstall/index.ts rename src/apps/views/{AppInstall/AppInstall.tsx => AppInstallView/AppInstallView.tsx} (94%) create mode 100644 src/apps/views/AppInstallView/index.ts rename src/apps/views/{AppInstall => AppInstallView}/messages.ts (100%) delete mode 100644 src/apps/views/AppList/index.ts rename src/apps/views/{AppList/AppList.tsx => AppListView/AppListView.tsx} (93%) create mode 100644 src/apps/views/AppListView/index.ts rename src/apps/views/{AppList => AppListView}/messages.ts (100%) rename src/apps/views/{AppDetails/AppDetails.tsx => AppManageView/AppManageView.tsx} (97%) create mode 100644 src/apps/views/AppManageView/index.ts rename src/apps/views/{AppDetails => AppManageView}/messages.ts (100%) create mode 100644 src/apps/views/index.ts diff --git a/.changeset/chatty-lamps-worry.md b/.changeset/chatty-lamps-worry.md new file mode 100644 index 000000000..34ac5ebd2 --- /dev/null +++ b/.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. diff --git a/src/apps/index.tsx b/src/apps/apps-routing.tsx similarity index 69% rename from src/apps/index.tsx rename to src/apps/apps-routing.tsx index 47aee34e2..6ca16fce7 100644 --- a/src/apps/index.tsx +++ b/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> = ({ +const AppManageRoute: React.FC> = ({ match, }) => { const qs = parseQs(location.search.substr(1)); const params: AppDetailsUrlQueryParams = qs; return ( - + ); }; @@ -30,38 +32,40 @@ const AppViewRoute: React.FC> = ({ match, }) => ; -const AppInstall: React.FC = props => { +const AppInstallRoute: React.FC = props => { const qs = parseQs(location.search.substr(1)); const params: AppInstallUrlQueryParams = qs; return ; }; -const AppList: React.FC = () => { +const AppListRoute: React.FC = () => { const qs = parseQs(location.search.substr(1)); const params: AppListUrlQueryParams = qs; return ; }; -const Apps = () => { +export const AppsSectionRoot = () => { const intl = useIntl(); return ( <> - - + + ); }; - -export default Apps; diff --git a/src/apps/marketplace.types.ts b/src/apps/appstore.types.ts similarity index 88% rename from src/apps/marketplace.types.ts rename to src/apps/appstore.types.ts index 9d291cf1c..983e49dba 100644 --- a/src/apps/marketplace.types.ts +++ b/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; diff --git a/src/apps/components/AllAppList/AllAppList.tsx b/src/apps/components/AllAppList/AllAppList.tsx index 1e25520a9..979c200fb 100644 --- a/src/apps/components/AllAppList/AllAppList.tsx +++ b/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; diff --git a/src/apps/components/AppListPage/types.ts b/src/apps/components/AppListPage/types.ts index e2ab44ee2..b65ffcb69 100644 --- a/src/apps/components/AppListPage/types.ts +++ b/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[]; } diff --git a/src/apps/components/AppListPage/utils.test.ts b/src/apps/components/AppListPage/utils.test.ts index 2946981c3..db78f1143 100644 --- a/src/apps/components/AppListPage/utils.test.ts +++ b/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 = diff --git a/src/apps/components/AppListPage/utils.ts b/src/apps/components/AppListPage/utils.ts index 78005a4e0..1e3d2221e 100644 --- a/src/apps/components/AppListPage/utils.ts +++ b/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), ); diff --git a/src/apps/components/AppListRow/AppListCardDescription.tsx b/src/apps/components/AppListRow/AppListCardDescription.tsx index 8accf6d8b..9ee61fc01 100644 --- a/src/apps/components/AppListRow/AppListCardDescription.tsx +++ b/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 = ({ diff --git a/src/apps/components/AppListRow/AppListCardIntegrations.tsx b/src/apps/components/AppListRow/AppListCardIntegrations.tsx index 32da5c8b0..0d089a70d 100644 --- a/src/apps/components/AppListRow/AppListCardIntegrations.tsx +++ b/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 = ({ diff --git a/src/apps/components/AppListRow/AppListRow.test.tsx b/src/apps/components/AppListRow/AppListRow.test.tsx index b3650760f..1fb9fa2f0 100644 --- a/src/apps/components/AppListRow/AppListRow.test.tsx +++ b/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, diff --git a/src/apps/components/AppListRow/AppListRow.tsx b/src/apps/components/AppListRow/AppListRow.tsx index adf923203..470820175 100644 --- a/src/apps/components/AppListRow/AppListRow.tsx +++ b/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 = ({ const isSingleApp = appPair.length === 1; const appDetails = React.useCallback( - (app: GetV2SaleorAppsResponse.SaleorApp) => + (app: AppstoreApi.SaleorApp) => getAppDetails({ intl, app, - appInstallation: resolveInstallationOfMarketplaceApp( + appInstallation: resolveInstallationOfAppstoreApp( app, appInstallationList, ), diff --git a/src/apps/fixtures.ts b/src/apps/fixtures.ts index c2448646f..60ed509ec 100644 --- a/src/apps/fixtures.ts +++ b/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", }, diff --git a/src/apps/hooks/useMarketplaceApps.test.ts b/src/apps/hooks/useAppstoreApps.test.ts similarity index 58% rename from src/apps/hooks/useMarketplaceApps.test.ts rename to src/apps/hooks/useAppstoreApps.test.ts index 4db325542..5883cae37 100644 --- a/src/apps/hooks/useMarketplaceApps.test.ts +++ b/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(); diff --git a/src/apps/hooks/useMarketplaceApps.ts b/src/apps/hooks/useAppstoreApps.ts similarity index 67% rename from src/apps/hooks/useMarketplaceApps.ts rename to src/apps/hooks/useAppstoreApps.ts index 1d2d362a5..baba29891 100644 --- a/src/apps/hooks/useMarketplaceApps.ts +++ b/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({}); // 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; diff --git a/src/apps/index.ts b/src/apps/index.ts new file mode 100644 index 000000000..bf57126c7 --- /dev/null +++ b/src/apps/index.ts @@ -0,0 +1 @@ +export { AppsSectionRoot } from "./apps-routing"; diff --git a/src/apps/utils.test.ts b/src/apps/utils.test.ts index 59fb6809b..b9a43a45e 100644 --- a/src/apps/utils.test.ts +++ b/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; 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, ); diff --git a/src/apps/utils.ts b/src/apps/utils.ts index edc3e7a5b..8705b5369 100644 --- a/src/apps/utils.ts +++ b/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; diff --git a/src/apps/views/AppDetails/index.ts b/src/apps/views/AppDetails/index.ts deleted file mode 100644 index d320b2453..000000000 --- a/src/apps/views/AppDetails/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./AppDetails"; -export { default } from "./AppDetails"; diff --git a/src/apps/views/AppInstall/index.ts b/src/apps/views/AppInstall/index.ts deleted file mode 100644 index bbf79f50b..000000000 --- a/src/apps/views/AppInstall/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./AppInstall"; -export { default } from "./AppInstall"; diff --git a/src/apps/views/AppInstall/AppInstall.tsx b/src/apps/views/AppInstallView/AppInstallView.tsx similarity index 94% rename from src/apps/views/AppInstall/AppInstall.tsx rename to src/apps/views/AppInstallView/AppInstallView.tsx index 18d11e15a..5620d204a 100644 --- a/src/apps/views/AppInstall/AppInstall.tsx +++ b/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 = ({ - params, -}) => { +export const AppInstallView: React.FC = ({ params }) => { const [, setActiveInstallations] = useLocalStorage< Array> >("activeInstallations", []); @@ -114,5 +112,3 @@ export const InstallAppCreate: React.FC = ({ ); }; - -export default InstallAppCreate; diff --git a/src/apps/views/AppInstallView/index.ts b/src/apps/views/AppInstallView/index.ts new file mode 100644 index 000000000..a7d4beeb5 --- /dev/null +++ b/src/apps/views/AppInstallView/index.ts @@ -0,0 +1 @@ +export * from "./AppInstallView"; diff --git a/src/apps/views/AppInstall/messages.ts b/src/apps/views/AppInstallView/messages.ts similarity index 100% rename from src/apps/views/AppInstall/messages.ts rename to src/apps/views/AppInstallView/messages.ts diff --git a/src/apps/views/AppList/index.ts b/src/apps/views/AppList/index.ts deleted file mode 100644 index e6e983caf..000000000 --- a/src/apps/views/AppList/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./AppList"; -export { default } from "./AppList"; diff --git a/src/apps/views/AppList/AppList.tsx b/src/apps/views/AppListView/AppListView.tsx similarity index 93% rename from src/apps/views/AppList/AppList.tsx rename to src/apps/views/AppListView/AppListView.tsx index f5cba7086..f5294bf87 100644 --- a/src/apps/views/AppList/AppList.tsx +++ b/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 = ({ params }) => { +export const AppListView: React.FC = ({ params }) => { const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); @@ -139,12 +139,12 @@ export const AppsList: React.FC = ({ 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 = ({ params }) => { ); }; -export default AppsList; diff --git a/src/apps/views/AppListView/index.ts b/src/apps/views/AppListView/index.ts new file mode 100644 index 000000000..c917e4636 --- /dev/null +++ b/src/apps/views/AppListView/index.ts @@ -0,0 +1 @@ +export * from "./AppListView"; diff --git a/src/apps/views/AppList/messages.ts b/src/apps/views/AppListView/messages.ts similarity index 100% rename from src/apps/views/AppList/messages.ts rename to src/apps/views/AppListView/messages.ts diff --git a/src/apps/views/AppDetails/AppDetails.tsx b/src/apps/views/AppManageView/AppManageView.tsx similarity index 97% rename from src/apps/views/AppDetails/AppDetails.tsx rename to src/apps/views/AppManageView/AppManageView.tsx index 41338bcd5..c106a0606 100644 --- a/src/apps/views/AppDetails/AppDetails.tsx +++ b/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 = ({ id, params }) => { +export const AppManageView: React.FC = ({ id, params }) => { const client = useApolloClient(); const { data, loading, refetch } = useAppQuery({ displayLoader: true, @@ -161,5 +161,3 @@ export const AppDetails: React.FC = ({ id, params }) => { ); }; - -export default AppDetails; diff --git a/src/apps/views/AppManageView/index.ts b/src/apps/views/AppManageView/index.ts new file mode 100644 index 000000000..b1f59508d --- /dev/null +++ b/src/apps/views/AppManageView/index.ts @@ -0,0 +1 @@ +export * from "./AppManageView"; diff --git a/src/apps/views/AppDetails/messages.ts b/src/apps/views/AppManageView/messages.ts similarity index 100% rename from src/apps/views/AppDetails/messages.ts rename to src/apps/views/AppManageView/messages.ts diff --git a/src/apps/views/AppView/AppView.tsx b/src/apps/views/AppView/AppView.tsx index c1c609268..acc8b35bc 100644 --- a/src/apps/views/AppView/AppView.tsx +++ b/src/apps/views/AppView/AppView.tsx @@ -58,4 +58,3 @@ export const AppView: React.FC = ({ id }) => { /> ); }; -export default AppView; diff --git a/src/apps/views/AppView/index.ts b/src/apps/views/AppView/index.ts index e30ad079b..a7d580c35 100644 --- a/src/apps/views/AppView/index.ts +++ b/src/apps/views/AppView/index.ts @@ -1,2 +1 @@ export * from "./AppView"; -export { default } from "./AppView"; diff --git a/src/apps/views/index.ts b/src/apps/views/index.ts new file mode 100644 index 000000000..7e3589b1b --- /dev/null +++ b/src/apps/views/index.ts @@ -0,0 +1,4 @@ +export * from "./AppInstallView"; +export * from "./AppView"; +export * from "./AppListView"; +export * from "./AppManageView"; diff --git a/src/index.tsx b/src/index.tsx index 45d952328..4344a5268 100644 --- a/src/index.tsx +++ b/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 = () => {