From 9b076dcae45921ceca8d3f8bc8cfa619f05f960d Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Fri, 30 Aug 2019 15:10:07 +0200 Subject: [PATCH] Rebase master --- src/configuration/index.tsx | 90 ++++--------------- src/intl.ts | 4 + .../components/PluginInfo/PluginInfo.tsx | 30 +++++-- .../PluginSettings/PluginSettings.tsx | 23 ++--- .../PluginsDetailsPage/PluginsDetailsPage.tsx | 41 ++++++--- .../components/PluginsList/PluginsList.tsx | 27 ++++-- .../PluginsListPage/PluginsListPage.tsx | 43 +++++---- src/plugins/index.tsx | 24 ++--- src/plugins/views/PluginsDetails.tsx | 9 +- src/plugins/views/PluginsList.tsx | 1 + 10 files changed, 153 insertions(+), 139 deletions(-) diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx index 97ab04c36..ac23f5bce 100644 --- a/src/configuration/index.tsx +++ b/src/configuration/index.tsx @@ -26,7 +26,6 @@ import { taxSection } from "@saleor/taxes/urls"; import { PermissionEnum } from "@saleor/types/globalTypes"; import ConfigurationPage, { MenuItem } from "./ConfigurationPage"; -<<<<<<< HEAD export function createConfigurationMenu(intl: IntlShape): MenuItem[] { return [ { @@ -108,82 +107,25 @@ export function createConfigurationMenu(intl: IntlShape): MenuItem[] { permission: PermissionEnum.MANAGE_PAGES, title: intl.formatMessage(sectionNames.pages), url: pageListUrl() + }, + { + description: intl.formatMessage({ + defaultMessage: "View and update your plugins and their settings.", + id: "configurationPluginsPages" + }), + icon: ( + + ), + permission: PermissionEnum.MANAGE_SETTINGS, + title: intl.formatMessage(sectionNames.plugins), + url: pluginsListUrl() } ]; } -======= -export const configurationMenu: MenuItem[] = [ - { - description: i18n.t("Determine attributes used to create product types"), - icon: , - permission: PermissionEnum.MANAGE_PRODUCTS, - title: i18n.t("Attributes"), - url: attributeListUrl() - }, - { - description: i18n.t("Define types of products you sell"), - icon: , - permission: PermissionEnum.MANAGE_PRODUCTS, - title: i18n.t("Product Types"), - url: productTypeListUrl() - }, - { - description: i18n.t("Manage your employees and their permissions"), - icon: , - permission: PermissionEnum.MANAGE_STAFF, - title: i18n.t("Staff Members"), - url: staffListUrl() - }, - { - description: i18n.t("Manage how you ship out orders."), - icon: , - permission: PermissionEnum.MANAGE_SHIPPING, - title: i18n.t("Shipping Methods"), - url: shippingZonesListUrl() - }, - { - description: i18n.t("Manage how your store charges tax"), - icon: , - permission: PermissionEnum.MANAGE_PRODUCTS, - title: i18n.t("Taxes"), - url: taxSection - }, - { - description: i18n.t("Define how users can navigate through your store"), - icon: , - permission: PermissionEnum.MANAGE_MENUS, - title: i18n.t("Navigation"), - url: menuListUrl() - }, - { - description: i18n.t("View and update your site settings"), - icon: , - permission: PermissionEnum.MANAGE_SETTINGS, - title: i18n.t("Site Settings"), - url: siteSettingsUrl() - }, - { - description: i18n.t("Manage and add additional pages"), - icon: , - permission: PermissionEnum.MANAGE_PAGES, - title: i18n.t("Pages"), - url: pageListUrl() - }, - { - description: i18n.t("View and update your plugins and their settings."), - icon: ( - - ), - permission: PermissionEnum.MANAGE_SETTINGS, - title: i18n.t("Plugins"), - url: pluginsListUrl() - } -]; ->>>>>>> Add plugin page, plugin list view export const configurationMenuUrl = "/configuration/"; diff --git a/src/intl.ts b/src/intl.ts index 41d827359..0934376b4 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -152,6 +152,10 @@ export const sectionNames = defineMessages({ defaultMessage: "Pages", description: "pages section name" }, + plugins: { + defaultMessage: "Plugins", + description: "plugins section name" + }, productTypes: { defaultMessage: "Product Types", description: "product types section name" diff --git a/src/plugins/components/PluginInfo/PluginInfo.tsx b/src/plugins/components/PluginInfo/PluginInfo.tsx index bb8eb572e..6a82c79a4 100644 --- a/src/plugins/components/PluginInfo/PluginInfo.tsx +++ b/src/plugins/components/PluginInfo/PluginInfo.tsx @@ -3,12 +3,12 @@ import CardContent from "@material-ui/core/CardContent"; import Typography from "@material-ui/core/Typography"; import makeStyles from "@material-ui/styles/makeStyles"; import React from "react"; +import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import ControlledSwitch from "@saleor/components/ControlledSwitch"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; -import i18n from "../../../i18n"; import { FormData } from "../PluginsDetailsPage"; interface PluginInfoProps { @@ -35,32 +35,48 @@ const PluginInfo: React.StatelessComponent = ({ onChange }) => { const classes = useStyles({}); + const intl = useIntl(); return ( - {i18n.t("Plugin Name")} + {intl.formatMessage({ + defaultMessage: "Plugin Name", + description: "plugin name" + })} {name} {description && ( <> - {i18n.t("Plugin Description")} + {intl.formatMessage({ + defaultMessage: "Plugin Description", + description: "plugin description" + })} {description} )}
- {i18n.t("Status")} + + {intl.formatMessage({ + defaultMessage: "Status", + description: "plugin status" + })} + diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx index b81fdef51..44d5b4735 100644 --- a/src/plugins/components/PluginSettings/PluginSettings.tsx +++ b/src/plugins/components/PluginSettings/PluginSettings.tsx @@ -7,7 +7,8 @@ import ControlledSwitch from "@saleor/components/ControlledSwitch"; import { FormErrors } from "@saleor/types"; import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes"; import React from "react"; -import i18n from "../../../i18n"; +import { useIntl } from "react-intl"; + import { FormData } from "../PluginsDetailsPage"; interface PluginSettingsProps { @@ -15,7 +16,7 @@ interface PluginSettingsProps { errors: FormErrors<"name" | "configuration">; disabled: boolean; onChange: (event: React.ChangeEvent) => void; - plugin: Array<{ + fields: Array<{ name: string; type: ConfigurationTypeFieldEnum | null; value: string; @@ -36,32 +37,34 @@ const PluginSettings: React.StatelessComponent = ({ disabled, errors, onChange, - plugin + fields }) => { const classes = useStyles({}); + const intl = useIntl(); return ( {data.configuration.map((configuration, index) => (
- {plugin[index].type === ConfigurationTypeFieldEnum.STRING && ( + {fields[index].type === ConfigurationTypeFieldEnum.STRING && ( )} - {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && ( + {fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && ( = ({ : configuration.value } disabled={disabled} - label={plugin[index].label} + label={fields[index].label} name={configuration.name} onChange={onChange} /> diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx index 11c3c854e..c1f3cc8c4 100644 --- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx +++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx @@ -6,12 +6,13 @@ import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; +import { sectionNames } from "@saleor/intl"; import { maybe } from "@saleor/misc"; import { UserError } from "@saleor/types"; import { ConfigurationItemInput } from "@saleor/types/globalTypes"; import React from "react"; +import { useIntl } from "react-intl"; -import i18n from "../../../i18n"; import { Plugin_plugin } from "../../types/Plugin"; import PluginInfo from "../PluginInfo"; import PluginSettings from "../PluginSettings"; @@ -38,6 +39,7 @@ const PluginsDetailsPage: React.StatelessComponent = ({ onBack, onSubmit }) => { + const intl = useIntl(); const initialForm: FormData = { active: maybe(() => plugin.active, false), configuration: maybe(() => plugin.configuration, []) @@ -67,19 +69,29 @@ const PluginsDetailsPage: React.StatelessComponent = ({ }; return ( - {i18n.t("Plugins")} + + {intl.formatMessage(sectionNames.plugins)} + plugin.name, "")} ${i18n.t("Details")}`} + title={`${maybe(() => plugin.name, "")} ${intl.formatMessage({ + defaultMessage: "Details", + description: "plugin page title" + })}`} />
- {i18n.t("Plugin Information and Status")} + {intl.formatMessage({ + defaultMessage: "Plugin Information and Status", + description: "plugin section title" + })} - {i18n.t( - "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar." - )} + {intl.formatMessage({ + defaultMessage: + "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar.", + description: "plugin section description" + })}
= ({ <>
- {i18n.t("Plugin Settings")} + {intl.formatMessage({ + defaultMessage: "Plugin Settings", + description: "plugin section title" + })} - {i18n.t( - "This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers." - )} + {intl.formatMessage({ + defaultMessage: + "This adress will be used to generate invoices and calculate shipping rates. Email adress you provide here will be used as a contact adress for your customers.", + description: "plugin section description" + })}
plugin.configuration, [])} + fields={maybe(() => plugin.configuration, [])} errors={errors} disabled={disabled} onChange={onChange} diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx index 71cb0e4e5..a3b6c9714 100644 --- a/src/plugins/components/PluginsList/PluginsList.tsx +++ b/src/plugins/components/PluginsList/PluginsList.tsx @@ -12,15 +12,15 @@ import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; import EditIcon from "@material-ui/icons/Edit"; import React from "react"; +import { useIntl } from "react-intl"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; -import i18n from "@saleor/i18n"; +import { translateBoolean } from "@saleor/intl"; import { maybe, renderCollection } from "@saleor/misc"; import { ListProps } from "@saleor/types"; -import { translateBoolean } from "@saleor/utils/i18n"; import { Plugins_plugins_edges_node } from "../../types/Plugins"; export interface PluginListProps extends ListProps { @@ -61,6 +61,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })( onUpdateListSettings, onPreviousPage }: PluginListProps & WithStyles) => { + const intl = useIntl(); return ( @@ -70,13 +71,22 @@ const PluginList = withStyles(styles, { name: "PluginList" })( items={plugins} > - {i18n.t("Name", { context: "table header" })} + {intl.formatMessage({ + defaultMessage: "Name", + description: "plugin list table header" + })} - {i18n.t("Active", { context: "table header" })} + {intl.formatMessage({ + defaultMessage: "Active", + description: "plugin list table header" + })} - {i18n.t("Action", { context: "table header" })} + {intl.formatMessage({ + defaultMessage: "Action", + description: "plugin list table header" + })} @@ -114,7 +124,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })( {maybe( () => ( ), @@ -132,7 +142,10 @@ const PluginList = withStyles(styles, { name: "PluginList" })( () => ( - {i18n.t("No plugins found")} + {intl.formatMessage({ + defaultMessage: "No plugins found", + description: "plugin no found" + })} ) diff --git a/src/plugins/components/PluginsListPage/PluginsListPage.tsx b/src/plugins/components/PluginsListPage/PluginsListPage.tsx index 22cbc7f02..7ff0735ad 100644 --- a/src/plugins/components/PluginsListPage/PluginsListPage.tsx +++ b/src/plugins/components/PluginsListPage/PluginsListPage.tsx @@ -1,9 +1,10 @@ import React from "react"; +import { useIntl } from "react-intl"; import AppHeader from "@saleor/components/AppHeader"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; -import i18n from "@saleor/i18n"; +import { sectionNames } from "@saleor/intl"; import { PageListProps } from "@saleor/types"; import { Plugins_plugins_edges_node } from "../../types/Plugins"; import PluginsList from "../PluginsList/PluginsList"; @@ -23,21 +24,29 @@ const PluginsListPage: React.StatelessComponent = ({ onUpdateListSettings, pageInfo, plugins -}) => ( - - {i18n.t("Configuration")} - - - -); +}) => { + const intl = useIntl(); + return ( + + + {intl.formatMessage({ + defaultMessage: "Configuration", + description: "plugin back button" + })} + + + + + ); +}; PluginsListPage.displayName = "PluginsListPage"; export default PluginsListPage; diff --git a/src/plugins/index.tsx b/src/plugins/index.tsx index a518872e6..4f2276264 100644 --- a/src/plugins/index.tsx +++ b/src/plugins/index.tsx @@ -1,9 +1,10 @@ import { parse as parseQs } from "qs"; import React from "react"; +import { useIntl } from "react-intl"; import { Route, RouteComponentProps, Switch } from "react-router-dom"; +import { sectionNames } from "@saleor/intl"; import { WindowTitle } from "../components/WindowTitle"; -import i18n from "../i18n"; import { pluginsListPath, PluginsListUrlQueryParams, @@ -34,14 +35,17 @@ const PageDetails: React.StatelessComponent> = ({ ); }; -const Component = () => ( - <> - - - - - - -); +const Component = () => { + const intl = useIntl(); + return ( + <> + + + + + + + ); +}; export default Component; diff --git a/src/plugins/views/PluginsDetails.tsx b/src/plugins/views/PluginsDetails.tsx index cc858095a..69e136351 100644 --- a/src/plugins/views/PluginsDetails.tsx +++ b/src/plugins/views/PluginsDetails.tsx @@ -1,8 +1,9 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import i18n from "@saleor/i18n"; import React from "react"; +import { useIntl } from "react-intl"; + import { getMutationState, maybe } from "../../misc"; import PluginsDetailsPage from "../components/PluginsDetailsPage"; import { TypedPluginUpdate } from "../mutations"; @@ -19,6 +20,7 @@ export const PluginsDetails: React.StatelessComponent = ({ }) => { const navigate = useNavigator(); const notify = useNotifier(); + const intl = useIntl(); return ( @@ -45,7 +47,10 @@ export const PluginsDetails: React.StatelessComponent = ({ } else { if (pluginUpdateOpts.data) { notify({ - text: i18n.t("Succesfully updated plugin settings") + text: intl.formatMessage({ + defaultMessage: "Succesfully updated plugin settings", + description: "plugin success message" + }) }); } } diff --git a/src/plugins/views/PluginsList.tsx b/src/plugins/views/PluginsList.tsx index 8d0c00694..848904d5a 100644 --- a/src/plugins/views/PluginsList.tsx +++ b/src/plugins/views/PluginsList.tsx @@ -7,6 +7,7 @@ import usePaginator, { import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import React from "react"; + import PluginsListPage from "../components/PluginsListPage/PluginsListPage"; import { TypedPluginsListQuery } from "../queries"; import { PluginsListUrlQueryParams, pluginsUrl } from "../urls";