diff --git a/CHANGELOG.md b/CHANGELOG.md index 6882ff6e7..056dfcb0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ All notable, unreleased changes to this project will be documented in this file. For the released changes, please visit the [Releases](https://github.com/saleor/saleor-dashboard/releases) page. ## [Unreleased] +- Added links instead of imperative navigation with onClick - #1969 by @taniotanio7 ## 3.1 ### PREVIEW FEATURES diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index c0a74ba25..23db50c16 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -368,6 +368,10 @@ "context": "dialog header", "string": "Change customer shipping address" }, + "142MJn": { + "context": "select visible columns button", + "string": "Columns" + }, "15PiOX": { "context": "button title", "string": "Unassign" diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx index 98ae99b4c..78ae94664 100644 --- a/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx +++ b/src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx @@ -11,8 +11,7 @@ const props: AppDetailsPageProps = { navigateToApp: () => undefined, navigateToAppSettings: () => undefined, onAppActivateOpen: () => undefined, - onAppDeactivateOpen: () => undefined, - onBack: () => undefined + onAppDeactivateOpen: () => undefined }; storiesOf("Views / Apps / App details", module) diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx index b7d3f2711..2324b6869 100644 --- a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx +++ b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx @@ -1,4 +1,7 @@ import { ButtonBase, Card, CardContent, Typography } from "@material-ui/core"; +import { appsListPath } from "@saleor/apps/urls"; +import { Backlink } from "@saleor/components/Backlink"; +import { Button } from "@saleor/components/Button"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import Container from "@saleor/components/Container"; @@ -7,7 +10,6 @@ import PageHeader from "@saleor/components/PageHeader"; import Skeleton from "@saleor/components/Skeleton"; import { AppQuery } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Backlink, Button } from "@saleor/macaw-ui"; import React from "react"; import SVG from "react-inlinesvg"; import { FormattedMessage, useIntl } from "react-intl"; @@ -26,7 +28,6 @@ export interface AppDetailsPageProps { navigateToAppSettings: () => void; onAppActivateOpen: () => void; onAppDeactivateOpen: () => void; - onBack: () => void; } export const AppDetailsPage: React.FC = ({ @@ -35,15 +36,14 @@ export const AppDetailsPage: React.FC = ({ navigateToApp, navigateToAppSettings, onAppActivateOpen, - onAppDeactivateOpen, - onBack + onAppDeactivateOpen }) => { const intl = useIntl(); const classes = useStyles({}); return ( - + {intl.formatMessage(sectionNames.apps)} undefined, - onBack: () => undefined, + aboutHref: "", onError: () => undefined }; diff --git a/src/apps/components/AppPage/AppPage.tsx b/src/apps/components/AppPage/AppPage.tsx index 20991907e..09754dfd5 100644 --- a/src/apps/components/AppPage/AppPage.tsx +++ b/src/apps/components/AppPage/AppPage.tsx @@ -1,11 +1,13 @@ import { Typography } from "@material-ui/core"; +import { appsListPath } from "@saleor/apps/urls"; +import { Backlink } from "@saleor/components/Backlink"; +import { Button } from "@saleor/components/Button"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import { AppQuery } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Backlink, Button } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -17,16 +19,14 @@ import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs"; export interface AppPageProps { data: AppQuery["app"]; url: string; - navigateToAbout: () => void; - onBack: () => void; onError: () => void; + aboutHref: string; } export const AppPage: React.FC = ({ data, url, - navigateToAbout, - onBack, + aboutHref, onError }) => { const intl = useIntl(); @@ -35,7 +35,7 @@ export const AppPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.apps)} @@ -63,7 +63,7 @@ export const AppPage: React.FC = ({
-
@@ -193,7 +191,7 @@ const CustomAppDetailsPage: React.FC = props => { navigate(appsListUrl())} onSubmit={submit} /> diff --git a/src/apps/components/CustomAppTokens/CustomAppTokens.tsx b/src/apps/components/CustomAppTokens/CustomAppTokens.tsx index 5a279c5cf..5a00be5a3 100644 --- a/src/apps/components/CustomAppTokens/CustomAppTokens.tsx +++ b/src/apps/components/CustomAppTokens/CustomAppTokens.tsx @@ -5,11 +5,12 @@ import { TableHead, TableRow } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { AppUpdateMutation } from "@saleor/graphql"; -import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/components/CustomApps/CustomApps.tsx b/src/apps/components/CustomApps/CustomApps.tsx index 53ff2e005..222340190 100644 --- a/src/apps/components/CustomApps/CustomApps.tsx +++ b/src/apps/components/CustomApps/CustomApps.tsx @@ -5,15 +5,13 @@ import { TableRow, Typography } from "@material-ui/core"; +import { customAppAddUrl } from "@saleor/apps/urls"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; +import TableRowLink from "@saleor/components/TableRowLink"; import { AppsListQuery } from "@saleor/graphql"; import { commonMessages } from "@saleor/intl"; -import { - Button, - DeleteIcon, - IconButton, - ResponsiveTable -} from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton, ResponsiveTable } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -24,16 +22,14 @@ import DeactivatedText from "../DeactivatedText"; export interface CustomAppsProps { appsList: AppsListQuery["apps"]["edges"]; - navigateToCustomApp: (id: string) => () => void; - navigateToCustomAppCreate?: () => void; + getCustomAppHref: (id: string) => string; onRemove: (id: string) => void; } const CustomApps: React.FC = ({ appsList, - navigateToCustomAppCreate, onRemove, - navigateToCustomApp + getCustomAppHref }) => { const intl = useIntl(); const classes = useStyles({}); @@ -42,19 +38,17 @@ const CustomApps: React.FC = ({ - - - ) + } title={intl.formatMessage(commonMessages.customApps)} /> @@ -64,10 +58,10 @@ const CustomApps: React.FC = ({ appsList, (app, index) => app ? ( - @@ -88,7 +82,7 @@ const CustomApps: React.FC = ({ - + ) : ( ), diff --git a/src/apps/components/InstalledApps/InstalledApps.tsx b/src/apps/components/InstalledApps/InstalledApps.tsx index 196a80048..d6f8eb899 100644 --- a/src/apps/components/InstalledApps/InstalledApps.tsx +++ b/src/apps/components/InstalledApps/InstalledApps.tsx @@ -6,8 +6,10 @@ import { TableRow, Typography } from "@material-ui/core"; +import { appUrl } from "@saleor/apps/urls"; import CardTitle from "@saleor/components/CardTitle"; import TablePagination from "@saleor/components/TablePagination"; +import TableRowLink from "@saleor/components/TableRowLink"; import { AppsListQuery } from "@saleor/graphql"; import { Button, @@ -39,7 +41,6 @@ const InstalledApps: React.FC = ({ disabled, onNextPage, onPreviousPage, - onRowClick, onRowAboutClick, onUpdateListSettings, pageInfo, @@ -78,10 +79,10 @@ const InstalledApps: React.FC = ({ appsList, (app, index) => app ? ( - @@ -119,7 +120,7 @@ const InstalledApps: React.FC = ({ - + ) : ( ), diff --git a/src/apps/components/Marketplace/Marketplace.tsx b/src/apps/components/Marketplace/Marketplace.tsx index 22f280bca..895385b2f 100644 --- a/src/apps/components/Marketplace/Marketplace.tsx +++ b/src/apps/components/Marketplace/Marketplace.tsx @@ -1,6 +1,6 @@ import { Card, CardContent, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; -import { Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx index f315e5cf5..8ff006781 100644 --- a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx +++ b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx @@ -8,6 +8,7 @@ import { Typography } from "@material-ui/core"; import BackButton from "@saleor/components/BackButton"; +import { Button } from "@saleor/components/Button"; import CardSpacer from "@saleor/components/CardSpacer"; import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; @@ -15,7 +16,7 @@ import FormSpacer from "@saleor/components/FormSpacer"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import { buttonMessages } from "@saleor/intl"; -import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/views/App/App.tsx b/src/apps/views/App/App.tsx index 6a6353183..b1499d97a 100644 --- a/src/apps/views/App/App.tsx +++ b/src/apps/views/App/App.tsx @@ -45,8 +45,7 @@ export const App: React.FC = ({ id }) => { navigate(appDetailsUrl(id))} - onBack={() => navigate(appsListPath)} + aboutHref={appDetailsUrl(id)} onError={() => notify({ status: "error", diff --git a/src/apps/views/AppDetails/AppDetails.tsx b/src/apps/views/AppDetails/AppDetails.tsx index 1460b0e48..98ea54fa3 100644 --- a/src/apps/views/AppDetails/AppDetails.tsx +++ b/src/apps/views/AppDetails/AppDetails.tsx @@ -98,7 +98,7 @@ export const AppDetails: React.FC = ({ id, params }) => { }; if (!appExists) { - return navigate(appsListPath)} />; + return ; } return ( @@ -124,7 +124,6 @@ export const AppDetails: React.FC = ({ id, params }) => { navigateToAppSettings={() => navigate(appSettingsUrl(id))} onAppActivateOpen={() => openModal("app-activate")} onAppDeactivateOpen={() => openModal("app-deactivate")} - onBack={() => navigate(appsListPath)} /> ); diff --git a/src/apps/views/AppSettings/AppSettings.tsx b/src/apps/views/AppSettings/AppSettings.tsx index a01b7ebd0..695f072e2 100644 --- a/src/apps/views/AppSettings/AppSettings.tsx +++ b/src/apps/views/AppSettings/AppSettings.tsx @@ -1,7 +1,6 @@ import { appMessages } from "@saleor/apps/messages"; import NotFoundPage from "@saleor/components/NotFoundPage"; import { useAppQuery } from "@saleor/graphql"; -import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import React from "react"; import { useIntl } from "react-intl"; @@ -21,20 +20,18 @@ export const AppSettings: React.FC = ({ id }) => { const appExists = data?.app !== null; - const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); if (!appExists) { - return navigate(appsListPath)} />; + return ; } return ( navigate(appDetailsUrl(id))} - onBack={() => navigate(appsListPath)} + aboutHref={appDetailsUrl(id)} onError={() => notify({ status: "error", diff --git a/src/apps/views/AppsList/AppsList.tsx b/src/apps/views/AppsList/AppsList.tsx index e9615b32f..262449711 100644 --- a/src/apps/views/AppsList/AppsList.tsx +++ b/src/apps/views/AppsList/AppsList.tsx @@ -36,8 +36,6 @@ import { AppListUrlDialog, AppListUrlQueryParams, appsListUrl, - appUrl, - customAppAddUrl, customAppUrl } from "../../urls"; import { messages } from "./messages"; @@ -314,11 +312,9 @@ export const AppsList: React.FC = ({ params }) => { onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(appUrl(id))} onRowAboutClick={id => () => navigate(appDetailsUrl(id))} onAppInstallRetry={onAppInstallRetry} - navigateToCustomApp={id => () => navigate(customAppUrl(id))} - navigateToCustomAppCreate={() => navigate(customAppAddUrl)} + getCustomAppHref={id => customAppUrl(id)} onInstalledAppRemove={id => openModal("remove-app", { id diff --git a/src/apps/views/CustomAppCreate/CustomAppCreate.tsx b/src/apps/views/CustomAppCreate/CustomAppCreate.tsx index 1700ebfa1..57c315ac6 100644 --- a/src/apps/views/CustomAppCreate/CustomAppCreate.tsx +++ b/src/apps/views/CustomAppCreate/CustomAppCreate.tsx @@ -11,7 +11,7 @@ import { useIntl } from "react-intl"; import CustomAppCreatePage, { CustomAppCreatePageFormData } from "../../components/CustomAppCreatePage"; -import { appsListUrl, customAppUrl } from "../../urls"; +import { customAppUrl } from "../../urls"; import { messages } from "./messages"; interface CustomAppCreateProps { @@ -36,8 +36,6 @@ export const CustomAppCreate: React.FC = ({ } }; - const handleBack = () => navigate(appsListUrl()); - const [createApp, createAppOpts] = useAppCreateMutation({ onCompleted: onSubmit }); @@ -62,7 +60,6 @@ export const CustomAppCreate: React.FC = ({ = ({ }); } }; - const handleBack = () => navigate(appsListUrl()); const customApp = data?.app; if (customApp === null) { - return ; + return ; } const onTokenCreate = (data: AppTokenCreateMutation) => { @@ -225,9 +224,7 @@ export const CustomAppDetails: React.FC = ({ disabled={loading} errors={updateAppOpts.data?.appUpdate?.errors || []} token={token} - navigateToWebhookDetails={id => () => navigate(webhookPath(id))} onApiUriClick={() => open(API_URI, "blank")} - onBack={handleBack} onSubmit={handleSubmit} onTokenClose={onTokenClose} onTokenCreate={() => openModal("create-token")} @@ -236,7 +233,7 @@ export const CustomAppDetails: React.FC = ({ id }) } - onWebhookCreate={() => navigate(webhookAddPath(id))} + webhookCreateHref={webhookAddPath(id)} onWebhookRemove={id => openModal("remove-webhook", { id diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx index 72c11fa57..4c2273060 100644 --- a/src/attributes/components/AttributeList/AttributeList.tsx +++ b/src/attributes/components/AttributeList/AttributeList.tsx @@ -1,11 +1,15 @@ import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; -import { AttributeListUrlSortField } from "@saleor/attributes/urls"; +import { + AttributeListUrlSortField, + attributeUrl +} from "@saleor/attributes/urls"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import TableRowLink from "@saleor/components/TableRowLink"; import { AttributeFragment } from "@saleor/graphql"; import { translateBoolean } from "@saleor/intl"; import { makeStyles } from "@saleor/macaw-ui"; @@ -69,7 +73,6 @@ const AttributeList: React.FC = ({ isChecked, onNextPage, onPreviousPage, - onRowClick, pageInfo, selected, sort, @@ -187,11 +190,11 @@ const AttributeList: React.FC = ({ const isSelected = attribute ? isChecked(attribute.id) : false; return ( - attribute.id)} > @@ -246,7 +249,7 @@ const AttributeList: React.FC = ({ )} - + ); }, () => ( diff --git a/src/attributes/components/AttributeListPage/AttributeListPage.tsx b/src/attributes/components/AttributeListPage/AttributeListPage.tsx index 13dba9255..753c4858b 100644 --- a/src/attributes/components/AttributeListPage/AttributeListPage.tsx +++ b/src/attributes/components/AttributeListPage/AttributeListPage.tsx @@ -1,9 +1,14 @@ import { Card } from "@material-ui/core"; -import { AttributeListUrlSortField } from "@saleor/attributes/urls"; +import { + attributeAddUrl, + AttributeListUrlSortField +} from "@saleor/attributes/urls"; +import { Backlink } from "@saleor/components/Backlink"; +import { Button } from "@saleor/components/Button"; import FilterBar from "@saleor/components/FilterBar"; +import { configurationMenuUrl } from "@saleor/configuration"; import { AttributeFragment } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Backlink, Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -30,14 +35,11 @@ export interface AttributeListPageProps SortPage, TabPageProps { attributes: AttributeFragment[]; - onBack: () => void; } const AttributeListPage: React.FC = ({ filterOpts, initialSearch, - onAdd, - onBack, onFilterChange, onSearchChange, currentTab, @@ -54,12 +56,12 @@ const AttributeListPage: React.FC = ({ return ( - +
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index 55f49f398..5fc4dd6fa 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx @@ -1,8 +1,8 @@ import { TextField, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import { SubmitPromise } from "@saleor/hooks/useForm"; -import { Button } from "@saleor/macaw-ui"; import { SetPasswordData } from "@saleor/sdk"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import React from "react"; diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx index f04482d37..ab28cbe46 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx @@ -9,7 +9,6 @@ import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage"; const props: ResetPasswordPageProps = { disabled: false, error: undefined, - onBack: () => undefined, onSubmit: () => undefined }; storiesOf("Views / Authentication / Reset password", module) diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx index 04451434c..9601f7512 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx @@ -1,10 +1,13 @@ import { TextField, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; +import { IconButton } from "@saleor/components/IconButton"; +import { APP_MOUNT_URI } from "@saleor/config"; import { RequestPasswordResetMutation } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { commonMessages } from "@saleor/intl"; -import { ArrowRightIcon, Button, IconButton } from "@saleor/macaw-ui"; +import { ArrowRightIcon } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -16,7 +19,6 @@ export interface ResetPasswordPageFormData { export interface ResetPasswordPageProps { disabled: boolean; error: string; - onBack: () => void; onSubmit: ( data: ResetPasswordPageFormData ) => SubmitPromise< @@ -25,7 +27,7 @@ export interface ResetPasswordPageProps { } const ResetPasswordPage: React.FC = props => { - const { disabled, error, onBack, onSubmit } = props; + const { disabled, error, onSubmit } = props; const classes = useStyles(props); const intl = useIntl(); @@ -34,7 +36,7 @@ const ResetPasswordPage: React.FC = props => {
{({ change: handleChange, data, submit: handleSubmit }) => ( <> - + diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 54aec8a50..62856b03d 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -1,6 +1,7 @@ import { Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import FormSpacer from "@saleor/components/FormSpacer"; -import { Button } from "@saleor/macaw-ui"; +import {} from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx index a18ae1e6d..fd9a775d6 100644 --- a/src/auth/views/Login.tsx +++ b/src/auth/views/Login.tsx @@ -9,11 +9,7 @@ import useRouter from "use-react-router"; import { useUser } from ".."; import LoginPage from "../components/LoginPage"; import { LoginFormData } from "../components/LoginPage/types"; -import { - loginCallbackPath, - LoginUrlQueryParams, - passwordResetUrl -} from "../urls"; +import { loginCallbackPath, LoginUrlQueryParams } from "../urls"; interface LoginViewProps { params: LoginUrlQueryParams; @@ -97,7 +93,6 @@ const LoginView: React.FC = ({ params }) => { } loading={externalAuthenticationsLoading || authenticating} onExternalAuthentication={handleRequestExternalAuthentication} - onPasswordRecovery={() => navigate(passwordResetUrl)} onSubmit={handleSubmit} /> ); diff --git a/src/auth/views/ResetPassword.tsx b/src/auth/views/ResetPassword.tsx index eb5a8a7a9..f918759ad 100644 --- a/src/auth/views/ResetPassword.tsx +++ b/src/auth/views/ResetPassword.tsx @@ -60,7 +60,6 @@ const ResetPasswordView: React.FC = () => { navigate(APP_MOUNT_URI)} onSubmit={handleSubmit} /> ); diff --git a/src/categories/components/CategoryBackground/CategoryBackground.tsx b/src/categories/components/CategoryBackground/CategoryBackground.tsx index 8db318d87..8ab14e035 100644 --- a/src/categories/components/CategoryBackground/CategoryBackground.tsx +++ b/src/categories/components/CategoryBackground/CategoryBackground.tsx @@ -1,4 +1,5 @@ import { Card, CardContent, TextField } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import ImageUpload from "@saleor/components/ImageUpload"; @@ -6,7 +7,7 @@ import MediaTile from "@saleor/components/MediaTile"; import Skeleton from "@saleor/components/Skeleton"; import { CategoryDetailsFragment } from "@saleor/graphql"; import { commonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx index ebaea57d6..c83f73a2e 100644 --- a/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx +++ b/src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx @@ -1,3 +1,4 @@ +import { Backlink } from "@saleor/components/Backlink"; import { CardSpacer } from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Metadata from "@saleor/components/Metadata"; @@ -5,8 +6,9 @@ import PageHeader from "@saleor/components/PageHeader"; import Savebar from "@saleor/components/Savebar"; import SeoForm from "@saleor/components/SeoForm"; import { ProductErrorFragment } from "@saleor/graphql"; +import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -17,24 +19,25 @@ export interface CategoryCreatePageProps { errors: ProductErrorFragment[]; disabled: boolean; saveButtonBarState: ConfirmButtonTransitionState; + backUrl: string; onSubmit(data: CategoryCreateData); - onBack(); } export const CategoryCreatePage: React.FC = ({ disabled, onSubmit, - onBack, errors, - saveButtonBarState + saveButtonBarState, + backUrl }) => { const intl = useIntl(); + const navigate = useNavigator(); return ( {({ data, change, handlers, submit, isSaveDisabled }) => ( - + {intl.formatMessage(sectionNames.categories)} = ({ navigate(backUrl)} onSubmit={submit} state={saveButtonBarState} disabled={isSaveDisabled} diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx index f50d4a6a5..473118078 100644 --- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx +++ b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx @@ -6,8 +6,9 @@ import { DialogTitle } from "@material-ui/core"; import BackButton from "@saleor/components/BackButton"; +import { Button } from "@saleor/components/Button"; import { buttonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx index e50f19f54..4de8fe039 100644 --- a/src/categories/components/CategoryList/CategoryList.tsx +++ b/src/categories/components/CategoryList/CategoryList.tsx @@ -1,11 +1,12 @@ import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; -import { CategoryListUrlSortField } from "@saleor/categories/urls"; +import { CategoryListUrlSortField, categoryUrl } from "@saleor/categories/urls"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import TableRowLink from "@saleor/components/TableRowLink"; import { CategoryFragment } from "@saleor/graphql"; import { makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection } from "@saleor/misc"; @@ -49,7 +50,6 @@ interface CategoryListProps SortPage { categories?: CategoryFragment[]; isRoot: boolean; - onAdd?(); } const CategoryList: React.FC = props => { @@ -68,7 +68,6 @@ const CategoryList: React.FC = props => { onNextPage, onPreviousPage, onUpdateListSettings, - onRowClick, onSort } = props; @@ -157,10 +156,10 @@ const CategoryList: React.FC = props => { const isSelected = category ? isChecked(category.id) : false; return ( - category.id)} @@ -194,7 +193,7 @@ const CategoryList: React.FC = props => { )} - + ); }, () => ( diff --git a/src/categories/components/CategoryListPage/CategoryListPage.tsx b/src/categories/components/CategoryListPage/CategoryListPage.tsx index 7a0fb8406..3db73cb59 100644 --- a/src/categories/components/CategoryListPage/CategoryListPage.tsx +++ b/src/categories/components/CategoryListPage/CategoryListPage.tsx @@ -1,11 +1,14 @@ import { Card } from "@material-ui/core"; -import { CategoryListUrlSortField } from "@saleor/categories/urls"; +import { + categoryAddUrl, + CategoryListUrlSortField +} from "@saleor/categories/urls"; +import { Button } from "@saleor/components/Button"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import SearchBar from "@saleor/components/SearchBar"; import { CategoryFragment } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Button } from "@saleor/macaw-ui"; import { ListActions, PageListProps, @@ -40,11 +43,9 @@ export const CategoryListPage: React.FC = ({ toggle, toggleAll, toolbar, - onAdd, onAll, onNextPage, onPreviousPage, - onRowClick, onSearchChange, onTabChange, onTabDelete, @@ -59,7 +60,7 @@ export const CategoryListPage: React.FC = ({ {options.length > 0 && ( diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index b0760c76f..4cf3931a5 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/src/components/CardMenu/CardMenu.tsx @@ -8,11 +8,12 @@ import { Popper, Typography } from "@material-ui/core"; -import { IconButton, makeStyles, MoreIcon } from "@saleor/macaw-ui"; +import { makeStyles, MoreIcon } from "@saleor/macaw-ui"; import classNames from "classnames"; import React, { useEffect, useRef, useState } from "react"; import { FormattedMessage } from "react-intl"; +import { IconButton } from "../IconButton"; import { cardMenuMessages as messages } from "./messages"; const ITEM_HEIGHT = 48; diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx index ee9fc6800..332077558 100644 --- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx +++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx @@ -1,9 +1,9 @@ import { Card, CardContent, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import RequirePermissions from "@saleor/components/RequirePermissions"; import { PermissionEnum } from "@saleor/graphql"; -import { Button } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/components/ColumnPicker/ColumnPickerButton.tsx b/src/components/ColumnPicker/ColumnPickerButton.tsx new file mode 100644 index 000000000..6947a2341 --- /dev/null +++ b/src/components/ColumnPicker/ColumnPickerButton.tsx @@ -0,0 +1,65 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; +import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; +import { Button } from "@saleor/components/Button"; +import { makeStyles } from "@saleor/macaw-ui"; +import classNames from "classnames"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +interface ColumnPickerButtonProps { + active: boolean; + className?: string; + onClick: () => void; +} + +const useStyles = makeStyles( + theme => ({ + icon: { + marginLeft: theme.spacing(2), + transition: theme.transitions.duration.short + "ms" + }, + root: { + "& span": { + color: theme.palette.primary.main + }, + paddingRight: theme.spacing(1) + }, + rootActive: { + background: fade(theme.palette.primary.main, 0.1) + }, + rotate: { + transform: "rotate(180deg)" + } + }), + { + name: "ColumnPickerButton" + } +); + +const ColumnPickerButton: React.FC = props => { + const { active, className, onClick } = props; + const classes = useStyles(props); + + return ( + + ); +}; + +export default ColumnPickerButton; diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index 9d28d68de..fc7d8dcd9 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -6,10 +6,10 @@ import { MenuItem, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import { FormChange } from "@saleor/hooks/useForm"; import { buttonMessages } from "@saleor/intl"; import { - Button, Choice, CloseIcon, IconButton, diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index 21a7a5ff3..9a286aed6 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/src/components/CountryList/CountryList.tsx @@ -1,10 +1,11 @@ import { Card, TableBody, TableCell, TableRow } from "@material-ui/core"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { CountryFragment } from "@saleor/graphql"; -import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/DeleteButton/DeleteButton.tsx b/src/components/DeleteButton/DeleteButton.tsx index ad8b2195b..ac2011330 100644 --- a/src/components/DeleteButton/DeleteButton.tsx +++ b/src/components/DeleteButton/DeleteButton.tsx @@ -1,5 +1,5 @@ +import { Button } from "@saleor/components/Button"; import { buttonMessages } from "@saleor/intl"; -import { Button } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx index 116518783..aeb83b07c 100644 --- a/src/components/FileUploadField/FileUploadField.tsx +++ b/src/components/FileUploadField/FileUploadField.tsx @@ -1,7 +1,8 @@ import { Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import { FileFragment } from "@saleor/graphql"; import { commonMessages } from "@saleor/intl"; -import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx index 3a143e4b8..42c443a11 100644 --- a/src/components/Filter/FilterContent/FilterContentHeader.tsx +++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx @@ -1,6 +1,7 @@ import { Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import { buttonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx index 79d58bf46..05f4613b8 100644 --- a/src/components/FilterBar/FilterBar.tsx +++ b/src/components/FilterBar/FilterBar.tsx @@ -1,4 +1,5 @@ -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/components/Button"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx new file mode 100644 index 000000000..96fd88732 --- /dev/null +++ b/src/components/IconButton/IconButton.tsx @@ -0,0 +1,25 @@ +import { + IconButton as MacawIconButton, + IconButtonProps +} from "@saleor/macaw-ui"; +import { isExternalURL } from "@saleor/utils/urls"; +import React from "react"; +import { Link } from "react-router-dom"; + +const _IconButton: React.FC = React.forwardRef( + ({ href, ...props }, ref) => { + if (href && !isExternalURL(href)) { + return ( + + ); + } + + return ; + } +); + +export const IconButton = _IconButton as < + T extends React.ElementType = "button" +>( + props: IconButtonProps +) => ReturnType; diff --git a/src/components/IconButton/index.ts b/src/components/IconButton/index.ts new file mode 100644 index 000000000..53185101d --- /dev/null +++ b/src/components/IconButton/index.ts @@ -0,0 +1 @@ +export * from "./IconButton"; diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index a66ff7156..2f1380be2 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -14,11 +14,12 @@ import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; +import { Link } from "react-router-dom"; export interface LanguageSwitchProps { currentLanguage: LanguageCodeEnum; languages: LanguageFragment[]; - onLanguageChange: (lang: LanguageCodeEnum) => void; + getLanguageUrl: (lang: LanguageCodeEnum) => string; } const useStyles = makeStyles( @@ -54,8 +55,9 @@ const useStyles = makeStyles( }), { name: "LanguageSwitch" } ); + const LanguageSwitch: React.FC = props => { - const { currentLanguage, languages, onLanguageChange } = props; + const { currentLanguage, languages, getLanguageUrl } = props; const classes = useStyles(props); const [isExpanded, setExpandedState] = React.useState(false); @@ -101,18 +103,19 @@ const LanguageSwitch: React.FC = props => { className={classes.menuItem} onClick={() => { setExpandedState(false); - onLanguageChange(lang.code); }} > - + + + ))} diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 25c073dc6..68053c84e 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,6 +1,7 @@ import { Typography } from "@material-ui/core"; import { TypographyProps } from "@material-ui/core/Typography"; import { makeStyles } from "@saleor/macaw-ui"; +import { isExternalURL } from "@saleor/utils/urls"; import classNames from "classnames"; import React from "react"; import { Link as RouterLink } from "react-router-dom"; @@ -31,8 +32,6 @@ const useStyles = makeStyles( { name: "Link" } ); -const isExternalURL = url => /^https?:\/\//.test(url); - interface LinkProps extends React.AnchorHTMLAttributes { href?: string; color?: "primary" | "secondary"; diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx index f30a74f10..be57db4f2 100644 --- a/src/components/MediaTile/MediaTile.tsx +++ b/src/components/MediaTile/MediaTile.tsx @@ -1,4 +1,5 @@ import { CircularProgress } from "@material-ui/core"; +import { IconButton } from "@saleor/components/IconButton"; import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; @@ -67,7 +68,7 @@ const useStyles = makeStyles( { name: "MediaTile" } ); -interface MediaTileProps { +interface MediaTileBaseProps { media: { alt: string; url: string; @@ -79,8 +80,20 @@ interface MediaTileProps { onEdit?: (event: React.ChangeEvent) => void; } +export type MediaTileProps = MediaTileBaseProps & + ( + | { + onEdit?: React.MouseEventHandler; + editHref?: never; + } + | { + onEdit?: never; + editHref?: string; + } + ); + const MediaTile: React.FC = props => { - const { loading, onDelete, onEdit, media } = props; + const { loading, onDelete, onEdit, editHref, media } = props; const classes = useStyles(props); const parsedMediaOembedData = media?.oembedData ? JSON.parse(media.oembedData) @@ -98,15 +111,26 @@ const MediaTile: React.FC = props => { ) : (
- {onEdit && ( - + )} {onDelete && ( - + )}
)} diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx index c41c3163c..44d6218ed 100644 --- a/src/components/Metadata/MetadataCard.tsx +++ b/src/components/Metadata/MetadataCard.tsx @@ -10,9 +10,10 @@ import { TextField, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import { MetadataInput } from "@saleor/graphql"; import { FormChange } from "@saleor/hooks/useForm"; -import { Button, DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui"; +import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui"; import classNames from "classnames"; import React, { useEffect } from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx index fb99e8550..91bb7d125 100644 --- a/src/components/NotFoundPage/NotFoundPage.tsx +++ b/src/components/NotFoundPage/NotFoundPage.tsx @@ -1,6 +1,7 @@ import notFoundImage from "@assets/images/not-found-404.svg"; import { Typography } from "@material-ui/core"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/components/Button"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import SVG from "react-inlinesvg"; import { FormattedMessage } from "react-intl"; @@ -48,12 +49,18 @@ const useStyles = makeStyles( { name: "NotFoundPage" } ); -interface NotFoundPageProps { - onBack: () => void; -} +type NotFoundPageProps = + | { + onBack: () => void; + backHref?: never; + } + | { + onBack?: never; + backHref: string; + }; const NotFoundPage: React.FC = props => { - const { onBack } = props; + const { onBack, backHref } = props; const classes = useStyles(props); @@ -83,6 +90,7 @@ const NotFoundPage: React.FC = props => { className={classes.button} variant="primary" onClick={onBack} + href={backHref} > ( - ({ children, ...props }) => ( - - - {children} - - ) -); +type SortableTableRowTypesUnion = "link" | "row"; + +type SortableTableRowProps< + T extends SortableTableRowTypesUnion +> = T extends "link" ? TableRowLinkProps : TableRowProps; + +const SortableTableRow = (SortableElement(({ children, ...props }) => ( + + + {children} + +)) as unknown) as ( + props: SortableElementProps & SortableTableRowProps +) => JSX.Element; export default SortableTableRow; diff --git a/src/components/TableRowLink/TableRowLink.tsx b/src/components/TableRowLink/TableRowLink.tsx new file mode 100644 index 000000000..bd5072bc5 --- /dev/null +++ b/src/components/TableRowLink/TableRowLink.tsx @@ -0,0 +1,50 @@ +import { TableRow, TableRowTypeMap } from "@material-ui/core"; +import { makeStyles } from "@saleor/macaw-ui"; +import clsx from "classnames"; +import React from "react"; + +import Link from "../Link"; + +type MaterialTableRowPropsType = TableRowTypeMap["props"]; + +export interface TableRowLinkProps + extends Omit { + children: React.ReactNode; + href?: string; + className?: string; + linkClassName?: string; +} + +const useStyles = makeStyles( + { + link: { + all: "inherit", + display: "contents" + } + }, + { name: "TableRowLink" } +); + +const TableRowLink = ({ + href, + children, + linkClassName, + ...props +}: TableRowLinkProps) => { + const classes = useStyles(); + + if (!href) { + return {children}; + } + + return ( + + + {children} + + + ); +}; + +TableRowLink.displayName = "TableRowLink"; +export default TableRowLink; diff --git a/src/components/TableRowLink/index.ts b/src/components/TableRowLink/index.ts new file mode 100644 index 000000000..6e314253e --- /dev/null +++ b/src/components/TableRowLink/index.ts @@ -0,0 +1,2 @@ +export { default } from "./TableRowLink"; +export * from "./TableRowLink"; diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index 66709ea5b..f25aa0a81 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -1,7 +1,8 @@ import { Avatar, CardContent, TextField } from "@material-ui/core"; import deepPurple from "@material-ui/core/colors/deepPurple"; import PersonIcon from "@material-ui/icons/Person"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/components/Button"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/components/UserChip/UserChip.tsx b/src/components/UserChip/UserChip.tsx index d1a3fe1bd..6a79c3e95 100644 --- a/src/components/UserChip/UserChip.tsx +++ b/src/components/UserChip/UserChip.tsx @@ -2,8 +2,10 @@ import { FormControlLabel, Switch } from "@material-ui/core"; import { UserFragment } from "@saleor/graphql"; import { makeStyles, UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui"; import { getUserInitials, getUserName } from "@saleor/misc"; +import { staffMemberDetailsUrl } from "@saleor/staff/urls"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import { Link } from "react-router-dom"; const useStyles = makeStyles( () => ({ @@ -22,7 +24,6 @@ export interface UserChipProps { isDarkThemeEnabled: boolean; user: UserFragment; onLogout: () => void; - onProfileClick: () => void; onThemeToggle: () => void; } @@ -30,7 +31,6 @@ const UserChip: React.FC = ({ isDarkThemeEnabled, user, onLogout, - onProfileClick, onThemeToggle }) => { const classes = useStyles({}); @@ -42,15 +42,14 @@ const UserChip: React.FC = ({ name={getUserName(user, true)} avatar={user?.avatar?.url} > - - + + + + void; - onBack: () => void; onEdit: (id: string) => void; onRemove: (id: string) => void; onSetAsDefault: (id: string, type: AddressTypeEnum) => void; @@ -81,15 +83,7 @@ const useStyles = makeStyles( ); const CustomerAddressListPage: React.FC = props => { - const { - customer, - disabled, - onAdd, - onBack, - onEdit, - onRemove, - onSetAsDefault - } = props; + const { customer, disabled, onAdd, onEdit, onRemove, onSetAsDefault } = props; const classes = useStyles(props); const intl = useIntl(); @@ -101,7 +95,7 @@ const CustomerAddressListPage: React.FC = props => return ( - + {fullName.trim().length > 0 ? intl.formatMessage(messages.fullNameDetail, { fullName }) : intl.formatMessage(messages.noNameToShow)} diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx index ebe1a7341..104ac8efd 100644 --- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx +++ b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx @@ -1,10 +1,11 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import AddressFormatter from "@saleor/components/AddressFormatter"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import { Hr } from "@saleor/components/Hr"; import { CustomerDetailsFragment } from "@saleor/graphql"; import { buttonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -23,11 +24,11 @@ const useStyles = makeStyles( export interface CustomerAddressesProps { customer: CustomerDetailsFragment; disabled: boolean; - onAddressManageClick: () => void; + manageAddressHref: string; } const CustomerAddresses: React.FC = props => { - const { customer, disabled, onAddressManageClick } = props; + const { customer, disabled, manageAddressHref } = props; const classes = useStyles(props); const intl = useIntl(); @@ -45,7 +46,7 @@ const CustomerAddresses: React.FC = props => { data-test-id="manage-addresses" disabled={disabled} variant="tertiary" - onClick={onAddressManageClick} + href={manageAddressHref} > diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx index 187c5a6d4..2b12e6d1a 100644 --- a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx +++ b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx @@ -1,9 +1,11 @@ +import { Backlink } from "@saleor/components/Backlink"; import { CardSpacer } from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import Savebar from "@saleor/components/Savebar"; +import { customerListUrl } from "@saleor/customers/urls"; import { AccountErrorFragment, AddressInput, @@ -11,8 +13,9 @@ import { } from "@saleor/graphql"; import useAddressValidation from "@saleor/hooks/useAddressValidation"; import { SubmitPromise } from "@saleor/hooks/useForm"; +import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { extractMutationErrors } from "@saleor/misc"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { mapCountriesToChoices } from "@saleor/utils/maps"; @@ -58,7 +61,6 @@ export interface CustomerCreatePageProps { disabled: boolean; errors: AccountErrorFragment[]; saveButtonBar: ConfirmButtonTransitionState; - onBack: () => void; onSubmit: (data: CustomerCreatePageSubmitData) => SubmitPromise; } @@ -67,10 +69,10 @@ const CustomerCreatePage: React.FC = ({ disabled, errors: apiErrors, saveButtonBar, - onBack, onSubmit }: CustomerCreatePageProps) => { const intl = useIntl(); + const navigate = useNavigator(); const [countryDisplayName, setCountryDisplayName] = React.useState(""); const countryChoices = mapCountriesToChoices(countries); @@ -150,7 +152,7 @@ const CustomerCreatePage: React.FC = ({ return ( - + = ({ disabled={isSaveDisabled} state={saveButtonBar} onSubmit={submit} - onCancel={onBack} + onCancel={() => navigate(customerListUrl())} /> ); diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx index 51154d719..d03227d3c 100644 --- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx +++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx @@ -1,3 +1,4 @@ +import { Backlink } from "@saleor/components/Backlink"; import { CardSpacer } from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; @@ -7,6 +8,7 @@ import { MetadataFormData } from "@saleor/components/Metadata/types"; import PageHeader from "@saleor/components/PageHeader"; import RequirePermissions from "@saleor/components/RequirePermissions"; import Savebar from "@saleor/components/Savebar"; +import { customerAddressesUrl, customerListUrl } from "@saleor/customers/urls"; import CustomerGiftCardsCard from "@saleor/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard"; import { AccountErrorFragment, @@ -14,8 +16,10 @@ import { PermissionEnum } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; +import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { orderListUrl } from "@saleor/orders/urls"; import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; @@ -37,33 +41,28 @@ export interface CustomerDetailsPageFormData extends MetadataFormData { } export interface CustomerDetailsPageProps { + customerId: string; customer: CustomerDetailsQuery["user"]; disabled: boolean; errors: AccountErrorFragment[]; saveButtonBar: ConfirmButtonTransitionState; - onBack: () => void; onSubmit: ( data: CustomerDetailsPageFormData ) => SubmitPromise; - onViewAllOrdersClick: () => void; - onRowClick: (id: string) => void; - onAddressManageClick: () => void; onDelete: () => void; } const CustomerDetailsPage: React.FC = ({ + customerId, customer, disabled, errors, saveButtonBar, - onBack, onSubmit, - onViewAllOrdersClick, - onRowClick, - onAddressManageClick, onDelete }: CustomerDetailsPageProps) => { const intl = useIntl(); + const navigate = useNavigator(); const initialForm: CustomerDetailsPageFormData = { email: customer?.email || "", @@ -91,7 +90,7 @@ const CustomerDetailsPage: React.FC = ({ return ( - + {intl.formatMessage(sectionNames.customers)} @@ -117,8 +116,9 @@ const CustomerDetailsPage: React.FC = ({ > @@ -128,7 +128,7 @@ const CustomerDetailsPage: React.FC = ({ @@ -144,7 +144,7 @@ const CustomerDetailsPage: React.FC = ({ disabled={isSaveDisabled} state={saveButtonBar} onSubmit={submit} - onCancel={onBack} + onCancel={() => navigate(customerListUrl())} onDelete={onDelete} /> diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx index 683fd1ae3..187d96d19 100644 --- a/src/customers/components/CustomerList/CustomerList.tsx +++ b/src/customers/components/CustomerList/CustomerList.tsx @@ -9,7 +9,8 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; -import { CustomerListUrlSortField } from "@saleor/customers/urls"; +import TableRowLink from "@saleor/components/TableRowLink"; +import { CustomerListUrlSortField, customerUrl } from "@saleor/customers/urls"; import { ListCustomersQuery, PermissionEnum } from "@saleor/graphql"; import { makeStyles } from "@saleor/macaw-ui"; import { getUserName, renderCollection } from "@saleor/misc"; @@ -57,7 +58,6 @@ const CustomerList: React.FC = props => { onNextPage, onPreviousPage, onUpdateListSettings, - onRowClick, onSort, toolbar, toggle, @@ -149,12 +149,12 @@ const CustomerList: React.FC = props => { const isSelected = customer ? isChecked(customer.id) : false; return ( - = props => { {customer?.orders?.totalCount ?? } - + ); }, () => ( diff --git a/src/customers/components/CustomerListPage/CustomerListPage.tsx b/src/customers/components/CustomerListPage/CustomerListPage.tsx index bd4baeb20..eee17cd71 100644 --- a/src/customers/components/CustomerListPage/CustomerListPage.tsx +++ b/src/customers/components/CustomerListPage/CustomerListPage.tsx @@ -1,12 +1,15 @@ import { Card } from "@material-ui/core"; import { useUserPermissions } from "@saleor/auth/hooks/useUserPermissions"; +import { Button } from "@saleor/components/Button"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; -import { CustomerListUrlSortField } from "@saleor/customers/urls"; +import { + customerAddUrl, + CustomerListUrlSortField +} from "@saleor/customers/urls"; import { ListCustomersQuery } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Button } from "@saleor/macaw-ui"; import { FilterPageProps, ListActions, @@ -38,7 +41,6 @@ const CustomerListPage: React.FC = ({ currentTab, filterOpts, initialSearch, - onAdd, onAll, onFilterChange, onSearchChange, @@ -58,7 +60,7 @@ const CustomerListPage: React.FC = ({ } /> void; onOrderLineRemove?: (id: string) => void; onShippingMethodEdit?: () => void; - onBack(); onBillingAddressEdit(); onFulfillmentApprove(id: string); onFulfillmentCancel(id: string); @@ -122,7 +120,6 @@ const OrderDetailsPage: React.FC = props => { shop, saveButtonBarState, selectedWarehouse, - onBack, onBillingAddressEdit, onFulfillmentApprove, onFulfillmentCancel, @@ -148,8 +145,9 @@ const OrderDetailsPage: React.FC = props => { onSubmit } = props; const classes = useStyles(props); - + const navigate = useNavigator(); const intl = useIntl(); + const { isMetadataModified, isPrivateMetadataModified, @@ -225,7 +223,7 @@ const OrderDetailsPage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.orders)} = props => { navigate(orderListUrl())} onSubmit={submit} state={saveButtonBarState} disabled={allowSave()} diff --git a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx b/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx index a50eb0441..7b95a4e0d 100644 --- a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx +++ b/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx @@ -1,7 +1,7 @@ import { Card, CardContent } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import { OrderDetailsFragment } from "@saleor/graphql"; -import { Button } from "@saleor/macaw-ui"; import { OrderDiscountContext, OrderDiscountContextConsumerProps diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx index ab45e8d88..19143ed68 100644 --- a/src/orders/components/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx @@ -7,6 +7,7 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import TableRowLink from "@saleor/components/TableRowLink"; import { OrderDraftListQuery } from "@saleor/graphql"; import { makeStyles } from "@saleor/macaw-ui"; import { @@ -15,7 +16,7 @@ import { transformOrderStatus, transformPaymentStatus } from "@saleor/misc"; -import { OrderDraftListUrlSortField } from "@saleor/orders/urls"; +import { OrderDraftListUrlSortField, orderUrl } from "@saleor/orders/urls"; import { ListActions, ListProps, RelayToFlat, SortPage } from "@saleor/types"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; @@ -66,7 +67,6 @@ export const OrderDraftList: React.FC = props => { onPreviousPage, onNextPage, onUpdateListSettings, - onRowClick, onSort, isChecked, selected, @@ -168,11 +168,11 @@ export const OrderDraftList: React.FC = props => { const isSelected = order ? isChecked(order.id) : false; return ( - @@ -218,7 +218,7 @@ export const OrderDraftList: React.FC = props => { )} - + ); }, () => ( diff --git a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx index 9009ccf21..a220241b0 100644 --- a/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx +++ b/src/orders/components/OrderDraftListPage/OrderDraftListPage.tsx @@ -1,10 +1,10 @@ import { Card } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { OrderDraftListQuery, RefreshLimitsQuery } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Button } from "@saleor/macaw-ui"; import { OrderDraftListUrlSortField } from "@saleor/orders/urls"; import { FilterPageProps, @@ -34,6 +34,7 @@ export interface OrderDraftListPageProps TabPageProps { limits: RefreshLimitsQuery["shop"]["limits"]; orders: RelayToFlat; + onAdd: () => void; } const OrderDraftListPage: React.FC = ({ diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index 606c54dd5..25cc92f0b 100644 --- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx +++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx @@ -1,4 +1,5 @@ import { Typography } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; import CardMenu from "@saleor/components/CardMenu"; import CardSpacer from "@saleor/components/CardSpacer"; import { Container } from "@saleor/components/Container"; @@ -9,13 +10,11 @@ import Savebar from "@saleor/components/Savebar"; import Skeleton from "@saleor/components/Skeleton"; import { OrderDetailsFragment, SearchCustomersQuery } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; +import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { - Backlink, - ConfirmButtonTransitionState, - makeStyles -} from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import DraftOrderChannelSectionCard from "@saleor/orders/components/DraftOrderChannelSectionCard"; +import { orderDraftListUrl } from "@saleor/orders/urls"; import { FetchMoreProps, RelayToFlat } from "@saleor/types"; import React from "react"; import { useIntl } from "react-intl"; @@ -45,7 +44,6 @@ export interface OrderDraftPageProps extends FetchMoreProps { usersLoading: boolean; saveButtonBarState: ConfirmButtonTransitionState; fetchUsers: (query: string) => void; - onBack: () => void; onBillingAddressEdit: () => void; onCustomerEdit: (data: CustomerEditData) => void; onDraftFinalize: () => void; @@ -69,7 +67,6 @@ const OrderDraftPage: React.FC = props => { fetchUsers, hasMore, saveButtonBarState, - onBack, onBillingAddressEdit, onCustomerEdit, onDraftFinalize, @@ -87,12 +84,13 @@ const OrderDraftPage: React.FC = props => { usersLoading } = props; const classes = useStyles(props); + const navigate = useNavigator(); const intl = useIntl(); return ( - + {intl.formatMessage(sectionNames.draftOrders)} = props => { navigate(orderDraftListUrl())} onSubmit={onDraftFinalize} labels={{ confirm: intl.formatMessage({ diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx index 46324d488..408cdc90d 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx @@ -10,7 +10,6 @@ import OrderFulfillPage, { OrderFulfillPageProps } from "./OrderFulfillPage"; const props: OrderFulfillPageProps = { errors: [], loading: false, - onBack: () => undefined, onSubmit: () => undefined, order: orderToFulfill, saveButtonBar: "default", diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index 7e1dd5801..0c53d9b2d 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -7,6 +7,7 @@ import { TextField, Typography } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; import CardTitle from "@saleor/components/CardTitle"; import Container from "@saleor/components/Container"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; @@ -27,9 +28,11 @@ import { } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; import useFormset, { FormsetData } from "@saleor/hooks/useFormset"; +import useNavigator from "@saleor/hooks/useNavigator"; import { commonMessages } from "@saleor/intl"; -import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; +import { orderUrl } from "@saleor/orders/urls"; import { getAttributesCaption, getToFulfillOrderLines @@ -58,7 +61,6 @@ export interface OrderFulfillPageProps { saveButtonBar: ConfirmButtonTransitionState; warehouse: WarehouseFragment; shopSettings?: ShopOrderSettingsFragment; - onBack: () => void; onSubmit: (data: OrderFulfillSubmitData) => SubmitPromise; } @@ -76,12 +78,12 @@ const OrderFulfillPage: React.FC = props => { saveButtonBar, warehouse, shopSettings, - onBack, onSubmit } = props; const intl = useIntl(); const classes = useStyles(props); + const navigate = useNavigator(); const { change: formsetChange, data: formsetData } = useFormset< null, @@ -165,7 +167,7 @@ const OrderFulfillPage: React.FC = props => { return ( - + {order?.number ? intl.formatMessage(messages.headerOrderNumber, { orderNumber: order.number @@ -279,7 +281,7 @@ const OrderFulfillPage: React.FC = props => { intl.formatMessage(commonMessages.cannotFullfillUnpaidOrder) }} onSubmit={submit} - onCancel={onBack} + onCancel={() => navigate(orderUrl(order?.id))} /> = props => { onPreviousPage, onNextPage, onUpdateListSettings, - onRowClick, onSort, sort } = props; @@ -200,11 +200,11 @@ export const OrderList: React.FC = props => { {renderCollection( orderList, order => ( - @@ -261,7 +261,7 @@ export const OrderList: React.FC = props => { )} - + ), () => ( diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index 889d8e03e..50f149736 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -1,11 +1,12 @@ import { Card } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { OrderListQuery, RefreshLimitsQuery } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import { FilterPageProps, @@ -32,6 +33,7 @@ export interface OrderListPageProps limits: RefreshLimitsQuery["shop"]["limits"]; orders: RelayToFlat; onSettingsOpen: () => void; + onAdd: () => void; } const useStyles = makeStyles( diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx index 25d6de92e..1efdd8dd1 100644 --- a/src/orders/components/OrderPayment/OrderPayment.tsx +++ b/src/orders/components/OrderPayment/OrderPayment.tsx @@ -1,5 +1,6 @@ import { Card, CardContent } from "@material-ui/core"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import { Hr } from "@saleor/components/Hr"; import Money from "@saleor/components/Money"; @@ -10,7 +11,7 @@ import { OrderDiscountType, OrderStatus } from "@saleor/graphql"; -import { Button, makeStyles, Pill } from "@saleor/macaw-ui"; +import { makeStyles, Pill } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx index 4abebc66e..0b7ae98b8 100644 --- a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx +++ b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx @@ -9,13 +9,14 @@ import { TextField, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import Money from "@saleor/components/Money"; import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import { OrderRefundDataQuery } from "@saleor/graphql"; import { FormsetChange } from "@saleor/hooks/useFormset"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx b/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx index 010249339..ad9d23070 100644 --- a/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx +++ b/src/orders/components/OrderRefundPage/OrderRefundPage.stories.tsx @@ -10,7 +10,6 @@ import OrderRefundPage, { OrderRefundPageProps } from "./OrderRefundPage"; const props: OrderRefundPageProps = { disabled: false, errors: [], - onBack: () => undefined, onSubmit: () => undefined, order: orderToRefund(placeholderImage) }; diff --git a/src/orders/components/OrderRefundPage/OrderRefundPage.tsx b/src/orders/components/OrderRefundPage/OrderRefundPage.tsx index fae3b6b08..0a9235906 100644 --- a/src/orders/components/OrderRefundPage/OrderRefundPage.tsx +++ b/src/orders/components/OrderRefundPage/OrderRefundPage.tsx @@ -1,3 +1,4 @@ +import { Backlink } from "@saleor/components/Backlink"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; @@ -8,8 +9,8 @@ import { OrderRefundDataQuery } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; -import { Backlink } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; +import { orderUrl } from "@saleor/orders/urls"; import React from "react"; import { useIntl } from "react-intl"; @@ -37,7 +38,6 @@ export interface OrderRefundPageProps { defaultType?: OrderRefundType; disabled: boolean; errors: OrderErrorFragment[]; - onBack: () => void; onSubmit: (data: OrderRefundSubmitData) => SubmitPromise; } @@ -47,7 +47,6 @@ const OrderRefundPage: React.FC = props => { defaultType = OrderRefundType.PRODUCTS, disabled, errors = [], - onBack, onSubmit } = props; @@ -74,7 +73,7 @@ const OrderRefundPage: React.FC = props => { return ( - + {order?.number ? intl.formatMessage( { diff --git a/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx b/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx index 404503da9..f473c502f 100644 --- a/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx +++ b/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx @@ -6,6 +6,7 @@ import { RadioGroup, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; @@ -15,7 +16,7 @@ import { OrderErrorFragment, OrderRefundDataQuery } from "@saleor/graphql"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { defineMessages, FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx b/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx index 6c1a4f56f..030d1fc65 100644 --- a/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx +++ b/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx @@ -9,13 +9,14 @@ import { TextField, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import Money from "@saleor/components/Money"; import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import { OrderRefundDataQuery } from "@saleor/graphql"; import { FormsetChange } from "@saleor/hooks/useFormset"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderReturnPage/OrderReturnPage.tsx b/src/orders/components/OrderReturnPage/OrderReturnPage.tsx index 8ab37ee31..cacf2ecf5 100644 --- a/src/orders/components/OrderReturnPage/OrderReturnPage.tsx +++ b/src/orders/components/OrderReturnPage/OrderReturnPage.tsx @@ -1,11 +1,12 @@ +import { Backlink } from "@saleor/components/Backlink"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import { OrderDetailsFragment, OrderErrorFragment } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; -import { Backlink } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; +import { orderUrl } from "@saleor/orders/urls"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; @@ -37,19 +38,18 @@ export interface OrderReturnPageProps { order: OrderDetailsFragment; loading: boolean; errors?: OrderErrorFragment[]; - onBack: () => void; onSubmit: (data: OrderRefundSubmitData) => SubmitPromise; } const OrderRefundPage: React.FC = props => { - const { order, loading, errors = [], onBack, onSubmit } = props; + const { order, loading, errors = [], onSubmit } = props; const intl = useIntl(); return ( {({ data, handlers, change, submit, isSaveDisabled }) => ( - + {intl.formatMessage(messages.appTitle, { orderNumber: order?.number })} diff --git a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx index e1e587f18..1f8269538 100644 --- a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx +++ b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx @@ -1,4 +1,5 @@ -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/components/Button"; +import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx b/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx index 42a26d7f1..239390c9b 100644 --- a/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx +++ b/src/orders/components/OrderSettingsPage/OrderSettingsPage.stories.tsx @@ -12,7 +12,6 @@ const props: OrderSettingsPageProps = { orderSettings: orderSettingsFixture, shop: shopOrderSettingsFixture, disabled: false, - onBack: () => undefined, onSubmit: () => undefined, saveButtonBarState: "default" }; diff --git a/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx b/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx index a724528c7..50c87cea3 100644 --- a/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx +++ b/src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx @@ -1,4 +1,5 @@ import { Typography } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; @@ -8,8 +9,10 @@ import { ShopOrderSettingsFragment } from "@saleor/graphql"; import { SubmitPromise } from "@saleor/hooks/useForm"; +import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; +import { orderListUrl } from "@saleor/orders/urls"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -23,20 +26,13 @@ export interface OrderSettingsPageProps { shop: ShopOrderSettingsFragment; disabled: boolean; saveButtonBarState: ConfirmButtonTransitionState; - onBack: () => void; onSubmit: (data: OrderSettingsFormData) => SubmitPromise; } const OrderSettingsPage: React.FC = props => { - const { - orderSettings, - shop, - disabled, - saveButtonBarState, - onBack, - onSubmit - } = props; + const { orderSettings, shop, disabled, saveButtonBarState, onSubmit } = props; const intl = useIntl(); + const navigate = useNavigator(); return ( = props => { > {({ data, submit, change, isSaveDisabled }) => ( - + {intl.formatMessage(sectionNames.orders)} = props => { /> navigate(orderListUrl())} onSubmit={submit} disabled={isSaveDisabled} state={saveButtonBarState} diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx index 1b943fe59..1bd961016 100644 --- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx +++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx @@ -1,10 +1,11 @@ import { Card, CardActions, TableBody, Typography } from "@material-ui/core"; +import { Button } from "@saleor/components/Button"; import CardSpacer from "@saleor/components/CardSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { OrderLineFragment, WarehouseFragment } from "@saleor/graphql"; import { commonMessages } from "@saleor/intl"; -import { Button, ChevronIcon, makeStyles } from "@saleor/macaw-ui"; +import { ChevronIcon, makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx index 97b75246f..20acf460f 100644 --- a/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderDraftDetails/index.tsx @@ -216,7 +216,6 @@ export const OrderDraftDetails: React.FC = ({ onDraftFinalize={() => orderDraftFinalize.mutate({ id })} onDraftRemove={() => openModal("cancel")} onOrderLineAdd={() => openModal("add-order-line")} - onBack={() => navigate(orderDraftListUrl())} order={order} onProductClick={id => () => navigate(productUrl(encodeURIComponent(id)))} diff --git a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx index 1731c39d3..5695f8720 100644 --- a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx @@ -42,7 +42,6 @@ import OrderPaymentDialog from "../../../components/OrderPaymentDialog"; import OrderPaymentVoidDialog from "../../../components/OrderPaymentVoidDialog"; import { orderFulfillUrl, - orderListUrl, orderRefundUrl, orderReturnUrl, orderUrl, @@ -149,8 +148,6 @@ export const OrderNormalDetails: React.FC = ({ const intl = useIntl(); const [transactionReference, setTransactionReference] = React.useState(""); - const handleBack = () => navigate(orderListUrl()); - const [ currentApproval, setCurrentApproval @@ -194,7 +191,6 @@ export const OrderNormalDetails: React.FC = ({ }) ) } - onBack={handleBack} order={order} shop={shop} saveButtonBarState={getMutationState( diff --git a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx index 3c9d6fb64..4e5804e8e 100644 --- a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx +++ b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx @@ -41,7 +41,6 @@ import OrderProductAddDialog from "../../../components/OrderProductAddDialog"; import OrderShippingMethodEditDialog from "../../../components/OrderShippingMethodEditDialog"; import { orderFulfillUrl, - orderListUrl, orderRefundUrl, orderReturnUrl, orderUrl, @@ -148,8 +147,6 @@ export const OrderUnconfirmedDetails: React.FC = ( const intl = useIntl(); const [transactionReference, setTransactionReference] = React.useState(""); - const handleBack = () => navigate(orderListUrl()); - return ( <> = ( }) ) } - onBack={handleBack} order={order} shop={shop} onOrderLineAdd={() => openModal("add-order-line")} diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index 165176855..e4a9b9e0e 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx @@ -201,7 +201,6 @@ export const OrderDraftList: React.FC = ({ params }) => { onAdd={() => openModal("create-order")} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} - onRowClick={id => () => navigate(orderUrl(id))} onSort={handleSort} onUpdateListSettings={updateListSettings} isChecked={isSelected} diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx index b0e8ef813..79cba31d4 100644 --- a/src/orders/views/OrderFulfill/OrderFulfill.tsx +++ b/src/orders/views/OrderFulfill/OrderFulfill.tsx @@ -87,7 +87,6 @@ const OrderFulfill: React.FC = ({ orderId, params }) => { navigate(orderUrl(orderId))} onSubmit={async (formData: OrderFulfillSubmitData) => { const res = await fulfillOrder({ variables: { diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 13344bd37..9d27ee41d 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -163,7 +163,6 @@ export const OrderList: React.FC = ({ params }) => { onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(orderUrl(id))} onSort={handleSort} onSearchChange={handleSearchChange} onFilterChange={changeFilters} diff --git a/src/orders/views/OrderRefund/OrderRefund.tsx b/src/orders/views/OrderRefund/OrderRefund.tsx index eae7f3a22..1ef961b97 100644 --- a/src/orders/views/OrderRefund/OrderRefund.tsx +++ b/src/orders/views/OrderRefund/OrderRefund.tsx @@ -152,7 +152,6 @@ const OrderRefund: React.FC = ({ orderId }) => { ?.orderFulfillmentRefundProducts.errors || []) ]} onSubmit={handleSubmit} - onBack={() => navigate(orderUrl(orderId))} /> ); }; diff --git a/src/orders/views/OrderReturn/OrderReturn.tsx b/src/orders/views/OrderReturn/OrderReturn.tsx index 663153acf..7dd71437b 100644 --- a/src/orders/views/OrderReturn/OrderReturn.tsx +++ b/src/orders/views/OrderReturn/OrderReturn.tsx @@ -61,7 +61,7 @@ const OrderReturn: React.FC = ({ orderId }) => { text: intl.formatMessage(messages.successAlert) }); - navigateToOrder(replaceOrder?.id); + navigate(orderUrl(replaceOrder?.id || orderId)); return; } @@ -101,15 +101,12 @@ const OrderReturn: React.FC = ({ orderId }) => { ); }; - const navigateToOrder = (id?: string) => navigate(orderUrl(id || orderId)); - return ( navigateToOrder()} /> ); }; diff --git a/src/orders/views/OrderSettings.tsx b/src/orders/views/OrderSettings.tsx index 01784e7cf..b665c317b 100644 --- a/src/orders/views/OrderSettings.tsx +++ b/src/orders/views/OrderSettings.tsx @@ -2,12 +2,10 @@ import { useOrderSettingsQuery, useOrderSettingsUpdateMutation } from "@saleor/graphql"; -import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; import { extractMutationErrors, getMutationState } from "@saleor/misc"; import OrderSettingsPage from "@saleor/orders/components/OrderSettingsPage"; -import { orderListUrl } from "@saleor/orders/urls"; import React from "react"; import { useIntl } from "react-intl"; @@ -15,7 +13,6 @@ import { OrderSettingsFormData } from "../components/OrderSettingsPage/types"; export const OrderSettings: React.FC = () => { const intl = useIntl(); - const navigate = useNavigator(); const notify = useNotifier(); const { data, loading } = useOrderSettingsQuery({}); @@ -40,8 +37,6 @@ export const OrderSettings: React.FC = () => { } }); - const handleBack = () => navigate(orderListUrl()); - const handleSubmit = async ({ automaticallyConfirmAllNewOrders, automaticallyFulfillNonShippableGiftCard, @@ -69,7 +64,6 @@ export const OrderSettings: React.FC = () => { shop={data?.shop} disabled={loading || orderSettingsUpdateOpts.loading} onSubmit={handleSubmit} - onBack={handleBack} saveButtonBarState={getMutationState( orderSettingsUpdateOpts.called, orderSettingsUpdateOpts.loading, diff --git a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx index d45625a23..f61d526dc 100644 --- a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx +++ b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx @@ -1,4 +1,6 @@ import { Card, TableCell, TableRow } from "@material-ui/core"; +import { attributeUrl } from "@saleor/attributes/urls"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; @@ -9,7 +11,7 @@ import { } from "@saleor/components/SortableTable"; import TableHead from "@saleor/components/TableHead"; import { AttributeFragment, AttributeTypeEnum } from "@saleor/graphql"; -import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import { ListActions, ReorderAction } from "@saleor/types"; import React from "react"; @@ -45,7 +47,6 @@ interface PageTypeAttributesProps extends ListActions { disabled: boolean; type: string; onAttributeAssign: (type: AttributeTypeEnum) => void; - onAttributeClick: (id: string) => void; onAttributeReorder: ReorderAction; onAttributeUnassign: (id: string) => void; } @@ -63,7 +64,6 @@ const PageTypeAttributes: React.FC = props => { toolbar, type, onAttributeAssign, - onAttributeClick, onAttributeReorder, onAttributeUnassign } = props; @@ -135,11 +135,7 @@ const PageTypeAttributes: React.FC = props => { selected={isSelected} className={!!attribute ? classes.link : undefined} hover={!!attribute} - onClick={ - !!attribute - ? () => onAttributeClick(attribute.id) - : undefined - } + href={attribute ? attributeUrl(attribute.id) : undefined} key={attribute?.id} index={attributeIndex || 0} data-test-id={"id-" + attribute?.id} diff --git a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx index 3a42b10f7..ca5d248c9 100644 --- a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx +++ b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.stories.tsx @@ -8,7 +8,6 @@ import PageTypeCreatePage, { PageTypeCreatePageProps } from "."; const props: Omit = { disabled: false, errors: [], - onBack: () => undefined, onSubmit: () => undefined, saveButtonBarState: "default" }; diff --git a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx index dbc8d68ce..6a9686863 100644 --- a/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx +++ b/src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx @@ -1,4 +1,5 @@ import { Typography } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -7,12 +8,10 @@ import Metadata, { MetadataFormData } from "@saleor/components/Metadata"; import PageHeader from "@saleor/components/PageHeader"; import Savebar from "@saleor/components/Savebar"; import { PageErrorFragment } from "@saleor/graphql"; +import useNavigator from "@saleor/hooks/useNavigator"; import { commonMessages, sectionNames } from "@saleor/intl"; -import { - Backlink, - ConfirmButtonTransitionState, - makeStyles -} from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; +import { pageTypeListUrl } from "@saleor/pageTypes/urls"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -27,7 +26,6 @@ export interface PageTypeCreatePageProps { errors: PageErrorFragment[]; disabled: boolean; saveButtonBarState: ConfirmButtonTransitionState; - onBack: () => void; onSubmit: (data: PageTypeForm) => void; } @@ -50,9 +48,11 @@ const useStyles = makeStyles( ); const PageTypeCreatePage: React.FC = props => { - const { disabled, errors, saveButtonBarState, onBack, onSubmit } = props; + const { disabled, errors, saveButtonBarState, onSubmit } = props; const classes = useStyles(props); const intl = useIntl(); + const navigate = useNavigator(); + const { makeChangeHandler: makeMetadataChangeHandler } = useMetadataChangeTrigger(); @@ -69,7 +69,7 @@ const PageTypeCreatePage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.pageTypes)} = props => {
navigate(pageTypeListUrl())} onSubmit={submit} disabled={isSaveDisabled} state={saveButtonBarState} diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx index 0e526da64..f13c81a5f 100644 --- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx +++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.stories.tsx @@ -12,10 +12,8 @@ const props: Omit = { disabled: false, errors: [], onAttributeAdd: () => undefined, - onAttributeClick: () => undefined, onAttributeReorder: () => undefined, onAttributeUnassign: () => undefined, - onBack: () => undefined, onDelete: () => undefined, onSubmit: () => undefined, pageTitle: pageType.name, diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx index a72d2be89..497e1139a 100644 --- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx +++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx @@ -1,4 +1,5 @@ import { Typography } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -13,12 +14,10 @@ import { PageErrorFragment, PageTypeDetailsFragment } from "@saleor/graphql"; +import useNavigator from "@saleor/hooks/useNavigator"; import { commonMessages, sectionNames } from "@saleor/intl"; -import { - Backlink, - ConfirmButtonTransitionState, - makeStyles -} from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; +import { pageTypeListUrl } from "@saleor/pageTypes/urls"; import { ListActions, ReorderEvent } from "@saleor/types"; import { mapMetadataItemToInput } from "@saleor/utils/maps"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; @@ -41,10 +40,8 @@ export interface PageTypeDetailsPageProps { attributeList: ListActions; saveButtonBarState: ConfirmButtonTransitionState; onAttributeAdd: (type: AttributeTypeEnum) => void; - onAttributeClick: (id: string) => void; onAttributeReorder: (event: ReorderEvent, type: AttributeTypeEnum) => void; onAttributeUnassign: (id: string) => void; - onBack: () => void; onDelete: () => void; onSubmit: (data: PageTypeForm) => void; } @@ -72,13 +69,13 @@ const PageTypeDetailsPage: React.FC = props => { onAttributeAdd, onAttributeUnassign, onAttributeReorder, - onAttributeClick, - onBack, onDelete, onSubmit } = props; const classes = useStyles(props); const intl = useIntl(); + const navigate = useNavigator(); + const { isMetadataModified, isPrivateMetadataModified, @@ -121,7 +118,7 @@ const PageTypeDetailsPage: React.FC = props => { return ( - + {intl.formatMessage(sectionNames.pageTypes)} @@ -164,7 +161,6 @@ const PageTypeDetailsPage: React.FC = props => { disabled={disabled} type={AttributeTypeEnum.PAGE_TYPE} onAttributeAssign={onAttributeAdd} - onAttributeClick={onAttributeClick} onAttributeReorder={(event: ReorderEvent) => onAttributeReorder(event, AttributeTypeEnum.PAGE_TYPE) } @@ -184,7 +180,7 @@ const PageTypeDetailsPage: React.FC = props => { navigate(pageTypeListUrl())} onDelete={onDelete} onSubmit={submit} disabled={isSaveDisabled} diff --git a/src/pageTypes/components/PageTypeList/PageTypeList.tsx b/src/pageTypes/components/PageTypeList/PageTypeList.tsx index b15be58eb..533f58e57 100644 --- a/src/pageTypes/components/PageTypeList/PageTypeList.tsx +++ b/src/pageTypes/components/PageTypeList/PageTypeList.tsx @@ -5,9 +5,10 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import TableRowLink from "@saleor/components/TableRowLink"; import { PageTypeFragment } from "@saleor/graphql"; import { makeStyles } from "@saleor/macaw-ui"; -import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; +import { PageTypeListUrlSortField, pageTypeUrl } from "@saleor/pageTypes/urls"; import { getArrowDirection } from "@saleor/utils/sort"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -41,7 +42,6 @@ const PageTypeList: React.FC = props => { pageInfo, onNextPage, onPreviousPage, - onRowClick, onSort, isChecked, selected, @@ -99,11 +99,11 @@ const PageTypeList: React.FC = props => { pageType => { const isSelected = pageType ? isChecked(pageType.id) : false; return ( - @@ -122,7 +122,7 @@ const PageTypeList: React.FC = props => { )} - + ); }, () => ( diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx index d1175627b..9900b7aa5 100644 --- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx +++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.stories.tsx @@ -23,7 +23,6 @@ const props: PageTypeListPageProps = { sort: PageTypeListUrlSortField.name }, ...tabPageProps, - onBack: () => undefined, pageTypes }; diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx index 3f64cbd92..60c9b3a64 100644 --- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx +++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx @@ -1,11 +1,16 @@ import { Card } from "@material-ui/core"; +import { Backlink } from "@saleor/components/Backlink"; +import { Button } from "@saleor/components/Button"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import SearchBar from "@saleor/components/SearchBar"; +import { configurationMenuUrl } from "@saleor/configuration"; import { PageTypeFragment } from "@saleor/graphql"; import { sectionNames } from "@saleor/intl"; -import { Backlink, Button } from "@saleor/macaw-ui"; -import { PageTypeListUrlSortField } from "@saleor/pageTypes/urls"; +import { + pageTypeAddUrl, + PageTypeListUrlSortField +} from "@saleor/pageTypes/urls"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -25,15 +30,12 @@ export interface PageTypeListPageProps SortPage, TabPageProps { pageTypes: PageTypeFragment[]; - onBack: () => void; } const PageTypeListPage: React.FC = ({ currentTab, initialSearch, - onAdd, onAll, - onBack, onSearchChange, onTabChange, onTabDelete, @@ -44,13 +46,13 @@ const PageTypeListPage: React.FC = ({ const intl = useIntl(); return ( - + {intl.formatMessage(sectionNames.configuration)}