Migrate app install view to new-apps (#3240)

src/apps/index.tsx

@@ -6,22 +6,9 @@ import { useIntl } from "react-intl";
 import { Route, RouteComponentProps, Switch } from "react-router-dom";
 
 import { WindowTitle } from "../components/WindowTitle";
-import {
+import { AppListUrlQueryParams, appsListPath } from "./urls";
-  appInstallPath,
-  AppInstallUrlQueryParams,
-  AppListUrlQueryParams,
-  appsListPath,
-} from "./urls";
-import AppInstallView from "./views/AppInstall";
 import AppsListView from "./views/AppsList";
 
-const AppInstall: React.FC<RouteComponentProps> = props => {
-  const qs = parseQs(location.search.substr(1));
-  const params: AppInstallUrlQueryParams = qs;
-
-  return <AppInstallView params={params} {...props} />;
-};
-
 const AppsList: React.FC<RouteComponentProps> = () => {
   const qs = parseQs(location.search.substr(1));
   const params: AppListUrlQueryParams = qs;
@@ -36,7 +23,6 @@ const Component = () => {
       <WindowTitle title={intl.formatMessage(sectionNames.apps)} />
       <Switch>
         <Route exact path={appsListPath} component={AppsList} />
-        <Route exact path={appInstallPath} component={AppInstall} />
         <WebhooksRoutes />
       </Switch>
     </>

src/apps/messages.ts

@@ -1,19 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const appMessages = defineMessages({
-  failedToFetchAppSettings: {
-    id: "ac+Y98",
-    defaultMessage: "Failed to fetch app settings",
-    description: "app settings error",
-  },
-  appActivated: {
-    id: "D/+84n",
-    defaultMessage: "App activated",
-    description: "snackbar text",
-  },
-  appDeactivated: {
-    id: "USO8PB",
-    defaultMessage: "App deactivated",
-    description: "snackbar text",
-  },
-});

src/apps/views/AppsList/AppsList.tsx

@@ -25,9 +25,9 @@ import { mapEdgesToItems } from "@dashboard/utils/maps";
 import React, { useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 
+import { EXTENSION_LIST_QUERY } from "../../../new-apps/queries";
 import AppInProgressDeleteDialog from "../../components/AppInProgressDeleteDialog";
 import AppsListPage from "../../components/AppsListPage";
-import { EXTENSION_LIST_QUERY } from "../../queries";
 import {
   appDetailsUrl,
   AppListUrlDialog,

src/custom-apps/views/CustomAppDetails/CustomAppDetails.tsx

@@ -1,4 +1,3 @@
-import { appMessages } from "@dashboard/apps/messages";
 import NotFoundPage from "@dashboard/components/NotFoundPage";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import { getApiUrl } from "@dashboard/config";
@@ -26,6 +25,7 @@ import { commonMessages } from "@dashboard/intl";
 import { extractMutationErrors, getStringOrPlaceholder } from "@dashboard/misc";
 import AppActivateDialog from "@dashboard/new-apps/components/AppActivateDialog";
 import AppDeactivateDialog from "@dashboard/new-apps/components/AppDeactivateDialog";
+import { appMessages } from "@dashboard/new-apps/messages";
 import getAppErrorMessage from "@dashboard/utils/errors/app";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import React from "react";

src/custom-apps/views/CustomAppList.tsx

@@ -1,5 +1,4 @@
 import { useApolloClient } from "@apollo/client";
-import { EXTENSION_LIST_QUERY } from "@dashboard/apps/queries";
 import { WindowTitle } from "@dashboard/components/WindowTitle";
 import {
   AppSortField,
@@ -13,6 +12,7 @@ import useNotifier from "@dashboard/hooks/useNotifier";
 import { sectionNames } from "@dashboard/intl";
 import { findById } from "@dashboard/misc";
 import AppDeleteDialog from "@dashboard/new-apps/components/AppDeleteDialog";
+import { EXTENSION_LIST_QUERY } from "@dashboard/new-apps/queries";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import React from "react";

src/graphql/types.generated.ts

@@ -6741,115 +6741,6 @@ export enum WeightUnitsEnum {
   TONNE = 'TONNE'
 }
 
-export type AppCreateMutationVariables = Exact<{
-  input: AppInput;
-}>;
-
-
-export type AppCreateMutation = { __typename: 'Mutation', appCreate: { __typename: 'AppCreate', authToken: string | null, app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppDeleteMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppDeleteMutation = { __typename: 'Mutation', appDelete: { __typename: 'AppDelete', app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppDeleteFailedInstallationMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppDeleteFailedInstallationMutation = { __typename: 'Mutation', appDeleteFailedInstallation: { __typename: 'AppDeleteFailedInstallation', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, message: string | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppFetchMutationVariables = Exact<{
-  manifestUrl: Scalars['String'];
-}>;
-
-
-export type AppFetchMutation = { __typename: 'Mutation', appFetchManifest: { __typename: 'AppFetchManifest', manifest: { __typename: 'Manifest', identifier: string, version: string, about: string | null, name: string, appUrl: string | null, configurationUrl: string | null, tokenTargetUrl: string | null, dataPrivacy: string | null, dataPrivacyUrl: string | null, homepageUrl: string | null, supportUrl: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppInstallMutationVariables = Exact<{
-  input: AppInstallInput;
-}>;
-
-
-export type AppInstallMutation = { __typename: 'Mutation', appInstall: { __typename: 'AppInstall', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, manifestUrl: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppRetryInstallMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppRetryInstallMutation = { __typename: 'Mutation', appRetryInstall: { __typename: 'AppRetryInstall', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, manifestUrl: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppUpdateMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: AppInput;
-}>;
-
-
-export type AppUpdateMutation = { __typename: 'Mutation', appUpdate: { __typename: 'AppUpdate', app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', message: string | null, permissions: Array<PermissionEnum> | null, field: string | null, code: AppErrorCode }> } | null };
-
-export type AppTokenCreateMutationVariables = Exact<{
-  input: AppTokenInput;
-}>;
-
-
-export type AppTokenCreateMutation = { __typename: 'Mutation', appTokenCreate: { __typename: 'AppTokenCreate', authToken: string | null, appToken: { __typename: 'AppToken', name: string | null, authToken: string | null, id: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppTokenDeleteMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppTokenDeleteMutation = { __typename: 'Mutation', appTokenDelete: { __typename: 'AppTokenDelete', appToken: { __typename: 'AppToken', name: string | null, authToken: string | null, id: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppActivateMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppActivateMutation = { __typename: 'Mutation', appActivate: { __typename: 'AppActivate', errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppDeactivateMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppDeactivateMutation = { __typename: 'Mutation', appDeactivate: { __typename: 'AppDeactivate', errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
-
-export type AppsListQueryVariables = Exact<{
-  before?: InputMaybe<Scalars['String']>;
-  after?: InputMaybe<Scalars['String']>;
-  first?: InputMaybe<Scalars['Int']>;
-  last?: InputMaybe<Scalars['Int']>;
-  sort?: InputMaybe<AppSortingInput>;
-  filter?: InputMaybe<AppFilterInput>;
-}>;
-
-
-export type AppsListQuery = { __typename: 'Query', apps: { __typename: 'AppCountableConnection', totalCount: number | null, pageInfo: { __typename: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null, endCursor: string | null }, edges: Array<{ __typename: 'AppCountableEdge', node: { __typename: 'App', id: string, name: string | null, isActive: boolean | null, type: AppTypeEnum | null, appUrl: string | null, manifestUrl: string | null, version: string | null, permissions: Array<{ __typename: 'Permission', name: string, code: PermissionEnum }> | null } }> } | null };
-
-export type AppsInstallationsQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type AppsInstallationsQuery = { __typename: 'Query', appsInstallations: Array<{ __typename: 'AppInstallation', status: JobStatusEnum, message: string | null, appName: string, manifestUrl: string, id: string }> };
-
-export type AppQueryVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-
-export type AppQuery = { __typename: 'Query', app: { __typename: 'App', aboutApp: string | null, dataPrivacy: string | null, dataPrivacyUrl: string | null, id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null };
-
-export type ExtensionListQueryVariables = Exact<{
-  filter: AppExtensionFilterInput;
-}>;
-
-
-export type ExtensionListQuery = { __typename: 'Query', appExtensions: { __typename: 'AppExtensionCountableConnection', edges: Array<{ __typename: 'AppExtensionCountableEdge', node: { __typename: 'AppExtension', id: string, label: string, url: string, mount: AppExtensionMountEnum, target: AppExtensionTargetEnum, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum }>, app: { __typename: 'App', id: string, appUrl: string | null } } }> } | null };
-
 export type AttributeBulkDeleteMutationVariables = Exact<{
   ids: Array<Scalars['ID']> | Scalars['ID'];
 }>;
@@ -8240,6 +8131,115 @@ export type MenuDetailsQueryVariables = Exact<{
 
 export type MenuDetailsQuery = { __typename: 'Query', menu: { __typename: 'Menu', id: string, name: string, items: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, children: Array<{ __typename: 'MenuItem', id: string, level: number, name: string, url: string | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null, category: { __typename: 'Category', id: string, name: string } | null, collection: { __typename: 'Collection', id: string, name: string } | null, page: { __typename: 'Page', id: string, title: string } | null }> | null } | null };
 
+export type AppCreateMutationVariables = Exact<{
+  input: AppInput;
+}>;
+
+
+export type AppCreateMutation = { __typename: 'Mutation', appCreate: { __typename: 'AppCreate', authToken: string | null, app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppDeleteMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppDeleteMutation = { __typename: 'Mutation', appDelete: { __typename: 'AppDelete', app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppDeleteFailedInstallationMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppDeleteFailedInstallationMutation = { __typename: 'Mutation', appDeleteFailedInstallation: { __typename: 'AppDeleteFailedInstallation', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, message: string | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppFetchMutationVariables = Exact<{
+  manifestUrl: Scalars['String'];
+}>;
+
+
+export type AppFetchMutation = { __typename: 'Mutation', appFetchManifest: { __typename: 'AppFetchManifest', manifest: { __typename: 'Manifest', identifier: string, version: string, about: string | null, name: string, appUrl: string | null, configurationUrl: string | null, tokenTargetUrl: string | null, dataPrivacy: string | null, dataPrivacyUrl: string | null, homepageUrl: string | null, supportUrl: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppInstallMutationVariables = Exact<{
+  input: AppInstallInput;
+}>;
+
+
+export type AppInstallMutation = { __typename: 'Mutation', appInstall: { __typename: 'AppInstall', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, manifestUrl: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppRetryInstallMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppRetryInstallMutation = { __typename: 'Mutation', appRetryInstall: { __typename: 'AppRetryInstall', appInstallation: { __typename: 'AppInstallation', id: string, status: JobStatusEnum, appName: string, manifestUrl: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppUpdateMutationVariables = Exact<{
+  id: Scalars['ID'];
+  input: AppInput;
+}>;
+
+
+export type AppUpdateMutation = { __typename: 'Mutation', appUpdate: { __typename: 'AppUpdate', app: { __typename: 'App', id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null, errors: Array<{ __typename: 'AppError', message: string | null, permissions: Array<PermissionEnum> | null, field: string | null, code: AppErrorCode }> } | null };
+
+export type AppTokenCreateMutationVariables = Exact<{
+  input: AppTokenInput;
+}>;
+
+
+export type AppTokenCreateMutation = { __typename: 'Mutation', appTokenCreate: { __typename: 'AppTokenCreate', authToken: string | null, appToken: { __typename: 'AppToken', name: string | null, authToken: string | null, id: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppTokenDeleteMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppTokenDeleteMutation = { __typename: 'Mutation', appTokenDelete: { __typename: 'AppTokenDelete', appToken: { __typename: 'AppToken', name: string | null, authToken: string | null, id: string } | null, errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppActivateMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppActivateMutation = { __typename: 'Mutation', appActivate: { __typename: 'AppActivate', errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppDeactivateMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppDeactivateMutation = { __typename: 'Mutation', appDeactivate: { __typename: 'AppDeactivate', errors: Array<{ __typename: 'AppError', field: string | null, message: string | null, code: AppErrorCode, permissions: Array<PermissionEnum> | null }> } | null };
+
+export type AppsListQueryVariables = Exact<{
+  before?: InputMaybe<Scalars['String']>;
+  after?: InputMaybe<Scalars['String']>;
+  first?: InputMaybe<Scalars['Int']>;
+  last?: InputMaybe<Scalars['Int']>;
+  sort?: InputMaybe<AppSortingInput>;
+  filter?: InputMaybe<AppFilterInput>;
+}>;
+
+
+export type AppsListQuery = { __typename: 'Query', apps: { __typename: 'AppCountableConnection', totalCount: number | null, pageInfo: { __typename: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null, endCursor: string | null }, edges: Array<{ __typename: 'AppCountableEdge', node: { __typename: 'App', id: string, name: string | null, isActive: boolean | null, type: AppTypeEnum | null, appUrl: string | null, manifestUrl: string | null, version: string | null, permissions: Array<{ __typename: 'Permission', name: string, code: PermissionEnum }> | null } }> } | null };
+
+export type AppsInstallationsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AppsInstallationsQuery = { __typename: 'Query', appsInstallations: Array<{ __typename: 'AppInstallation', status: JobStatusEnum, message: string | null, appName: string, manifestUrl: string, id: string }> };
+
+export type AppQueryVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type AppQuery = { __typename: 'Query', app: { __typename: 'App', aboutApp: string | null, dataPrivacy: string | null, dataPrivacyUrl: string | null, id: string, name: string | null, created: any | null, isActive: boolean | null, type: AppTypeEnum | null, homepageUrl: string | null, appUrl: string | null, manifestUrl: string | null, configurationUrl: string | null, supportUrl: string | null, version: string | null, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum, name: string }> | null, privateMetadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, metadata: Array<{ __typename: 'MetadataItem', key: string, value: string }>, tokens: Array<{ __typename: 'AppToken', authToken: string | null, id: string, name: string | null }> | null, webhooks: Array<{ __typename: 'Webhook', id: string, name: string, isActive: boolean, app: { __typename: 'App', id: string, name: string | null } }> | null } | null };
+
+export type ExtensionListQueryVariables = Exact<{
+  filter: AppExtensionFilterInput;
+}>;
+
+
+export type ExtensionListQuery = { __typename: 'Query', appExtensions: { __typename: 'AppExtensionCountableConnection', edges: Array<{ __typename: 'AppExtensionCountableEdge', node: { __typename: 'AppExtension', id: string, label: string, url: string, mount: AppExtensionMountEnum, target: AppExtensionTargetEnum, accessToken: string | null, permissions: Array<{ __typename: 'Permission', code: PermissionEnum }>, app: { __typename: 'App', id: string, appUrl: string | null } } }> } | null };
+
 export type OrderCancelMutationVariables = Exact<{
   id: Scalars['ID'];
 }>;

src/new-apps/components/AppInstallErrorPage/AppInstallErrorPage.tsx

@@ -5,6 +5,7 @@ import { Grid, Typography } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import messages from "./messages";
 import { useStyles } from "./styles";
 
 interface AppInstallErrorPageProps {
@@ -14,7 +15,7 @@ interface AppInstallErrorPageProps {
 export const AppInstallErrorPage: React.FC<AppInstallErrorPageProps> = ({
   onBack,
 }) => {
-  const classes = useStyles({});
+  const classes = useStyles();
 
   return (
     <Container className={classes.root}>
@@ -24,25 +25,13 @@ export const AppInstallErrorPage: React.FC<AppInstallErrorPageProps> = ({
         </Grid>
         <Grid xs={12} sm={6} item>
           <Typography variant="h3" component="h3">
-            <FormattedMessage
+            <FormattedMessage {...messages.title} />
-              id="WnlZMO"
-              defaultMessage="There’s a problem with app."
-              description="title"
-            />
           </Typography>
           <Typography variant="body2">
-            <FormattedMessage
+            <FormattedMessage {...messages.content} />
-              id="4yRwN+"
-              defaultMessage="Saleor couldn’t fetch crucial information regarding installation. Without those System can’t install the app in your Saleor. Please use the button below to get back to system’s dashboard."
-              description="content"
-            />
           </Typography>
           <Button className={classes.button} variant="primary" onClick={onBack}>
-            <FormattedMessage
+            <FormattedMessage {...messages.backButton} />
-              id="906uUr"
-              defaultMessage="Back to homepage"
-              description="button"
-            />
           </Button>
         </Grid>
       </Grid>

src/new-apps/components/AppInstallErrorPage/messages.ts

@@ -0,0 +1,20 @@
+import { defineMessages } from "react-intl";
+
+export default defineMessages({
+  title: {
+    defaultMessage: "There’s a problem with app.",
+    description: "title",
+    id: "WnlZMO",
+  },
+  content: {
+    defaultMessage:
+      "Saleor couldn’t fetch crucial information regarding installation. Without those System can’t install the app in your Saleor. Please use the button below to get back to system’s dashboard.",
+    description: "content",
+    id: "4yRwN+",
+  },
+  backButton: {
+    defaultMessage: "Back to homepage",
+    description: "button",
+    id: "906uUr",
+  },
+});

src/new-apps/components/AppInstallPage/AppInstallPage.tsx

@@ -19,7 +19,8 @@ import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { useStyles } from "../../styles";
+import messages from "./messages";
+import { useStyles } from "./styles";
 
 export interface AppInstallPageProps {
   data: NonNullable<AppFetchMutation["appFetchManifest"]>["manifest"];
@@ -37,7 +38,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
   onSubmit,
 }) => {
   const intl = useIntl();
-  const classes = useStyles({});
+  const classes = useStyles();
 
   const name = data?.name || "";
 
@@ -52,14 +53,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                 loading ? (
                   <Skeleton />
                 ) : (
-                  intl.formatMessage(
+                  intl.formatMessage(messages.title, { name })
-                    {
-                      id: "Id7C0X",
-                      defaultMessage: `You are about to install {name}`,
-                      description: "section header",
-                    },
-                    { name },
-                  )
                 )
               }
             />
@@ -88,11 +82,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
           <Card>
             {!loading && (
               <CardTitle
-                title={intl.formatMessage({
+                title={intl.formatMessage(messages.permissionsTitle)}
-                  id: "VsGcdP",
-                  defaultMessage: "App permissions",
-                  description: "section header",
-                })}
               />
             )}
             <CardContent>
@@ -102,9 +92,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                 <>
                   <Typography className={classes.installPermissionTitle}>
                     <FormattedMessage
-                      id="BL/Lbk"
+                      {...messages.permissionsInstallDescription}
-                      defaultMessage="Installing this app will give it following permissions:"
-                      description="install app permissions"
                     />
                   </Typography>
                   {!!data?.permissions?.length && (
@@ -121,9 +109,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                     className={classes.installPrivacyText}
                   >
                     <FormattedMessage
-                      id="t1UYU6"
+                      {...messages.permissionsUninstallDescription}
-                      defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
-                      description="install app privacy"
                       values={{ name }}
                     />
                     {!!data?.dataPrivacyUrl && (
@@ -132,11 +118,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                         rel="noopener noreferrer"
                         target="_blank"
                       >
-                        <FormattedMessage
+                        <FormattedMessage {...messages.dataPrivacyLearnMore} />
-                          id="k5lHFp"
-                          defaultMessage="Learn more about data privacy"
-                          description="app data privacy link"
-                        />
                       </a>
                     )}
                   </Typography>
@@ -150,11 +132,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
             <Button variant="primary" onClick={onSubmit}>
-              <FormattedMessage
+              <FormattedMessage {...messages.installButton} />
-                id="PkCmGU"
-                defaultMessage="Install App"
-                description="install button"
-              />
             </Button>
           </Box>
         </Box>

src/new-apps/components/AppInstallPage/messages.ts

@@ -0,0 +1,35 @@
+import { defineMessages } from "react-intl";
+
+export default defineMessages({
+  title: {
+    id: "Id7C0X",
+    defaultMessage: "You are about to install {name}",
+    description: "section header",
+  },
+  permissionsTitle: {
+    id: "VsGcdP",
+    defaultMessage: "App permissions",
+    description: "section header",
+  },
+  permissionsInstallDescription: {
+    id: "BL/Lbk",
+    defaultMessage: "Installing this app will give it following permissions:",
+    description: "install app permissions",
+  },
+  permissionsUninstallDescription: {
+    id: "t1UYU6",
+    defaultMessage:
+      "Uninstalling the app will remove all your customer’s personal data stored by {name}. ",
+    description: "install app privacy",
+  },
+  dataPrivacyLearnMore: {
+    id: "k5lHFp",
+    defaultMessage: "Learn more about data privacy",
+    description: "app data privacy link",
+  },
+  installButton: {
+    id: "PkCmGU",
+    defaultMessage: "Install App",
+    description: "install button",
+  },
+});

src/new-apps/components/AppInstallPage/styles.ts

@@ -0,0 +1,75 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    installAppContainer: {
+      "& > div": {
+        position: "relative",
+      },
+      "& img": {
+        position: "relative",
+      },
+      display: "flex",
+      justifyContent: "space-between",
+      padding: theme.spacing(2, 0),
+      position: "relative",
+      width: theme.spacing(35),
+      "&:before": {
+        backgroundColor: theme.palette.divider,
+        content: "''",
+        height: 2,
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: theme.spacing(30),
+      },
+    },
+    installCard: {
+      display: "flex",
+      justifyContent: "center",
+      position: "relative",
+    },
+    installIcon: {
+      alignItems: "center",
+      backgroundColor: theme.palette.divider,
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: "50%",
+      display: "flex",
+      height: theme.spacing(9),
+      justifyContent: "center",
+      overflow: "hidden",
+      width: theme.spacing(9),
+    },
+    installPermissionTitle: {
+      fontWeight: 500,
+    },
+    installPrivacyText: {
+      "& a": {
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+      },
+      color: theme.palette.text.hint,
+      marginTop: theme.spacing(1),
+    },
+    installSaleorIcon: {
+      backgroundColor:
+        theme.palette.type === "dark"
+          ? theme.palette.saleor.gray.default
+          : theme.palette.saleor.main[1],
+      border: "none",
+    },
+    installSpacer: {
+      margin: theme.spacing(2, 0),
+    },
+    permissionsContainer: {
+      "& li": {
+        "&:last-child": {
+          marginBottom: 0,
+        },
+        marginBottom: theme.spacing(1),
+      },
+      paddingLeft: theme.spacing(2),
+    },
+  }),
+  { name: "AppInstallPage" },
+);

src/new-apps/components/ExternalAppContext/ExternalAppContext.tsx

@@ -1,6 +1,6 @@
-import { appDeepUrl } from "@dashboard/apps/urls";
 import { AppExtensionTargetEnum } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
+import { AppUrls } from "@dashboard/new-apps/urls";
 import React from "react";
 
 import { AppDialog } from "../AppDialog";
@@ -42,9 +42,12 @@ export const useExternalApp = () => {
       setOpen(true);
       setAppData(appData);
     } else {
-      navigate(appDeepUrl(appData.id, appData.src, appData.params), {
+      navigate(
-        resetScroll: true,
+        AppUrls.resolveAppDeepUrl(appData.id, appData.src, appData.params),
-      });
+        {
+          resetScroll: true,
+        },
+      );
     }
   };
 

src/new-apps/components/ExternalAppContext/context.ts

@@ -1,5 +1,5 @@
-import { AppDetailsUrlMountQueryParams } from "@dashboard/apps/urls";
 import { AppExtensionTargetEnum } from "@dashboard/graphql";
+import { AppDetailsUrlMountQueryParams } from "@dashboard/new-apps/urls";
 import React from "react";
 
 export interface AppData {

src/new-apps/hooks/useActiveAppsInstallations.ts

@@ -1,5 +1,4 @@
 import { useApolloClient } from "@apollo/client";
-import { EXTENSION_LIST_QUERY } from "@dashboard/apps/queries";
 import {
   AppInstallationFragment,
   AppsInstallationsQuery,
@@ -8,6 +7,7 @@ import {
   useAppRetryInstallMutation,
 } from "@dashboard/graphql";
 import useLocalStorage from "@dashboard/hooks/useLocalStorage";
+import { EXTENSION_LIST_QUERY } from "@dashboard/new-apps/queries";
 import { useEffect, useRef } from "react";
 
 interface UseActiveAppsInstallations {

src/new-apps/index.tsx

@@ -1,9 +1,9 @@
+import { sectionNames } from "@dashboard/intl";
 import {
   AppDetailsUrlQueryParams,
   AppInstallUrlQueryParams,
-} from "@dashboard/apps/urls";
+} from "@dashboard/new-apps/urls";
-import AppInstallView from "@dashboard/apps/views/AppInstall";
+import AppInstallView from "@dashboard/new-apps/views/AppInstall";
-import { sectionNames } from "@dashboard/intl";
 import { parse as parseQs } from "qs";
 import React from "react";
 import { useIntl } from "react-intl";

src/new-apps/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strictNullChecks": true
-  }
-}

src/new-apps/urls.ts

@@ -54,6 +54,8 @@ export const AppPaths = {
   appListPath: AppSections.appsSection,
   resolveAppPath: (id: string) => urlJoin(AppSections.appsSection, id, "app"),
   resolveAppDetailsPath: (id: string) => urlJoin(AppSections.appsSection, id),
+  resolveAppDeepPath: (id: string, subPath: string) =>
+    urlJoin(AppPaths.resolveAppPath(id), subPath),
   appInstallPath: urlJoin(AppSections.appsSection, "install"),
 };
 
@@ -68,6 +70,14 @@ export const AppUrls = {
     stringifyQs(params),
   resolveAppInstallUrl: (manifestUrl: string) =>
     `${AppPaths.appInstallPath}?manifestUrl=${manifestUrl}`,
+  resolveAppDeepUrl: (
+    id: string,
+    subPath: string,
+    params?: AppDetailsUrlQueryParams,
+  ) =>
+    AppPaths.resolveAppDeepPath(encodeURIComponent(id), subPath) +
+    "?" +
+    stringifyQs(params),
   isAppDeepUrlChange: (appId: string, from: string, to: string) => {
     const appCompletePath = AppPaths.resolveAppPath(encodeURIComponent(appId));
 

src/new-apps/views/AppDetails/AppDetails.tsx

@@ -1,5 +1,4 @@
 import { useApolloClient } from "@apollo/client";
-import { EXTENSION_LIST_QUERY } from "@dashboard/apps/queries";
 import NotFoundPage from "@dashboard/components/NotFoundPage";
 import {
   useAppActivateMutation,
@@ -11,6 +10,7 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import AppDeleteDialog from "@dashboard/new-apps/components/AppDeleteDialog";
 import { appMessages } from "@dashboard/new-apps/messages";
+import { EXTENSION_LIST_QUERY } from "@dashboard/new-apps/queries";
 import getAppErrorMessage from "@dashboard/utils/errors/app";
 import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
 import React from "react";

src/new-apps/views/AppInstall/AppInstall.tsx

@@ -4,23 +4,24 @@ import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import { extractMutationErrors } from "@dashboard/misc";
+import AppInstallErrorPage from "@dashboard/new-apps/components/AppInstallErrorPage";
+import AppInstallPage from "@dashboard/new-apps/components/AppInstallPage";
+import {
+  AppInstallUrlQueryParams,
+  AppUrls,
+  MANIFEST_ATTR,
+} from "@dashboard/new-apps/urls";
 import getAppErrorMessage from "@dashboard/utils/errors/app";
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { RouteComponentProps } from "react-router-dom";
 
-import AppInstallErrorPage from "../../components/AppInstallErrorPage";
-import AppInstallPage from "../../components/AppInstallPage";
-import {
-  AppInstallUrlQueryParams,
-  appsListUrl,
-  MANIFEST_ATTR,
-} from "../../urls";
 import { messages } from "./messages";
 
 interface InstallAppCreateProps extends RouteComponentProps {
   params: AppInstallUrlQueryParams;
 }
+
 export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
   params,
 }) => {
@@ -69,7 +70,7 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
     },
   });
 
-  const navigateToAppsList = () => navigate(appsListUrl());
+  const navigateToAppsList = () => navigate(AppUrls.resolveAppListUrl());
 
   const handleSubmit = () => {
     const manifest = fetchManifestOpts?.data?.appFetchManifest?.manifest;
@@ -92,7 +93,7 @@ export const InstallAppCreate: React.FC<InstallAppCreateProps> = ({
     if (manifestUrl) {
       fetchManifest({ variables: { manifestUrl } });
     } else {
-      navigate(appsListUrl());
+      navigate(AppUrls.resolveAppListUrl());
     }
   }, []);
 

src/new-apps/views/AppView/AppView.tsx

@@ -1,9 +1,9 @@
-import { appMessages } from "@dashboard/apps/messages";
 import NotFoundPage from "@dashboard/components/NotFoundPage";
 import { useAppQuery } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import AppPage from "@dashboard/new-apps/components/AppPage";
+import { appMessages } from "@dashboard/new-apps/messages";
 import { AppPaths, AppUrls } from "@dashboard/new-apps/urls";
 import React, { useCallback } from "react";
 import { useIntl } from "react-intl";

testUtils/mocks/apps.ts

@@ -1,5 +1,5 @@
 import { MockedResponse } from "@apollo/client/testing";
-import { extensionList } from "@dashboard/apps/queries";
+import { extensionList } from "@dashboard/new-apps/queries";
 
 export const appsMocks: MockedResponse[] = [
   {