App adjustments (#1385)

* Use shop domain as backendHost, guard domain changes on cloud instances

* Update messages and snapshots

* Remove unused prop

.github/workflows/deploy-prod.yaml

@@ -25,6 +25,7 @@ jobs:
       ENVIRONMENT: ${{ github.event.inputs.service_name }}
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      IS_CLOUD_INSTANCE: true
     steps:
       - uses: actions/checkout@v2
         with:

.github/workflows/deploy-staging.yaml

@@ -24,6 +24,7 @@ jobs:
       SENTRY_URL_PREFIX: "~/dashboard/static"
       SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      IS_CLOUD_INSTANCE: true
     steps:
       - name: Set env variables
         run: |

.github/workflows/test-env-deploy.yml

@@ -62,6 +62,7 @@ jobs:
           API_URI: ${{ steps.api_uri.outputs.custom_api_uri || 'https://qa.staging.saleor.cloud/graphql/' }}
           APP_MOUNT_URI: /
           STATIC_URL: /
+          IS_CLOUD_INSTANCE: true
         run: |
           npm run build
 

locale/defaultMessages.json

@@ -6726,14 +6726,14 @@
   "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_1008586926": {
     "string": "Name of your store is shown on tab in web browser"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_1987367127": {
-    "string": "Store Description"
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_1170194728": {
+    "string": "Store domain"
   },
   "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_2286355060": {
     "string": "Name of your store"
   },
-  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_3808773492": {
-    "string": "URL of your online store"
+  "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_3868874271": {
+    "string": "Store description"
   },
   "src_dot_siteSettings_dot_components_dot_SiteSettingsDetails_dot_529433178": {
     "string": "Store description is shown on taskbar after your store name"

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.stories.tsx

@@ -8,7 +8,6 @@ import AppDetailsSettingsPage, {
 } from "./AppDetailsSettingsPage";
 
 const props: AppDetailsSettingsPageProps = {
-  backendHost: "host",
   data: appDetails,
   navigateToDashboard: () => undefined,
   onBack: () => undefined,

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx

@@ -5,7 +5,6 @@ import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
-import { useTheme } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -16,7 +15,6 @@ import { useStyles } from "./styles";
 import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs";
 
 export interface AppDetailsSettingsPageProps {
-  backendHost: string;
   data: App_app;
   navigateToDashboard: () => void;
   onBack: () => void;
@@ -24,7 +22,6 @@ export interface AppDetailsSettingsPageProps {
 }
 
 export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
-  backendHost,
   data,
   navigateToDashboard,
   onBack,
@@ -33,7 +30,6 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
   const intl = useIntl();
   const classes = useStyles({});
   const [breadcrumbs, onBreadcrumbClick] = useSettingsBreadcrumbs();
-  const { sendThemeToExtension } = useTheme();
 
   return (
     <Container>
@@ -104,9 +100,7 @@ export const AppDetailsSettingsPage: React.FC<AppDetailsSettingsPageProps> = ({
         {data && (
           <AppFrame
             src={data.configurationUrl}
-            backendHost={backendHost}
             appToken={data.accessToken}
-            onLoad={sendThemeToExtension}
             onError={onError}
           />
         )}

src/apps/components/AppFrame/AppFrame.tsx

@@ -1,3 +1,4 @@
+import useShop from "@saleor/hooks/useShop";
 import { useTheme } from "@saleor/macaw-ui";
 import React from "react";
 import urlJoin from "url-join";
@@ -8,7 +9,6 @@ import { useAppActions } from "./useAppActions";
 interface Props {
   src: string;
   appToken: string;
-  backendHost: string;
   onLoad?(): void;
   onError?(): void;
 }
@@ -18,10 +18,10 @@ const getOrigin = (url: string) => new URL(url).origin;
 export const AppFrame: React.FC<Props> = ({
   src,
   appToken,
-  backendHost,
   onLoad,
   onError
 }) => {
+  const shop = useShop();
   const frameRef = React.useRef<HTMLIFrameElement>();
   const { sendThemeToExtension } = useTheme();
   const classes = useStyles();
@@ -43,10 +43,14 @@ export const AppFrame: React.FC<Props> = ({
     }
   };
 
+  if (!shop?.domain.host) {
+    return null;
+  }
+
   return (
     <iframe
       ref={frameRef}
-      src={urlJoin(src, `?domain=${backendHost}`)}
+      src={urlJoin(src, `?domain=${shop.domain.host}`)}
       onError={onError}
       onLoad={handleLoad}
       className={classes.iframe}

src/apps/components/ExternalAppContext/ExternalAppContext.tsx

@@ -6,7 +6,6 @@ import { AppFrame } from "../AppFrame";
 export interface AppData {
   appToken: string;
   src: string;
-  backendUrl: string;
   label: string;
 }
 
@@ -31,11 +30,7 @@ export const ExternalAppProvider: React.FC = ({ children }) => {
       {children}
       <AppDialog open={open} onClose={handleClose} title={appData?.label}>
         {open && appData && (
-          <AppFrame
-            src={appData.src}
-            appToken={appData.appToken}
-            backendHost={appData.backendUrl}
-          />
+          <AppFrame src={appData.src} appToken={appData.appToken} />
         )}
       </AppDialog>
     </ExternalAppContext.Provider>

src/apps/useExtensions.ts

@@ -30,8 +30,7 @@ const filterAndMapToTarget = (
       accessToken,
       url,
       label,
-      open: () =>
-        openApp({ appToken: accessToken, backendUrl: url, src: url, label })
+      open: () => openApp({ appToken: accessToken, src: url, label })
     }));
 
 export const mapToMenuItems = (extensions: Extension[]) =>

src/apps/views/AppDetailsSettings/AppDetailsSettings.tsx

@@ -1,6 +1,5 @@
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
-import useShop from "@saleor/hooks/useShop";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -15,7 +14,6 @@ interface AppDetailsSetttingsProps {
 export const AppDetailsSettings: React.FC<AppDetailsSetttingsProps> = ({
   id
 }) => {
-  const shop = useShop();
   const { data } = useAppDetails({
     displayLoader: true,
     variables: { id }
@@ -26,7 +24,6 @@ export const AppDetailsSettings: React.FC<AppDetailsSetttingsProps> = ({
 
   return (
     <AppDetailsSettingsPage
-      backendHost={shop?.domain.host}
       data={data?.app}
       navigateToDashboard={() => navigate(appUrl(id))}
       onBack={() => navigate(appsListPath)}

src/config.ts

@@ -6,6 +6,7 @@ export const APP_MOUNT_URI = process.env.APP_MOUNT_URI;
 export const APP_DEFAULT_URI = "/";
 export const API_URI = process.env.API_URI;
 export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL, 0);
+export const IS_CLOUD_INSTANCE = process.env.IS_CLOUD_INSTANCE === "true";
 
 export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = {
   after: null,

src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent, TextField } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
+import { IS_CLOUD_INSTANCE } from "@saleor/config";
 import { ShopErrorFragment } from "@saleor/fragments/types/ShopErrorFragment";
 import { commonMessages } from "@saleor/intl";
 import { getFormErrors } from "@saleor/utils/errors";
@@ -63,12 +64,13 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
           fullWidth
           name="domain"
           label={intl.formatMessage({
-            defaultMessage: "URL of your online store"
+            defaultMessage: "Store domain"
           })}
           helperText={getShopErrorMessage(formErrors.domain, intl)}
           value={data.domain}
           onChange={onChange}
           InputProps={{
+            readOnly: IS_CLOUD_INSTANCE,
             inputProps: {
               autoComplete: "none"
             }
@@ -81,7 +83,7 @@ const SiteSettingsDetails: React.FC<SiteSettingsDetailsProps> = ({
           fullWidth
           name="description"
           label={intl.formatMessage({
-            defaultMessage: "Store Description"
+            defaultMessage: "Store description"
           })}
           helperText={
             getShopErrorMessage(formErrors.description, intl) ||

src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx

@@ -19,7 +19,6 @@ import { mapCountriesToChoices } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { maybe } from "../../../misc";
 import { SiteSettings_shop } from "../../types/SiteSettings";
 import SiteSettingsDetails from "../SiteSettingsDetails/SiteSettingsDetails";
 
@@ -90,7 +89,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
   const [displayCountry, setDisplayCountry] = useStateFromProps(
-    maybe(() => shop.companyAddress.country.code, "")
+    shop?.companyAddress?.country.code || ""
   );
 
   const {
@@ -99,20 +98,20 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
   } = useAddressValidation(onSubmit);
 
   const initialFormAddress: SiteSettingsPageAddressFormData = {
-    city: maybe(() => shop.companyAddress.city, ""),
-    companyName: maybe(() => shop.companyAddress.companyName, ""),
-    country: maybe(() => shop.companyAddress.country.code, ""),
-    countryArea: maybe(() => shop.companyAddress.countryArea, ""),
-    phone: maybe(() => shop.companyAddress.phone, ""),
-    postalCode: maybe(() => shop.companyAddress.postalCode, ""),
-    streetAddress1: maybe(() => shop.companyAddress.streetAddress1, ""),
-    streetAddress2: maybe(() => shop.companyAddress.streetAddress2, "")
+    city: shop?.companyAddress?.city || "",
+    companyName: shop?.companyAddress?.companyName || "",
+    country: shop?.companyAddress?.country.code || "",
+    countryArea: shop?.companyAddress?.countryArea || "",
+    phone: shop?.companyAddress?.phone || "",
+    postalCode: shop?.companyAddress?.postalCode || "",
+    streetAddress1: shop?.companyAddress?.streetAddress1 || "",
+    streetAddress2: shop?.companyAddress?.streetAddress2 || ""
   };
   const initialForm: SiteSettingsPageFormData = {
     ...initialFormAddress,
-    description: maybe(() => shop.description, ""),
-    domain: maybe(() => shop.domain.host, ""),
-    name: maybe(() => shop.name, "")
+    description: shop?.description || "",
+    domain: shop?.domain.host || "",
+    name: shop?.name || ""
   };
 
   return (

src/siteSettings/mutations.ts

@@ -1,3 +1,4 @@
+import { IS_CLOUD_INSTANCE } from "@saleor/config";
 import { fragmentAddress } from "@saleor/fragments/address";
 import { shopErrorFragment } from "@saleor/fragments/errors";
 import { shopFragment } from "@saleor/fragments/shop";
@@ -26,7 +27,7 @@ const shopSettingsUpdate = gql`
         ...ShopFragment
       }
     }
-    shopDomainUpdate(input: $shopDomainInput) {
+    shopDomainUpdate(input: $shopDomainInput) @skip(if: ${IS_CLOUD_INSTANCE}) {
       errors {
         ...ShopErrorFragment
       }

src/siteSettings/views/index.tsx

@@ -28,9 +28,11 @@ export const SiteSettings: React.FC<SiteSettingsProps> = () => {
 
   const handleSiteSettingsSuccess = (data: ShopSettingsUpdate) => {
     if (
-      data.shopDomainUpdate.errors.length === 0 &&
-      data.shopSettingsUpdate.errors.length === 0 &&
-      data.shopAddressUpdate.errors.length === 0
+      [
+        ...data.shopAddressUpdate.errors,
+        ...data.shopSettingsUpdate.errors,
+        ...(data.shopDomainUpdate?.errors || [])
+      ].length === 0
     ) {
       notify({
         status: "success",
@@ -45,7 +47,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = () => {
         <TypedShopSettingsUpdate onCompleted={handleSiteSettingsSuccess}>
           {(updateShopSettings, updateShopSettingsOpts) => {
             const errors = [
-              ...(updateShopSettingsOpts.data?.shopDomainUpdate.errors || []),
+              ...(updateShopSettingsOpts.data?.shopDomainUpdate?.errors || []),
               ...(updateShopSettingsOpts.data?.shopSettingsUpdate.errors || []),
               ...(updateShopSettingsOpts.data?.shopAddressUpdate.errors || [])
             ];
@@ -84,7 +86,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = () => {
 
               return [
                 ...result.data.shopAddressUpdate.errors,
-                ...result.data.shopDomainUpdate.errors,
+                ...(result.data.shopDomainUpdate?.errors || []),
                 ...result.data.shopSettingsUpdate.errors
               ];
             };

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -23505,12 +23505,7 @@ exports[`Storyshots Views / Apps / App details settings default 1`] = `
     />
     <div
       class="AppDetailsSettingsPage-iframeContainer-id"
-    >
-      <iframe
-        class="AppFrame-iframe-id"
-        src="htpp://localhost:8888/configuration?domain=host"
-      />
-    </div>
+    />
     <div
       class="CardSpacer-spacer-id"
     />
@@ -246205,7 +246200,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                 data-shrink="true"
               >
-                URL of your online store
+                Store domain
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -246226,7 +246221,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                   >
                     <span>
-                      URL of your online store
+                      Store domain
                     </span>
                   </legend>
                 </fieldset>
@@ -246242,7 +246237,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
                 data-shrink="true"
               >
-                Store Description
+                Store description
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -246263,7 +246258,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                   >
                     <span>
-                      Store Description
+                      Store description
                     </span>
                   </legend>
                 </fieldset>
@@ -246410,6 +246405,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="streetAddress2"
                     type="text"
+                    value=""
                   />
                   <fieldset
                     aria-hidden="true"
@@ -246581,6 +246577,7 @@ exports[`Storyshots Views / Site settings / Page default 1`] = `
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                       name="countryArea"
                       type="text"
+                      value=""
                     />
                     <fieldset
                       aria-hidden="true"
@@ -246756,7 +246753,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                 data-shrink="true"
               >
-                URL of your online store
+                Store domain
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -246777,7 +246774,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                   >
                     <span>
-                      URL of your online store
+                      Store domain
                     </span>
                   </legend>
                 </fieldset>
@@ -246798,7 +246795,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                 data-shrink="true"
               >
-                Store Description
+                Store description
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -246819,7 +246816,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                   >
                     <span>
-                      Store Description
+                      Store description
                     </span>
                   </legend>
                 </fieldset>
@@ -246966,6 +246963,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="streetAddress2"
                     type="text"
+                    value=""
                   />
                   <fieldset
                     aria-hidden="true"
@@ -247137,6 +247135,7 @@ exports[`Storyshots Views / Site settings / Page form errors 1`] = `
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                       name="countryArea"
                       type="text"
+                      value=""
                     />
                     <fieldset
                       aria-hidden="true"
@@ -247313,7 +247312,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                 data-shrink="false"
               >
-                URL of your online store
+                Store domain
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -247335,7 +247334,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id"
                   >
                     <span>
-                      URL of your online store
+                      Store domain
                     </span>
                   </legend>
                 </fieldset>
@@ -247351,7 +247350,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                 data-shrink="false"
               >
-                Store Description
+                Store description
               </label>
               <div
                 class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -247373,7 +247372,7 @@ exports[`Storyshots Views / Site settings / Page loading 1`] = `
                     class="PrivateNotchedOutline-legendLabelled-id"
                   >
                     <span>
-                      Store Description
+                      Store description
                     </span>
                   </legend>
                 </fieldset>

webpack.config.js

@@ -43,7 +43,8 @@ const environmentPlugin = new webpack.EnvironmentPlugin({
   ENVIRONMENT: "",
   GTM_ID: "",
   SENTRY_DSN: "",
-  SW_INTERVAL: "300" // Fetch SW every 300 seconds
+  SW_INTERVAL: "300", // Fetch SW every 300 seconds
+  IS_CLOUD_INSTANCE: false
 });
 
 const dashboardBuildPath = "build/dashboard/";