Rebase master

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: (
+        <Plugins
+          fontSize="inherit"
+          viewBox="-8 -5 44 44"
+          preserveAspectRatio="xMinYMin meet"
+        />
+      ),
+      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: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_PRODUCTS,
-    title: i18n.t("Attributes"),
-    url: attributeListUrl()
-  },
-  {
-    description: i18n.t("Define types of products you sell"),
-    icon: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_PRODUCTS,
-    title: i18n.t("Product Types"),
-    url: productTypeListUrl()
-  },
-  {
-    description: i18n.t("Manage your employees and their permissions"),
-    icon: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_STAFF,
-    title: i18n.t("Staff Members"),
-    url: staffListUrl()
-  },
-  {
-    description: i18n.t("Manage how you ship out orders."),
-    icon: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_SHIPPING,
-    title: i18n.t("Shipping Methods"),
-    url: shippingZonesListUrl()
-  },
-  {
-    description: i18n.t("Manage how your store charges tax"),
-    icon: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_PRODUCTS,
-    title: i18n.t("Taxes"),
-    url: taxSection
-  },
-  {
-    description: i18n.t("Define how users can navigate through your store"),
-    icon: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_MENUS,
-    title: i18n.t("Navigation"),
-    url: menuListUrl()
-  },
-  {
-    description: i18n.t("View and update your site settings"),
-    icon: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_SETTINGS,
-    title: i18n.t("Site Settings"),
-    url: siteSettingsUrl()
-  },
-  {
-    description: i18n.t("Manage and add additional pages"),
-    icon: <Pages fontSize="inherit" viewBox="0 0 44 44" />,
-    permission: PermissionEnum.MANAGE_PAGES,
-    title: i18n.t("Pages"),
-    url: pageListUrl()
-  },
-  {
-    description: i18n.t("View and update your plugins and their settings."),
-    icon: (
-      <Plugins
-        fontSize="inherit"
-        viewBox="-8 -5 44 44"
-        preserveAspectRatio="xMinYMin meet"
-      />
-    ),
-    permission: PermissionEnum.MANAGE_SETTINGS,
-    title: i18n.t("Plugins"),
-    url: pluginsListUrl()
-  }
-];
->>>>>>> Add plugin page, plugin list view
 
 export const configurationMenuUrl = "/configuration/";
 

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"

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<PluginInfoProps> = ({
   onChange
 }) => {
   const classes = useStyles({});
+  const intl = useIntl();
   return (
     <Card>
       <CardTitle
-        title={i18n.t("Plugin Information and Status", {
+        title={intl.formatMessage({
-          context: "plugin configuration"
+          defaultMessage: "Plugin Information and Status",
+          description: "plugin title"
         })}
       />
       <CardContent>
         <Typography className={classes.title} variant="h6">
-          {i18n.t("Plugin Name")}
+          {intl.formatMessage({
+            defaultMessage: "Plugin Name",
+            description: "plugin name"
+          })}
         </Typography>
         <Typography>{name}</Typography>
         {description && (
           <>
             <Typography className={classes.title} variant="h6">
-              {i18n.t("Plugin Description")}
+              {intl.formatMessage({
+                defaultMessage: "Plugin Description",
+                description: "plugin description"
+              })}
             </Typography>
             <Typography>{description}</Typography>
           </>
         )}
         <FormSpacer />
         <Hr />
-        <Typography className={classes.status}>{i18n.t("Status")}</Typography>
+        <Typography className={classes.status}>
+          {intl.formatMessage({
+            defaultMessage: "Status",
+            description: "plugin status"
+          })}
+        </Typography>
         <ControlledSwitch
           checked={data.active}
-          label={"Set plugin as Active"}
+          label={intl.formatMessage({
+            defaultMessage: "Set plugin as Active",
+            description: "plugin active label"
+          })}
           name={"active" as keyof FormData}
           onChange={onChange}
         />

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<any>) => void;
-  plugin: Array<{
+  fields: Array<{
     name: string;
     type: ConfigurationTypeFieldEnum | null;
     value: string;
@@ -36,32 +37,34 @@ const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
   disabled,
   errors,
   onChange,
-  plugin
+  fields
 }) => {
   const classes = useStyles({});
+  const intl = useIntl();
   return (
     <Card>
       <CardTitle
-        title={i18n.t("Plugin Settings", {
+        title={intl.formatMessage({
-          context: "plugin configuration"
+          defaultMessage: "Plugin Settings",
+          description: "plugin section title"
         })}
       />
       <CardContent>
         {data.configuration.map((configuration, index) => (
           <div className={classes.item} key={index}>
-            {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
+            {fields[index].type === ConfigurationTypeFieldEnum.STRING && (
               <TextField
                 disabled={disabled}
                 error={!!errors.name}
-                helperText={plugin[index].helpText}
+                helperText={fields[index].helpText}
-                label={plugin[index].label}
+                label={fields[index].label}
                 name={configuration.name}
                 fullWidth
                 value={configuration.value}
                 onChange={onChange}
               />
             )}
-            {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
+            {fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
               <ControlledSwitch
                 checked={
                   typeof configuration.value !== "boolean"
@@ -69,7 +72,7 @@ const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
                     : configuration.value
                 }
                 disabled={disabled}
-                label={plugin[index].label}
+                label={fields[index].label}
                 name={configuration.name}
                 onChange={onChange}
               />

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<PluginsDetailsPageProps> = ({
   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<PluginsDetailsPageProps> = ({
         };
         return (
           <Container>
-            <AppHeader onBack={onBack}>{i18n.t("Plugins")}</AppHeader>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.plugins)}
+            </AppHeader>
             <PageHeader
-              title={`${maybe(() => plugin.name, "")} ${i18n.t("Details")}`}
+              title={`${maybe(() => plugin.name, "")} ${intl.formatMessage({
+                defaultMessage: "Details",
+                description: "plugin page title"
+              })}`}
             />
             <Grid variant="inverted">
               <div>
                 <Typography variant="h6">
-                  {i18n.t("Plugin Information and Status")}
+                  {intl.formatMessage({
+                    defaultMessage: "Plugin Information and Status",
+                    description: "plugin section title"
+                  })}
                 </Typography>
                 <Typography>
-                  {i18n.t(
+                  {intl.formatMessage({
-                    "These are general information about your store. They define what is the URL of your store and what is shown in brow sers taskbar."
+                    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"
+                  })}
                 </Typography>
               </div>
               <PluginInfo
@@ -92,17 +104,22 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
                 <>
                   <div>
                     <Typography variant="h6">
-                      {i18n.t("Plugin Settings")}
+                      {intl.formatMessage({
+                        defaultMessage: "Plugin Settings",
+                        description: "plugin section title"
+                      })}
                     </Typography>
                     <Typography>
-                      {i18n.t(
+                      {intl.formatMessage({
-                        "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."
+                        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"
+                      })}
                     </Typography>
                   </div>
                   <PluginSettings
                     data={data}
-                    plugin={maybe(() => plugin.configuration, [])}
+                    fields={maybe(() => plugin.configuration, [])}
                     errors={errors}
                     disabled={disabled}
                     onChange={onChange}

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<typeof styles>) => {
+    const intl = useIntl();
     return (
       <Card>
         <Table>
@@ -70,13 +71,22 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
             items={plugins}
           >
             <TableCell className={classes.colName} padding="dense">
-              {i18n.t("Name", { context: "table header" })}
+              {intl.formatMessage({
+                defaultMessage: "Name",
+                description: "plugin list table header"
+              })}
             </TableCell>
             <TableCell className={classes.colActive} padding="dense">
-              {i18n.t("Active", { context: "table header" })}
+              {intl.formatMessage({
+                defaultMessage: "Active",
+                description: "plugin list table header"
+              })}
             </TableCell>
             <TableCell className={classes.colAction} padding="dense">
-              {i18n.t("Action", { context: "table header" })}
+              {intl.formatMessage({
+                defaultMessage: "Action",
+                description: "plugin list table header"
+              })}
             </TableCell>
           </TableHead>
           <TableFooter>
@@ -114,7 +124,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
                       {maybe<React.ReactNode>(
                         () => (
                           <StatusLabel
-                            label={translateBoolean(plugin.active)}
+                            label={translateBoolean(plugin.active, intl)}
                             status={plugin.active ? "success" : "error"}
                           />
                         ),
@@ -132,7 +142,10 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
               () => (
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
-                    {i18n.t("No plugins found")}
+                    {intl.formatMessage({
+                      defaultMessage: "No plugins found",
+                      description: "plugin no found"
+                    })}
                   </TableCell>
                 </TableRow>
               )

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<PluginsListPageProps> = ({
   onUpdateListSettings,
   pageInfo,
   plugins
-}) => (
+}) => {
-  <Container>
+  const intl = useIntl();
-    <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
+  return (
-    <PageHeader title={i18n.t("Plugins")} />
+    <Container>
-    <PluginsList
+      <AppHeader onBack={onBack}>
-      disabled={disabled}
+        {intl.formatMessage({
-      settings={settings}
+          defaultMessage: "Configuration",
-      plugins={plugins}
+          description: "plugin back button"
-      onNextPage={onNextPage}
+        })}
-      onPreviousPage={onPreviousPage}
+      </AppHeader>
-      onUpdateListSettings={onUpdateListSettings}
+      <PageHeader title={intl.formatMessage(sectionNames.plugins)} />
-      onRowClick={onRowClick}
+      <PluginsList
-      pageInfo={pageInfo}
+        disabled={disabled}
-    />
+        settings={settings}
-  </Container>
+        plugins={plugins}
-);
+        onNextPage={onNextPage}
+        onPreviousPage={onPreviousPage}
+        onUpdateListSettings={onUpdateListSettings}
+        onRowClick={onRowClick}
+        pageInfo={pageInfo}
+      />
+    </Container>
+  );
+};
 PluginsListPage.displayName = "PluginsListPage";
 export default PluginsListPage;

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<RouteComponentProps<any>> = ({
   );
 };
 
-const Component = () => (
+const Component = () => {
-  <>
+  const intl = useIntl();
-    <WindowTitle title={i18n.t("Plugins")} />
+  return (
-    <Switch>
+    <>
-      <Route exact path={pluginsListPath} component={PluginList} />
+      <WindowTitle title={intl.formatMessage(sectionNames.plugins)} />
-      <Route path={pluginsPath(":id")} component={PageDetails} />
+      <Switch>
-    </Switch>
+        <Route exact path={pluginsListPath} component={PluginList} />
-  </>
+        <Route path={pluginsPath(":id")} component={PageDetails} />
-);
+      </Switch>
+    </>
+  );
+};
 
 export default Component;

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<PluginsDetailsProps> = ({
 }) => {
   const navigate = useNavigator();
   const notify = useNotifier();
+  const intl = useIntl();
 
   return (
     <TypedPluginUpdate>
@@ -45,7 +47,10 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
             } else {
               if (pluginUpdateOpts.data) {
                 notify({
-                  text: i18n.t("Succesfully updated plugin settings")
+                  text: intl.formatMessage({
+                    defaultMessage: "Succesfully updated plugin settings",
+                    description: "plugin success message"
+                  })
                 });
               }
             }

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