build(deps-dev): bump @lingui/cli from 3.17.2 to 4.5.0 in /web/app

BUILD.md

@@ -403,7 +403,6 @@ yarn lingui compile # done automatically in bin/web run
 Finally, make sure the new locale is also referred in the following places:
 
 - Under the `lingui` section in `package.json`
-- In the `make-plural/plurals` import in `index.js`
 - In the `langOptions` object in `index.js`
 
 ### Rust

web/app/js/components/BreadcrumbHeader.jsx

@@ -8,13 +8,13 @@ import { friendlyTitle, isResource, singularResource } from './util/Utils.js';
 import { withContext } from './util/AppContext.jsx';
 
 const routeToCrumbTitle = {
-  controlplane: <Trans>menuItemControlPlane</Trans>,
-  tap: <Trans>menuItemTap</Trans>,
-  top: <Trans>menuItemTop</Trans>,
-  routes: <Trans>menuItemRoutes</Trans>,
-  community: <Trans>menuItemCommunity</Trans>,
-  gateways: <Trans>menuItemGateway</Trans>,
-  extensions: <Trans>menuItemExtension</Trans>,
+  controlplane: <Trans id="menuItemControlPlane" />,
+  tap: <Trans id="menuItemTap" />,
+  top: <Trans id="menuItemTop" />,
+  routes: <Trans id="menuItemRoutes" />,
+  community: <Trans id="menuItemCommunity" />,
+  gateways: <Trans id="menuItemGateway" />,
+  extensions: <Trans id="menuItemExtension" />,
 };
 
 class BreadcrumbHeader extends React.Component {
@@ -87,7 +87,7 @@ class BreadcrumbHeader extends React.Component {
       return (
         <span key={pathSegment.segment}>
           {BreadcrumbHeader.renderBreadcrumbSegment(pathSegment.segment, breadcrumbs.length, index)}
-          { index < breadcrumbs.length - 1 ? ' > ' : null }
+          {index < breadcrumbs.length - 1 ? ' > ' : null}
         </span>
       );
     });

web/app/js/components/CallToAction.jsx

@@ -18,9 +18,9 @@ const styles = theme => ({
 
 function getSteps(numResources, resource) {
   return [
-    { label: <Trans>controllerInstalledMsg</Trans>, key: 'installedMsg' },
+    { label: <Trans id="controllerInstalledMsg" />, key: 'installedMsg' },
     { label: <Plural value={numResources} zero={resource} one={resource} other={resource} />, key: 'resourceMsg' },
-    { label: <Trans>connectResourceMsg {resource}</Trans>, content: incompleteMeshMessage(), key: 'connectMsg' },
+    { label: <Trans id="connectResourceMsg {resource}" />, content: incompleteMeshMessage(), key: 'connectMsg' },
   ];
 }
 
@@ -30,7 +30,7 @@ const CallToAction = function({ resource, numResources, classes }) {
 
   return (
     <React.Fragment>
-      <Typography><Trans>serviceMeshInstalledMsg</Trans></Typography>
+      <Typography><Trans id="serviceMeshInstalledMsg" /></Typography>
       <Stepper
         activeStep={lastStep}
         className={classes.instructions}

web/app/js/components/CheckModal.jsx

@@ -255,12 +255,12 @@ class CheckModal extends React.Component {
               color="primary"
               disabled={running}
               onClick={this.runCheck}>
-              <Trans>buttonRunLinkerdCheck</Trans>
+              <Trans id="buttonRunLinkerdCheck" />
             </Button>
           </Grid>
         </Grid>
 
-        { error !== undefined && <ErrorBanner message={error} /> }
+        {error !== undefined && <ErrorBanner message={error} />}
 
         <Dialog
           className={classes.dialog}
@@ -285,7 +285,7 @@ class CheckModal extends React.Component {
               {success !== undefined &&
                 <Grid item>
                   <SimpleChip
-                    label={success ? <Trans>labelSuccess</Trans> : <Trans>labelError</Trans>}
+                    label={success ? <Trans id="labelSuccess" /> : <Trans id="labelError" />}
                     type={success ? 'good' : 'bad'} />
                 </Grid>
               }
@@ -295,7 +295,7 @@ class CheckModal extends React.Component {
           <DialogContent className={classes.dialogContent}>
             <Paper className={classes.contentWrapper} elevation={3}>
               <div className={classes.content}>
-                { running ? (
+                {running ? (
                   <CircularProgress size={80} className={classes.spinner} />
                 ) : (
                   <React.Fragment>
@@ -316,11 +316,11 @@ class CheckModal extends React.Component {
 
           <DialogActions>
             <Button onClick={this.runCheck} color="primary">
-              <Trans>buttonReRunCheck</Trans>
+              <Trans id="buttonReRunCheck" />
             </Button>
 
             <Button onClick={this.handleOpenChange} color="primary">
-              <Trans>buttonClose</Trans>
+              <Trans id="buttonClose" />
             </Button>
           </DialogActions>
         </Dialog>

web/app/js/components/ConfigureProfilesMsg.jsx

@@ -132,7 +132,7 @@ class ConfigureProfilesMsg extends React.Component {
           color="primary"
           size="small"
           onClick={this.handleClickOpen}>
-          <Trans>buttonCreateServiceProfile</Trans>
+          <Trans id="buttonCreateServiceProfile" />
         </Button>
       );
     }
@@ -144,7 +144,7 @@ class ConfigureProfilesMsg extends React.Component {
         disabled={disableDownloadButton}
         onClick={() => this.handleClose(downloadUrl)}
         color="primary">
-        <Trans>buttonDownload</Trans>
+        <Trans id="buttonDownload" />
       </Button>
     );
 
@@ -156,11 +156,11 @@ class ConfigureProfilesMsg extends React.Component {
           onClose={this.handleClose}
           aria-labelledby="form-dialog-title">
           <DialogTitle id="form-dialog-title">
-            <Trans>New service profile</Trans>
+            <Trans id="New service profile" />
           </DialogTitle>
           <DialogContent>
             <DialogContentText>
-              <Trans>formCreateServiceProfileHelpText</Trans>
+              <Trans id="formCreateServiceProfileHelpText" />
             </DialogContentText>
             <FormControl
               className={classes.textField}
@@ -174,7 +174,7 @@ class ConfigureProfilesMsg extends React.Component {
                 aria-describedby="component-error-text" />
               {error.service && (
                 <FormHelperText id="component-error-text">
-                  <Trans>formServiceNameErrorText</Trans>
+                  <Trans id="formServiceNameErrorText" />
                 </FormHelperText>
               )}
             </FormControl>
@@ -190,14 +190,14 @@ class ConfigureProfilesMsg extends React.Component {
                 aria-describedby="component-error-text" />
               {error.namespace && (
                 <FormHelperText id="component-error-text">
-                  <Trans>formNamespaceErrorText</Trans>
+                  <Trans id="formNamespaceErrorText" />
                 </FormHelperText>
               )}
             </FormControl>
           </DialogContent>
           <DialogActions>
             <Button onClick={this.handleClose} color="primary">
-              <Trans>buttonCancel</Trans>
+              <Trans id="buttonCancel" />
             </Button>
             {disableDownloadButton ?
               downloadButton :
@@ -220,7 +220,7 @@ class ConfigureProfilesMsg extends React.Component {
       return (
         <CardContent>
           <Typography component="div">
-            <Trans>formNoNamedRouteTrafficFound</Trans>
+            <Trans id="formNoNamedRouteTrafficFound" />
             {this.renderDownloadProfileForm()}
           </Typography>
         </CardContent>

web/app/js/components/EdgesTable.jsx

@@ -26,7 +26,7 @@ const edgesColumnDefinitions = (PrefixedLink, namespace, type, classes) => {
       render: d => directionColumn(d.direction),
     },
     {
-      title: <Trans>columnTitleNamespace</Trans>,
+      title: <Trans id="columnTitleNamespace" />,
       dataIndex: 'namespace',
       isNumeric: false,
       filter: d => d.namespace,
@@ -38,7 +38,7 @@ const edgesColumnDefinitions = (PrefixedLink, namespace, type, classes) => {
       sorter: d => d.namespace,
     },
     {
-      title: <Trans>columnTitleName</Trans>,
+      title: <Trans id="columnTitleName" />,
       dataIndex: 'name',
       isNumeric: false,
       filter: d => d.name,
@@ -57,15 +57,15 @@ const edgesColumnDefinitions = (PrefixedLink, namespace, type, classes) => {
       sorter: d => d.name,
     },
     {
-      title: <Trans>columnTitleIdentity</Trans>,
+      title: <Trans id="columnTitleIdentity" />,
       dataIndex: 'identity',
       isNumeric: false,
       filter: d => d.identity,
       render: d => d.identity !== '' ? `${d.identity.split('.')[0]}.${d.identity.split('.')[1]}` : null,
       sorter: d => d.identity,
     },
     {
-      title: <Trans>columnTitleSecured</Trans>,
+      title: <Trans id="columnTitleSecured" />,
       dataIndex: 'message',
       isNumeric: true,
       render: d => {
@@ -84,12 +84,12 @@ const edgesColumnDefinitions = (PrefixedLink, namespace, type, classes) => {
 };
 
 const generateEdgesTableTitle = edges => {
-  let title = <Trans>tableTitleEdgesEmpty</Trans>;
+  let title = <Trans id="tableTitleEdgesEmpty" />;
   if (edges.length > 0) {
     let identity = edges[0].direction === 'INBOUND' ? edges[0].serverId : edges[0].clientId;
     if (identity) {
       identity = `${identity.split('.')[0]}.${identity.split('.')[1]}`;
-      title = <Trans>tableTitleEdgesWithIdentity {identity}</Trans>;
+      title = <Trans id="tableTitleEdgesWithIdentity {identity}" />;
     }
   }
   return title;

web/app/js/components/EmptyCard.jsx

@@ -17,7 +17,7 @@ const EmptyCard = function({ classes }) {
     <Card className={classes.card} elevation={3}>
       <CardContent>
         <Typography>
-          <Trans>NoDataToDisplayMsg</Trans>
+          <Trans id="NoDataToDisplayMsg" />
         </Typography>
       </CardContent>
     </Card>

web/app/js/components/ErrorModal.jsx

@@ -151,7 +151,7 @@ class ErrorModal extends React.Component {
 
     if (showInit) {
       return (
-        <Tooltip title={<Trans>podsAreInitializingMsg</Trans>}>
+        <Tooltip title={<Trans id="podsAreInitializingMsg" />}>
           <CircularProgress size={20} thickness={4} />
         </Tooltip>
       );

web/app/js/components/ExpandableTable.jsx

@@ -92,24 +92,24 @@ class ExpandableTable extends React.Component {
             </TableRow>
           </TableHead>
           <TableBody>
-            { tableRows.length > 0 && (
+            {tableRows.length > 0 && (
               <React.Fragment>
-                { tableRows.map(d => {
+                {tableRows.map(d => {
                   return (
                     <React.Fragment key={`frag-${d.key}`}>
                       <TableRow
                         key={d.key}
                         onClick={this.handleClick}>
                         {
-                            columns.map(c => (
-                              <TableCell
-                                key={`table-${d.key}-${c.key}`}
-                                className={classes.denseTable}
-                                align={c.isNumeric ? 'right' : 'left'}>
-                                {c.render(d)}
-                              </TableCell>
-                            ))
-                          }
+                          columns.map(c => (
+                            <TableCell
+                              key={`table-${d.key}-${c.key}`}
+                              className={classes.denseTable}
+                              align={c.isNumeric ? 'right' : 'left'}>
+                              {c.render(d)}
+                            </TableCell>
+                          ))
+                        }
                       </TableRow>
                     </React.Fragment>
                   );
@@ -119,7 +119,7 @@ class ExpandableTable extends React.Component {
           </TableBody>
         </Table>
 
-        { tableRows.length === 0 && (
+        {tableRows.length === 0 && (
           <EmptyCard />
         )}
 
@@ -129,7 +129,7 @@ class ExpandableTable extends React.Component {
           open={open}
           onClose={this.handleDialogClose}
           aria-labelledby="form-dialog-title">
-          <DialogTitle id="form-dialog-title"><Trans>tableTitleRequestDetails</Trans></DialogTitle>
+          <DialogTitle id="form-dialog-title"><Trans id="tableTitleRequestDetails" /></DialogTitle>
           <DialogContent>
             {expandedRowRender(datum, classes.expandedWrap)}
           </DialogContent>

web/app/js/components/Extensions.jsx

@@ -65,7 +65,7 @@ class Extensions extends React.Component {
       <Grid container direction="column" spacing={3} justifyContent="center" alignItems="center">
         <Grid item xs={12}>
           <Typography variant="h6">
-            <Trans>extensionsPageMsg</Trans>
+            <Trans id="extensionsPageMsg" />
           </Typography>
         </Grid>
         {extensions.map(ext => (
@@ -80,7 +80,7 @@ class Extensions extends React.Component {
                       color="primary"
                       href={ext.docLink}
                       target="_blank">
-                      <Trans>buttonLearnMore</Trans>
+                      <Trans id="buttonLearnMore" />
                     </Button>
                   </Grid>
                 </Grid>

web/app/js/components/Gateway.jsx

@@ -116,19 +116,19 @@ class Gateways extends React.Component {
           <Spinner />
         ) : (
           <div>
-            {noMetrics && multiclusterExists ? <div><Trans>noResourcesDetectedMsg</Trans></div> : null}
+            {noMetrics && multiclusterExists ? <div><Trans id="noResourcesDetectedMsg" /></div> : null}
             {(noMetrics && !multiclusterExists) &&
-            <Card>
-              <CardContent>
-                <Typography><Trans>installMulticlusterMsg</Trans></Typography>
-                <br />
-                <code>linkerd multicluster install | kubectl apply -f -</code>
-              </CardContent>
-            </Card>}
+              <Card>
+                <CardContent>
+                  <Typography><Trans id="installMulticlusterMsg" /></Typography>
+                  <br />
+                  <code>linkerd multicluster install | kubectl apply -f -</code>
+                </CardContent>
+              </Card>}
             {noMetrics ? null : (
               <div className="page-section">
                 <MetricsTable
-                  title={<Trans>tableTitleGateways</Trans>}
+                  title={<Trans id="tableTitleGateways" />}
                   resource="gateway"
                   metrics={metrics} />
               </div>

web/app/js/components/MeshedStatusTable.jsx

@@ -21,27 +21,27 @@ const getClassification = (meshedPodCount, failedPodCount) => {
 
 const namespacesColumns = PrefixedLink => [
   {
-    title: <Trans>columnTitleNamespace</Trans>,
+    title: <Trans id="columnTitleNamespace" />,
     dataIndex: 'namespace',
     sorter: d => d.namespace,
     render: d => {
       return (
         <Grid container alignItems="center" spacing={1}>
           <Grid item><PrefixedLink to={`/namespaces/${d.namespace}`}>{d.namespace}</PrefixedLink></Grid>
-          { _isEmpty(d.errors) ? null :
+          {_isEmpty(d.errors) ? null :
           <Grid item><ErrorModal errors={d.errors} resourceName={d.namespace} resourceType="namespace" /></Grid>
           }
         </Grid>
       );
     },
   },
   {
-    title: <Trans>columnTitleMeshedPods</Trans>,
+    title: <Trans id="columnTitleMeshedPods" />,
     dataIndex: 'meshedPodsStr',
     isNumeric: true,
   },
   {
-    title: <Trans>columnTitleMeshedStatus</Trans>,
+    title: <Trans id="columnTitleMeshedStatus" />,
     key: 'meshification',
     render: row => {
       const percent = row.meshedPercent.get();
@@ -60,9 +60,9 @@ const namespacesColumns = PrefixedLink => [
               <div>
                 {`${row.meshedPods} out of ${row.totalPods} running or pending pods are in the mesh ${percentMeshedMsg}`}
               </div>
-              {row.failedPods === 0 ? null : <div>{ `${row.failedPods} failed pods` }</div>}
+              {row.failedPods === 0 ? null : <div>{`${row.failedPods} failed pods`}</div>}
             </div>
-            )}>
+          )}>
           <Progress variant="determinate" value={Math.round(percent * 100)} />
         </Tooltip>
       );