Fix translation descriptions

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -3,12 +3,13 @@ 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 { FormattedMessage, 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 { commonMessages } from "@saleor/intl";
 import { FormData } from "../PluginsDetailsPage";
 
 interface PluginInfoProps {
@@ -41,7 +42,7 @@ const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Plugin Information and Status",
-          description: "plugin title"
+          description: "section header"
         })}
       />
       <CardContent>
@@ -55,10 +56,7 @@ const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
         {description && (
           <>
             <Typography className={classes.title} variant="h6">
-              {intl.formatMessage({
+              <FormattedMessage {...commonMessages.description} />
-                defaultMessage: "Plugin Description",
-                description: "plugin description"
-              })}
             </Typography>
             <Typography>{description}</Typography>
           </>
@@ -74,8 +72,7 @@ const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
         <ControlledSwitch
           checked={data.active}
           label={intl.formatMessage({
-            defaultMessage: "Set plugin as Active",
+            defaultMessage: "Set plugin as Active"
-            description: "plugin active label"
           })}
           name={"active" as keyof FormData}
           onChange={onChange}

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -46,7 +46,7 @@ const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Plugin Settings",
-          description: "plugin section title"
+          description: "section header"
         })}
       />
       <CardContent>

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -73,24 +73,28 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
               {intl.formatMessage(sectionNames.plugins)}
             </AppHeader>
             <PageHeader
-              title={`${maybe(() => plugin.name, "")} ${intl.formatMessage({
+              title={intl.formatMessage(
-                defaultMessage: "Details",
+                {
-                description: "plugin page title"
+                  defaultMessage: "{pluginName} Details",
-              })}`}
+                  description: "header"
+                },
+                {
+                  pluginName: maybe(() => plugin.name, "...")
+                }
+              )}
             />
             <Grid variant="inverted">
               <div>
                 <Typography variant="h6">
                   {intl.formatMessage({
                     defaultMessage: "Plugin Information and Status",
-                    description: "plugin section title"
+                    description: "section header"
                   })}
                 </Typography>
                 <Typography>
                   {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.",
+                      "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>
@@ -106,14 +110,13 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
                     <Typography variant="h6">
                       {intl.formatMessage({
                         defaultMessage: "Plugin Settings",
-                        description: "plugin section title"
+                        description: "section header"
                       })}
                     </Typography>
                     <Typography>
                       {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.",
+                          "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>

src/plugins/components/PluginsList/PluginsList.tsx

@@ -73,19 +73,19 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
             <TableCell className={classes.colName} padding="dense">
               {intl.formatMessage({
                 defaultMessage: "Name",
-                description: "plugin list table header"
+                description: "plugin name"
               })}
             </TableCell>
             <TableCell className={classes.colActive} padding="dense">
               {intl.formatMessage({
                 defaultMessage: "Active",
-                description: "plugin list table header"
+                description: "plugin status"
               })}
             </TableCell>
             <TableCell className={classes.colAction} padding="dense">
               {intl.formatMessage({
                 defaultMessage: "Action",
-                description: "plugin list table header"
+                description: "user action bar"
               })}
             </TableCell>
           </TableHead>
@@ -143,8 +143,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
                     {intl.formatMessage({
-                      defaultMessage: "No plugins found",
+                      defaultMessage: "No plugins found"
-                      description: "plugin no found"
                     })}
                   </TableCell>
                 </TableRow>

src/plugins/components/PluginsListPage/PluginsListPage.tsx

@@ -29,10 +29,7 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
   return (
     <Container>
       <AppHeader onBack={onBack}>
-        {intl.formatMessage({
+        {intl.formatMessage(sectionNames.configuration)}
-          defaultMessage: "Configuration",
-          description: "plugin back button"
-        })}
       </AppHeader>
       <PageHeader title={intl.formatMessage(sectionNames.plugins)} />
       <PluginsList

src/plugins/views/PluginsDetails.tsx

@@ -2,7 +2,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { getMutationState, maybe } from "../../misc";
 import PluginsDetailsPage from "../components/PluginsDetailsPage";