Add dashboard extensions (#1292)

* Fix app embed

* initial setup

* Create ButtonWithSelect component

* Use context

* Use dialog

* Handle app-bridge actions

* Code adjustments, bump packages

* Fix tests

* Fix schema formatting

* Send response

* Use latest package versions

package.json

@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "github:mirumee/macaw-ui#03d63cd",
+    "@saleor/macaw-ui": "^0.2.3",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "apollo": "^2.32.5",
@@ -82,6 +82,7 @@
     "use-react-router": "^1.0.7"
   },
   "devDependencies": {
+    "@apollo/react-testing": "^3.1.4",
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.5.0",
@@ -99,6 +100,7 @@
     "@pollyjs/core": "^5.0.0",
     "@pollyjs/persister-fs": "^5.0.0",
     "@release-it/bumper": "^2.0.0",
+    "@saleor/app-bridge": "^0.1.5",
     "@sentry/webpack-plugin": "^1.14.0",
     "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.1.9",

schema.graphql

@@ -222,6 +222,7 @@ type App implements Node & ObjectWithMetadata {
   appUrl: String
   version: String
   accessToken: String
+  extensions: [AppExtension!]!
 }
 
 type AppActivate {
@@ -289,6 +290,49 @@ enum AppErrorCode {
   OUT_OF_SCOPE_PERMISSION
 }
 
+type AppExtension implements Node {
+  id: ID!
+  app: App!
+  label: String!
+  url: String!
+  view: AppExtensionViewEnum!
+  type: AppExtensionTypeEnum!
+  target: AppExtensionTargetEnum!
+  permissions: [Permission!]!
+  accessToken: String
+}
+
+type AppExtensionCountableConnection {
+  pageInfo: PageInfo!
+  edges: [AppExtensionCountableEdge!]!
+  totalCount: Int
+}
+
+type AppExtensionCountableEdge {
+  node: AppExtension!
+  cursor: String!
+}
+
+input AppExtensionFilterInput {
+  view: AppExtensionViewEnum
+  type: AppExtensionTypeEnum
+  target: AppExtensionTargetEnum
+}
+
+enum AppExtensionTargetEnum {
+  MORE_ACTIONS
+  CREATE
+}
+
+enum AppExtensionTypeEnum {
+  OVERVIEW
+  DETAILS
+}
+
+enum AppExtensionViewEnum {
+  PRODUCT
+}
+
 type AppFetchManifest {
   manifest: Manifest
   appErrors: [AppError!]! @deprecated(reason: "Use errors field instead. This field will be removed in Saleor 4.0.")
@@ -329,6 +373,15 @@ type AppInstallation implements Node & Job {
   message: String
 }
 
+type AppManifestExtension {
+  permissions: [Permission!]!
+  label: String!
+  url: String!
+  view: AppExtensionViewEnum!
+  type: AppExtensionTypeEnum!
+  target: AppExtensionTargetEnum!
+}
+
 type AppRetryInstall {
   appErrors: [AppError!]! @deprecated(reason: "Use errors field instead. This field will be removed in Saleor 4.0.")
   errors: [AppError!]!
@@ -3243,6 +3296,7 @@ type Manifest {
   dataPrivacyUrl: String
   homepageUrl: String
   supportUrl: String
+  extensions: [AppManifestExtension!]!
 }
 
 type Margin {
@@ -3633,7 +3687,7 @@ type Mutation {
   draftOrderCreate(input: DraftOrderCreateInput!): DraftOrderCreate
   draftOrderDelete(id: ID!): DraftOrderDelete
   draftOrderBulkDelete(ids: [ID]!): DraftOrderBulkDelete
-  draftOrderLinesBulkDelete(ids: [ID]!): DraftOrderLinesBulkDelete
+  draftOrderLinesBulkDelete(ids: [ID]!): DraftOrderLinesBulkDelete @deprecated(reason: "DEPRECATED: Will be removed in Saleor 4.0.")
   draftOrderUpdate(id: ID!, input: DraftOrderInput!): DraftOrderUpdate
   orderAddNote(order: ID!, input: OrderAddNoteInput!): OrderAddNote
   orderCancel(id: ID!): OrderCancel
@@ -3655,7 +3709,7 @@ type Mutation {
   orderMarkAsPaid(id: ID!, transactionReference: String): OrderMarkAsPaid
   orderRefund(amount: PositiveDecimal!, id: ID!): OrderRefund
   orderUpdate(id: ID!, input: OrderUpdateInput!): OrderUpdate
-  orderUpdateShipping(order: ID!, input: OrderUpdateShippingInput): OrderUpdateShipping
+  orderUpdateShipping(order: ID!, input: OrderUpdateShippingInput!): OrderUpdateShipping
   orderVoid(id: ID!): OrderVoid
   orderBulkCancel(ids: [ID]!): OrderBulkCancel
   deleteMetadata(id: ID!, keys: [String!]!): DeleteMetadata
@@ -5626,6 +5680,8 @@ type Query {
   appsInstallations: [AppInstallation!]!
   apps(filter: AppFilterInput, sortBy: AppSortingInput, before: String, after: String, first: Int, last: Int): AppCountableConnection
   app(id: ID): App
+  appExtensions(filter: AppExtensionFilterInput, before: String, after: String, first: Int, last: Int): AppExtensionCountableConnection
+  appExtension(id: ID!): AppExtension
   addressValidationRules(countryCode: CountryCode!, countryArea: String, city: String, cityArea: String): AddressValidationData
   address(id: ID!): Address
   customers(filter: CustomerFilterInput, sortBy: UserSortingInput, before: String, after: String, first: Int, last: Int): UserCountableConnection

src/apps/apolloMocks.ts

@@ -0,0 +1,14 @@
+import { MockedResponse } from "@apollo/react-testing";
+
+import { extensionList } from "./queries";
+
+export const mocks: MockedResponse[] = [
+  {
+    request: {
+      query: extensionList
+    },
+    result: {
+      data: []
+    }
+  }
+];

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx

@@ -11,8 +11,8 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { App_app } from "../../types/App";
+import { AppFrame } from "../AppFrame";
 import { useStyles } from "./styles";
-import useAppConfigLoader from "./useAppConfigLoader";
 import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs";
 
 export interface AppDetailsSettingsPageProps {
@@ -34,10 +34,6 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
   const classes = useStyles({});
   const [breadcrumbs, onBreadcrumbClick] = useSettingsBreadcrumbs();
   const { sendThemeToExtension } = useTheme();
-  const frameContainer = useAppConfigLoader(data, backendHost, {
-    onError,
-    onLoad: sendThemeToExtension
-  });
 
   return (
     <Container>
@@ -104,7 +100,17 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
       <Hr />
 
       <CardSpacer />
-      <div ref={frameContainer} className={classes.iframeContainer} />
+      <div className={classes.iframeContainer}>
+        {data && (
+          <AppFrame
+            src={data.configurationUrl}
+            backendHost={backendHost}
+            appToken={data.accessToken}
+            onLoad={sendThemeToExtension}
+            onError={onError}
+          />
+        )}
+      </div>
       <CardSpacer />
     </Container>
   );

src/apps/components/AppDialog/AppDialog.tsx

@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogProps,
+  DialogTitle,
+  IconButton,
+  Typography
+} from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+import React from "react";
+
+import { useStyles } from "./styles";
+
+interface AppDialogProps extends DialogProps {
+  onClose: () => void;
+}
+
+export const AppDialog: React.FC<AppDialogProps> = ({ children, ...props }) => {
+  const classes = useStyles();
+
+  return (
+    <Dialog aria-labelledby="extension app dialog" {...props}>
+      <DialogTitle disableTypography className={classes.header}>
+        <Typography variant="h6" component="h2">
+          {props.title}
+        </Typography>
+        <IconButton color="inherit" onClick={props.onClose} aria-label="close">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent className={classes.content}>{children}</DialogContent>
+    </Dialog>
+  );
+};
+
+export default AppDialog;

src/apps/components/AppDialog/index.ts

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

src/apps/components/AppDialog/styles.ts

@@ -0,0 +1,19 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  () => ({
+    header: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    content: {
+      margin: 0,
+      padding: 0,
+      overflow: "hidden",
+      width: 600,
+      height: 600
+    }
+  }),
+  { name: "AppDialog" }
+);