djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

App adjustments (#1385)

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

* Update messages and snapshots

* Remove unused prop
This commit is contained in:
Jakub Majorek 2021-09-13 16:14:04 +02:00 committed by GitHub
parent cda3cfa4c0
commit dbaed5478a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 61 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.github/workflows/deploy-prod.yaml vendored
View file

@ -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:

1
.github/workflows/deploy-staging.yaml vendored
View file

@ -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: |

1
.github/workflows/test-env-deploy.yml vendored
View file

@ -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

8
locale/defaultMessages.json
View file

@ -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"

1
src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.stories.tsx
View file

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

6
src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx
View file

@ -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}
/>
)}

10
src/apps/components/AppFrame/AppFrame.tsx
View file

@ -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}

7
src/apps/components/ExternalAppContext/ExternalAppContext.tsx
View file

@ -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>

3
src/apps/useExtensions.ts
View file

@ -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[]) =>

3
src/apps/views/AppDetailsSettings/AppDetailsSettings.tsx
View file

@ -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)}

1
src/config.ts
View file

@ -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,

6
src/siteSettings/components/SiteSettingsDetails/SiteSettingsDetails.tsx
View file

@ -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) ||

25
src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
View file

@ -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 (

3
src/siteSettings/mutations.ts
View file

@ -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
}

12
src/siteSettings/views/index.tsx
View file

@ -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
];
};

33
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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>

3
webpack.config.js
View file

@ -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/";