Remove lingui (#1874)

* remove lingui

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* babelless

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak ts-loader options

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* tweak renderer webpack config

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/bootstrap.tsx

@@ -14,7 +14,6 @@ import { extensionLoader } from "../extensions/extension-loader";
 import { extensionsStore } from "../extensions/extensions-store";
 import { filesystemProvisionerStore } from "../main/extension-filesystem";
 import { App } from "./components/app";
-import { i18nStore } from "./i18n";
 import { LensApp } from "./lens-app";
 import { themeStore } from "./theme.store";
 
@@ -44,7 +43,6 @@ export async function bootstrap(App: AppComponent) {
     clusterStore.load(),
     extensionsStore.load(),
     filesystemProvisionerStore.load(),
-    i18nStore.init(),
     themeStore.init(),
   ]);
 

src/renderer/components/+404/not-found.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { TabLayout } from "../layout/tab-layout";
 
 export class NotFound extends React.Component {
@@ -7,7 +6,7 @@ export class NotFound extends React.Component {
     return (
       <TabLayout className="NotFound" contentClass="flex">
         <p className="box center">
-          <Trans>Page not found</Trans>
+          Page not found
         </p>
       </TabLayout>
     );

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -5,8 +5,6 @@ import { observer } from "mobx-react";
 import { action, observable, runInAction } from "mobx";
 import { remote } from "electron";
 import { KubeConfig } from "@kubernetes/client-node";
-import { _i18n } from "../../i18n";
-import { t, Trans } from "@lingui/macro";
 import { Select, SelectOption } from "../select";
 import { DropFileInput, Input } from "../input";
 import { AceEditor } from "../ace-editor";
@@ -118,8 +116,8 @@ export class AddCluster extends React.Component {
     const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
       defaultPath: this.kubeConfigPath,
       properties: ["openFile", "showHiddenFiles"],
-      message: _i18n._(t`Select custom kubeconfig file`),
-      buttonLabel: _i18n._(t`Use configuration`),
+      message: `Select custom kubeconfig file`,
+      buttonLabel: `Use configuration`,
     });
 
     if (!canceled && filePaths.length) {
@@ -138,7 +136,7 @@ export class AddCluster extends React.Component {
 
     try {
       if (!this.selectedContexts.length) {
-        this.error = <Trans>Please select at least one cluster context</Trans>;
+        this.error = "Please select at least one cluster context";
 
         return;
       }
@@ -156,7 +154,7 @@ export class AddCluster extends React.Component {
           this.error = String(err.message);
 
           if (err instanceof ExecValidationNotFoundError) {
-            Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
+            Notifications.error(<>Error while adding cluster(s): {this.error}</>);
 
             return false;
           } else {
@@ -193,7 +191,7 @@ export class AddCluster extends React.Component {
         } else {
           if (newClusters.length > 1) {
             Notifications.ok(
-              <Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
+              <>Successfully imported <b>{newClusters.length}</b> cluster(s)</>
             );
           }
         }
@@ -201,7 +199,7 @@ export class AddCluster extends React.Component {
       this.refreshContexts();
     } catch (err) {
       this.error = String(err);
-      Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
+      Notifications.error(<>Error while adding cluster(s): {this.error}</>);
     } finally {
       this.isWaiting = false;
     }
@@ -224,11 +222,11 @@ export class AddCluster extends React.Component {
         <Tabs onChange={this.onKubeConfigTabChange}>
           <Tab
             value={KubeConfigSourceTab.FILE}
-            label={<Trans>Select kubeconfig file</Trans>}
+            label="Select kubeconfig file"
             active={this.sourceTab == KubeConfigSourceTab.FILE}/>
           <Tab
             value={KubeConfigSourceTab.TEXT}
-            label={<Trans>Paste as text</Trans>}
+            label="Paste as text"
             active={this.sourceTab == KubeConfigSourceTab.TEXT}
           />
         </Tabs>
@@ -246,17 +244,17 @@ export class AddCluster extends React.Component {
                 <Icon
                   material="settings_backup_restore"
                   onClick={() => this.setKubeConfig(kubeConfigDefaultPath)}
-                  tooltip={<Trans>Reset</Trans>}
+                  tooltip="Reset"
                 />
               )}
               <Icon
                 material="folder"
                 onClick={this.selectKubeConfigDialog}
-                tooltip={<Trans>Browse</Trans>}
+                tooltip="Browse"
               />
             </div>
             <small className="hint">
-              <Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans>
+              Pro-Tip: you can also drag-n-drop kubeconfig file to this area
             </small>
           </div>
         )}
@@ -273,7 +271,7 @@ export class AddCluster extends React.Component {
               }}
             />
             <small className="hint">
-              <Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans>
+              Pro-Tip: paste kubeconfig to get available contexts
             </small>
           </div>
         )}
@@ -284,8 +282,8 @@ export class AddCluster extends React.Component {
   renderContextSelector() {
     const allContexts = Array.from(this.kubeContexts.keys());
     const placeholder = this.selectedContexts.length > 0
-      ? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans>
-      : <Trans>Select contexts</Trans>;
+      ? <>Selected contexts: <b>{this.selectedContexts.length}</b></>
+      : "Select contexts";
 
     return (
       <div>
@@ -297,7 +295,7 @@ export class AddCluster extends React.Component {
           isOptionSelected={() => false}
           options={allContexts}
           formatOptionLabel={this.formatContextLabel}
-          noOptionsMessage={() => _i18n._(t`No contexts available or they have been added already`)}
+          noOptionsMessage={() => `No contexts available or they have been added already`}
           onChange={({ value: ctx }: SelectOption<string>) => {
             if (this.selectedContexts.includes(ctx)) {
               this.selectedContexts.remove(ctx);
@@ -361,7 +359,7 @@ export class AddCluster extends React.Component {
           {this.renderContextSelector()}
           <div className="cluster-settings">
             <a href="#" onClick={() => this.showSettings = !this.showSettings}>
-              <Trans>Proxy settings</Trans>
+              Proxy settings
             </a>
           </div>
           {this.showSettings && (
@@ -386,10 +384,10 @@ export class AddCluster extends React.Component {
             <Button
               primary
               disabled={submitDisabled}
-              label={this.selectedContexts.length < 2 ? <Trans>Add cluster</Trans> : <Trans>Add clusters</Trans>}
+              label={this.selectedContexts.length < 2 ? "Add cluster" : "Add clusters"}
               onClick={this.addClusters}
               waiting={this.isWaiting}
-              tooltip={submitDisabled ? _i18n._("Select at least one cluster to add.") : undefined}
+              tooltip={submitDisabled ? "Select at least one cluster to add." : undefined}
               tooltipOverrideDisabled
             />
           </div>

src/renderer/components/+apps-helm-charts/helm-chart-details.tsx

@@ -2,7 +2,6 @@ import "./helm-chart-details.scss";
 
 import React, { Component } from "react";
 import { HelmChart, helmChartsApi } from "../../api/endpoints/helm-charts.api";
-import { t, Trans } from "@lingui/macro";
 import { observable, autorun } from "mobx";
 import { observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
@@ -14,7 +13,6 @@ import { Button } from "../button";
 import { Select, SelectOption } from "../select";
 import { createInstallChartTab } from "../dock/install-chart.store";
 import { Badge } from "../badge";
-import { _i18n } from "../../i18n";
 
 interface Props {
   chart: HelmChart;
@@ -84,9 +82,9 @@ export class HelmChartDetails extends Component<Props> {
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between">
             {selectedChart.getDescription()}
-            <Button primary label={_i18n._(t`Install`)} onClick={this.install} />
+            <Button primary label={`Install`} onClick={this.install} />
           </div>
-          <DrawerItem name={_i18n._(t`Version`)} className="version" onClick={stopPropagation}>
+          <DrawerItem name={`Version`} className="version" onClick={stopPropagation}>
             <Select
               themeName="outlined"
               menuPortalTarget={null}
@@ -95,16 +93,16 @@ export class HelmChartDetails extends Component<Props> {
               onChange={onVersionChange}
             />
           </DrawerItem>
-          <DrawerItem name={_i18n._(t`Home`)}>
+          <DrawerItem name={`Home`}>
             <a href={selectedChart.getHome()} target="_blank" rel="noreferrer">{selectedChart.getHome()}</a>
           </DrawerItem>
-          <DrawerItem name={_i18n._(t`Maintainers`)} className="maintainers">
+          <DrawerItem name={`Maintainers`} className="maintainers">
             {selectedChart.getMaintainers().map(({ name, email, url }) =>
               <a key={name} href={url || `mailto:${email}`} target="_blank" rel="noreferrer">{name}</a>
             )}
           </DrawerItem>
           {selectedChart.getKeywords().length > 0 && (
-            <DrawerItem name={_i18n._(t`Keywords`)} labelsOnly>
+            <DrawerItem name={`Keywords`} labelsOnly>
               {selectedChart.getKeywords().map(key => <Badge key={key} label={key} />)}
             </DrawerItem>
           )}
@@ -148,7 +146,7 @@ export class HelmChartDetails extends Component<Props> {
 
   render() {
     const { chart, hideDetails } = this.props;
-    const title = chart ? <Trans>Chart: {chart.getFullName()}</Trans> : "";
+    const title = chart ? <>Chart: {chart.getFullName()}</> : "";
 
     return (
       <Drawer

src/renderer/components/+apps-helm-charts/helm-charts.tsx

@@ -9,8 +9,6 @@ import { HelmChart } from "../../api/endpoints/helm-charts.api";
 import { HelmChartDetails } from "./helm-chart-details";
 import { navigation } from "../../navigation";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { SearchInputUrl } from "../input";
 
 enum sortBy {
@@ -73,15 +71,15 @@ export class HelmCharts extends Component<Props> {
             (items: HelmChart[]) => items.filter(item => !item.deprecated)
           ]}
           customizeHeader={() => (
-            <SearchInputUrl placeholder={_i18n._(t`Search Helm Charts`)} />
+            <SearchInputUrl placeholder={`Search Helm Charts`} />
           )}
           renderTableHeader={[
             { className: "icon" },
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-            { title: <Trans>Description</Trans>, className: "description" },
-            { title: <Trans>Version</Trans>, className: "version" },
-            { title: <Trans>App Version</Trans>, className: "app-version" },
-            { title: <Trans>Repository</Trans>, className: "repository", sortBy: sortBy.repo },
+            { title: "Name", className: "name", sortBy: sortBy.name },
+            { title: "Description", className: "description" },
+            { title: "Version", className: "version" },
+            { title: "App Version", className: "app-version" },
+            { title: "Repository", className: "repository", sortBy: sortBy.repo },
 
           ]}
           renderTableContents={(chart: HelmChart) => [

src/renderer/components/+apps-releases/release-details.tsx

@@ -5,7 +5,6 @@ import groupBy from "lodash/groupBy";
 import isEqual from "lodash/isEqual";
 import { observable, reaction } from "mobx";
 import { Link } from "react-router-dom";
-import { t, Trans } from "@lingui/macro";
 import kebabCase from "lodash/kebabCase";
 import { HelmRelease, helmReleasesApi, IReleaseDetails } from "../../api/endpoints/helm-releases.api";
 import { HelmReleaseMenu } from "./release-menu";
@@ -20,7 +19,6 @@ import { Button } from "../button";
 import { releaseStore } from "./release.store";
 import { Notifications } from "../notifications";
 import { createUpgradeChartTab } from "../dock/upgrade-chart.store";
-import { _i18n } from "../../i18n";
 import { themeStore } from "../../theme.store";
 import { apiManager } from "../../api/api-manager";
 import { SubTitle } from "../layout/sub-title";
@@ -113,7 +111,7 @@ export class ReleaseDetails extends Component<Props> {
 
     return (
       <div className="values">
-        <DrawerTitle title={_i18n._(t`Values`)}/>
+        <DrawerTitle title={`Values`}/>
         <div className="flex column gaps">
           <AceEditor
             mode="yaml"
@@ -122,7 +120,7 @@ export class ReleaseDetails extends Component<Props> {
           />
           <Button
             primary
-            label={_i18n._(t`Save`)}
+            label={`Save`}
             waiting={saving}
             onClick={this.updateValues}
           />
@@ -197,40 +195,40 @@ export class ReleaseDetails extends Component<Props> {
 
     return (
       <div>
-        <DrawerItem name={<Trans>Chart</Trans>} className="chart">
+        <DrawerItem name="Chart" className="chart">
           <div className="flex gaps align-center">
             <span>{release.getChart()}</span>
             <Button
               primary
-              label={_i18n._(t`Upgrade`)}
+              label={`Upgrade`}
               className="box right upgrade"
               onClick={this.upgradeVersion}
             />
           </div>
         </DrawerItem>
-        <DrawerItem name={<Trans>Updated</Trans>}>
-          {release.getUpdated()} <Trans>ago</Trans> ({release.updated})
+        <DrawerItem name="Updated">
+          {release.getUpdated()} ago ({release.updated})
         </DrawerItem>
-        <DrawerItem name={<Trans>Namespace</Trans>}>
+        <DrawerItem name="Namespace">
           {release.getNs()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Version</Trans>} onClick={stopPropagation}>
+        <DrawerItem name="Version" onClick={stopPropagation}>
           <div className="version flex gaps align-center">
             <span>
               {release.getVersion()}
             </span>
           </div>
         </DrawerItem>
-        <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
+        <DrawerItem name="Status" className="status" labelsOnly>
           <Badge
             label={release.getStatus()}
             className={cssNames("status", kebabCase(release.getStatus()))}
           />
         </DrawerItem>
         {this.renderValues()}
-        <DrawerTitle title={_i18n._(t`Notes`)}/>
+        <DrawerTitle title={`Notes`}/>
         {this.renderNotes()}
-        <DrawerTitle title={_i18n._(t`Resources`)}/>
+        <DrawerTitle title={`Resources`}/>
         {this.renderResources()}
       </div>
     );
@@ -238,7 +236,7 @@ export class ReleaseDetails extends Component<Props> {
 
   render() {
     const { release, hideDetails } = this.props;
-    const title = release ? <Trans>Release: {release.getName()}</Trans> : "";
+    const title = release ? <>Release: {release.getName()}</> : "";
     const toolbar = <HelmReleaseMenu release={release} toolbar hideDetails={hideDetails}/>;
 
     return (

src/renderer/components/+apps-releases/release-menu.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { t, Trans } from "@lingui/macro";
 import { HelmRelease } from "../../api/endpoints/helm-releases.api";
 import { autobind, cssNames } from "../../utils";
 import { releaseStore } from "./release.store";
@@ -8,7 +7,6 @@ import { MenuItem } from "../menu";
 import { Icon } from "../icon";
 import { ReleaseRollbackDialog } from "./release-rollback-dialog";
 import { createUpgradeChartTab } from "../dock/upgrade-chart.store";
-import { _i18n } from "../../i18n";
 
 interface Props extends MenuActionsProps {
   release: HelmRelease;
@@ -44,8 +42,8 @@ export class HelmReleaseMenu extends React.Component<Props> {
       <>
         {hasRollback && (
           <MenuItem onClick={this.rollback}>
-            <Icon material="history" interactive={toolbar} title={_i18n._(t`Rollback`)}/>
-            <span className="title"><Trans>Rollback</Trans></span>
+            <Icon material="history" interactive={toolbar} title={`Rollback`}/>
+            <span className="title">Rollback</span>
           </MenuItem>
         )}
       </>

src/renderer/components/+apps-releases/release-rollback-dialog.tsx

@@ -3,7 +3,6 @@ import "./release-rollback-dialog.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { HelmRelease, helmReleasesApi, IReleaseRevision } from "../../api/endpoints/helm-releases.api";
@@ -68,12 +67,12 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
     const { revision, revisions } = this;
 
     if (!revision) {
-      return <p><Trans>No revisions to rollback.</Trans></p>;
+      return <p>No revisions to rollback.</p>;
     }
 
     return (
       <div className="flex gaps align-center">
-        <b><Trans>Revision</Trans></b>
+        <b>Revision</b>
         <Select
           themeName="light"
           value={revision}
@@ -88,7 +87,7 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
   render() {
     const { ...dialogProps } = this.props;
     const releaseName = this.release ? this.release.getName() : "";
-    const header = <h5><Trans>Rollback <b>{releaseName}</b></Trans></h5>;
+    const header = <h5>Rollback <b>{releaseName}</b></h5>;
 
     return (
       <Dialog
@@ -101,7 +100,7 @@ export class ReleaseRollbackDialog extends React.Component<Props> {
         <Wizard header={header} done={this.close}>
           <WizardStep
             scrollable={false}
-            nextLabel={<Trans>Rollback</Trans>}
+            nextLabel="Rollback"
             next={this.rollback}
             loading={this.isLoading}
           >

src/renderer/components/+apps-releases/releases.tsx

@@ -3,7 +3,6 @@ import "./releases.scss";
 import React, { Component } from "react";
 import kebabCase from "lodash/kebabCase";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { releaseStore } from "./release.store";
 import { IReleaseRouteParams, releaseURL } from "./release.route";
@@ -70,9 +69,9 @@ export class HelmReleases extends Component<Props> {
 
     return (
       <div>
-        <Trans>Remove <b>{releaseNames}</b>?</Trans>
+        <>Remove <b>{releaseNames}</b>?</>
         <p className="warning">
-          <Trans>Note: StatefulSet Volumes won&apos;t be deleted automatically</Trans>
+          Note: StatefulSet Volumes won&apos;t be deleted automatically
         </p>
       </div>
     );
@@ -100,16 +99,16 @@ export class HelmReleases extends Component<Props> {
             (release: HelmRelease) => release.getStatus(),
             (release: HelmRelease) => release.getVersion(),
           ]}
-          renderHeaderTitle={<Trans>Releases</Trans>}
+          renderHeaderTitle="Releases"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-            { title: <Trans>Chart</Trans>, className: "chart", sortBy: sortBy.chart },
-            { title: <Trans>Revision</Trans>, className: "revision", sortBy: sortBy.revision },
-            { title: <Trans>Version</Trans>, className: "version" },
-            { title: <Trans>App Version</Trans>, className: "app-version" },
-            { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
-            { title: <Trans>Updated</Trans>, className: "updated", sortBy: sortBy.updated },
+            { title: "Name", className: "name", sortBy: sortBy.name },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Chart", className: "chart", sortBy: sortBy.chart },
+            { title: "Revision", className: "revision", sortBy: sortBy.revision },
+            { title: "Version", className: "version" },
+            { title: "App Version", className: "app-version" },
+            { title: "Status", className: "status", sortBy: sortBy.status },
+            { title: "Updated", className: "updated", sortBy: sortBy.updated },
           ]}
           renderTableContents={(release: HelmRelease) => {
             const version = release.getVersion();

src/renderer/components/+apps/apps.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { HelmCharts, helmChartsRoute, helmChartsURL } from "../+apps-helm-charts";
 import { HelmReleases, releaseRoute, releaseURL } from "../+apps-releases";
@@ -13,13 +12,13 @@ export class Apps extends React.Component {
 
     return [
       {
-        title: <Trans>Charts</Trans>,
+        title: "Charts",
         component: HelmCharts,
         url: helmChartsURL(),
         routePath: helmChartsRoute.path.toString(),
       },
       {
-        title: <Trans>Releases</Trans>,
+        title: "Releases",
         component: HelmReleases,
         url: releaseURL({ query }),
         routePath: releaseRoute.path.toString(),

src/renderer/components/+cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -4,8 +4,6 @@ import { Cluster } from "../../../../main/cluster";
 import { SubTitle } from "../../layout/sub-title";
 import { EditableList } from "../../editable-list";
 import { observable } from "mobx";
-import { _i18n } from "../../../i18n";
-import { Trans } from "@lingui/macro";
 
 interface Props {
   cluster: Cluster;
@@ -19,9 +17,9 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Accessible Namespaces" />
-        <p><Trans>This setting is useful for manually specifying which namespaces you have access to. This is useful when you don&apos;t have permissions to list namespaces.</Trans></p>
+        <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you don&apos;t have permissions to list namespaces.</p>
         <EditableList
-          placeholder={_i18n._("Add new namespace...")}
+          placeholder="Add new namespace..."
           add={(newNamespace) => {
             this.namespaces.add(newNamespace);
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);

src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { clusterStore } from "../../../../common/cluster-store";
 import { Cluster } from "../../../../main/cluster";
@@ -19,8 +18,8 @@ export class RemoveClusterButton extends React.Component<Props> {
 
     ConfirmDialog.open({
       message: <p>Are you sure you want to remove <b>{cluster.preferences.clusterName}</b> from Lens?</p>,
-      labelOk: <Trans>Yes</Trans>,
-      labelCancel: <Trans>No</Trans>,
+      labelOk: "Yes",
+      labelCancel: "No",
       ok: async () => {
         await clusterStore.removeById(cluster.id);
       }

src/renderer/components/+cluster/cluster-issues.tsx

@@ -3,7 +3,6 @@ import "./cluster-issues.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Trans } from "@lingui/macro";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -114,8 +113,8 @@ export class ClusterIssues extends React.Component<Props> {
       return (
         <div className="no-issues flex column box grow gaps align-center justify-center">
           <div><Icon material="check" big sticker/></div>
-          <div className="ok-title"><Trans>No issues found</Trans></div>
-          <span><Trans>Everything is fine in the Cluster</Trans></span>
+          <div className="ok-title">No issues found</div>
+          <span>Everything is fine in the Cluster</span>
         </div>
       );
     }
@@ -124,7 +123,7 @@ export class ClusterIssues extends React.Component<Props> {
       <>
         <SubHeader>
           <Icon material="error_outline"/>{" "}
-          <Trans>Warnings: {warnings.length}</Trans>
+          <>Warnings: {warnings.length}</>
         </SubHeader>
         <Table
           items={warnings}
@@ -137,9 +136,9 @@ export class ClusterIssues extends React.Component<Props> {
           className={cssNames("box grow", themeStore.activeTheme.type)}
         >
           <TableHead nowrap>
-            <TableCell className="message"><Trans>Message</Trans></TableCell>
-            <TableCell className="object" sortBy={sortBy.object}><Trans>Object</Trans></TableCell>
-            <TableCell className="kind" sortBy={sortBy.type}><Trans>Type</Trans></TableCell>
+            <TableCell className="message">Message</TableCell>
+            <TableCell className="object" sortBy={sortBy.object}>Object</TableCell>
+            <TableCell className="kind" sortBy={sortBy.type}>Type</TableCell>
           </TableHead>
         </Table>
       </>

src/renderer/components/+cluster/cluster-metric-switchers.tsx

@@ -1,7 +1,6 @@
 import "./cluster-metric-switchers.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { cssNames } from "../../utils";
@@ -24,8 +23,8 @@ export const ClusterMetricSwitchers = observer(() => {
           value={metricNodeRole}
           onChange={(metric: MetricNodeRole) => clusterOverviewStore.metricNodeRole = metric}
         >
-          <Radio label={<Trans>Master</Trans>} value={MetricNodeRole.MASTER}/>
-          <Radio label={<Trans>Worker</Trans>} value={MetricNodeRole.WORKER}/>
+          <Radio label="Master" value={MetricNodeRole.MASTER}/>
+          <Radio label="Worker" value={MetricNodeRole.WORKER}/>
         </RadioGroup>
       </div>
       <div className="box grow metric-switch">
@@ -35,10 +34,10 @@ export const ClusterMetricSwitchers = observer(() => {
           value={metricType}
           onChange={(value: MetricType) => clusterOverviewStore.metricType = value}
         >
-          <Radio label={<Trans>CPU</Trans>} value={MetricType.CPU}/>
-          <Radio label={<Trans>Memory</Trans>} value={MetricType.MEMORY}/>
+          <Radio label="CPU" value={MetricType.CPU}/>
+          <Radio label="Memory" value={MetricType.MEMORY}/>
         </RadioGroup>
       </div>
     </div>
   );
-});
+});

src/renderer/components/+cluster/cluster-no-metrics.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Icon } from "../icon";
-import { Trans } from "@lingui/macro";
 import { cssNames } from "../../utils";
 
 interface Props {
@@ -11,8 +10,8 @@ export function ClusterNoMetrics({ className }: Props) {
   return (
     <div className={cssNames("ClusterNoMetrics flex column box grow justify-center align-center", className)}>
       <Icon material="info"/>
-      <p><Trans>Metrics are not available due to missing or invalid Prometheus configuration.</Trans></p>
-      <p><Trans>Right click cluster icon to open cluster settings.</Trans></p>
+      <p>Metrics are not available due to missing or invalid Prometheus configuration.</p>
+      <p>Right click cluster icon to open cluster settings.</p>
     </div>
   );
 }

src/renderer/components/+cluster/cluster-pie-charts.tsx

@@ -2,8 +2,6 @@ import "./cluster-pie-charts.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { useLingui } from "@lingui/react";
 import { clusterOverviewStore, MetricNodeRole } from "./cluster-overview.store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
@@ -15,13 +13,11 @@ import { themeStore } from "../../theme.store";
 import { getMetricLastPoints } from "../../api/endpoints/metrics.api";
 
 export const ClusterPieCharts = observer(() => {
-  const { i18n } = useLingui();
-
   const renderLimitWarning = () => {
     return (
       <div className="node-warning flex gaps align-center">
         <Icon material="info"/>
-        <p><Trans>Specified limits are higher than node capacity!</Trans></p>
+        <p>Specified limits are higher than node capacity!</p>
       </div>
     );
   };
@@ -73,10 +69,10 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        `${i18n._(t`Usage`)}: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
-        `${i18n._(t`Requests`)}: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
-        `${i18n._(t`Limits`)}: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
-        `${i18n._(t`Capacity`)}: ${cpuCapacity || "N/A"}`
+        `Usage: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
+        `Requests: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
+        `Limits: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
+        `Capacity: ${cpuCapacity || "N/A"}`
       ]
     };
     const memoryData: ChartData = {
@@ -116,10 +112,10 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        `${i18n._(t`Usage`)}: ${bytesToUnits(memoryUsage)}`,
-        `${i18n._(t`Requests`)}: ${bytesToUnits(memoryRequests)}`,
-        `${i18n._(t`Limits`)}: ${bytesToUnits(memoryLimits)}`,
-        `${i18n._(t`Capacity`)}: ${bytesToUnits(memoryCapacity)}`,
+        `Usage: ${bytesToUnits(memoryUsage)}`,
+        `Requests: ${bytesToUnits(memoryRequests)}`,
+        `Limits: ${bytesToUnits(memoryLimits)}`,
+        `Capacity: ${bytesToUnits(memoryCapacity)}`,
       ]
     };
     const podsData: ChartData = {
@@ -137,8 +133,8 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        `${i18n._(t`Usage`)}: ${podUsage || 0}`,
-        `${i18n._(t`Capacity`)}: ${podCapacity}`,
+        `Usage: ${podUsage || 0}`,
+        `Capacity: ${podCapacity}`,
       ]
     };
 
@@ -147,7 +143,7 @@ export const ClusterPieCharts = observer(() => {
         <div className="chart flex column align-center box grow">
           <PieChart
             data={cpuData}
-            title={i18n._(t`CPU`)}
+            title={`CPU`}
             legendColors={["#c93dce", "#4caf50", "#3d90ce", defaultColor]}
           />
           {cpuLimitsOverload && renderLimitWarning()}
@@ -155,7 +151,7 @@ export const ClusterPieCharts = observer(() => {
         <div className="chart flex column align-center box grow">
           <PieChart
             data={memoryData}
-            title={i18n._(t`Memory`)}
+            title={`Memory`}
             legendColors={["#c93dce", "#4caf50", "#3d90ce", defaultColor]}
           />
           {memoryLimitsOverload && renderLimitWarning()}
@@ -163,7 +159,7 @@ export const ClusterPieCharts = observer(() => {
         <div className="chart flex column align-center box grow">
           <PieChart
             data={podsData}
-            title={i18n._(t`Pods`)}
+            title={`Pods`}
             legendColors={["#4caf50", defaultColor]}
           />
         </div>
@@ -180,7 +176,7 @@ export const ClusterPieCharts = observer(() => {
       return (
         <div className="empty flex column box grow align-center justify-center">
           <Icon material="info"/>
-          <Trans>No Nodes Available.</Trans>
+          No Nodes Available.
         </div>
       );
     }
@@ -206,4 +202,4 @@ export const ClusterPieCharts = observer(() => {
       {renderContent()}
     </div>
   );
-});
+});

src/renderer/components/+config-autoscalers/hpa-details.tsx

@@ -9,7 +9,6 @@ import { KubeObjectDetailsProps, getDetailsUrl } from "../kube-object";
 import { cssNames } from "../../utils";
 import { HorizontalPodAutoscaler, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
 import { KubeEventDetails } from "../+events/kube-event-details";
-import { Trans } from "@lingui/macro";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { lookupApiLink } from "../../api/kube-api";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
@@ -26,12 +25,12 @@ export class HpaDetails extends React.Component<Props> {
     const renderName = (metric: IHpaMetric) => {
       switch (metric.type) {
         case HpaMetricType.Resource:
-          const addition = metric.resource.targetAverageUtilization ? <Trans>(as a percentage of request)</Trans> : "";
+          const addition = metric.resource.targetAverageUtilization ? <>(as a percentage of request)</> : "";
 
-          return <Trans>Resource {metric.resource.name} on Pods {addition}</Trans>;
+          return <>Resource {metric.resource.name} on Pods {addition}</>;
 
         case HpaMetricType.Pods:
-          return <Trans>{metric.pods.metricName} on Pods</Trans>;
+          return <>{metric.pods.metricName} on Pods</>;
 
         case HpaMetricType.Object:
           const { target } = metric.object;
@@ -39,17 +38,17 @@ export class HpaDetails extends React.Component<Props> {
           const objectUrl = getDetailsUrl(lookupApiLink(target, hpa));
 
           return (
-            <Trans>
+            <>
               {metric.object.metricName} on{" "}
               <Link to={objectUrl}>{kind}/{name}</Link>
-            </Trans>
+            </>
           );
         case HpaMetricType.External:
           return (
-            <Trans>
+            <>
               {metric.external.metricName} on{" "}
               {JSON.stringify(metric.external.selector)}
-            </Trans>
+            </>
           );
       }
     };
@@ -57,8 +56,8 @@ export class HpaDetails extends React.Component<Props> {
     return (
       <Table>
         <TableHead>
-          <TableCell className="name"><Trans>Name</Trans></TableCell>
-          <TableCell className="metrics"><Trans>Current / Target</Trans></TableCell>
+          <TableCell className="name">Name</TableCell>
+          <TableCell className="metrics">Current / Target</TableCell>
         </TableHead>
         {
           hpa.getMetrics().map((metric, index) => {
@@ -87,7 +86,7 @@ export class HpaDetails extends React.Component<Props> {
       <div className="HpaDetails">
         <KubeObjectMeta object={hpa}/>
 
-        <DrawerItem name={<Trans>Reference</Trans>}>
+        <DrawerItem name="Reference">
           {scaleTargetRef && (
             <Link to={getDetailsUrl(lookupApiLink(scaleTargetRef, hpa))}>
               {scaleTargetRef.kind}/{scaleTargetRef.name}
@@ -95,19 +94,19 @@ export class HpaDetails extends React.Component<Props> {
           )}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Min Pods</Trans>}>
+        <DrawerItem name="Min Pods">
           {hpa.getMinPods()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Max Pods</Trans>}>
+        <DrawerItem name="Max Pods">
           {hpa.getMaxPods()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Replicas</Trans>}>
+        <DrawerItem name="Replicas">
           {hpa.getReplicas()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+        <DrawerItem name="Status" labelsOnly>
           {hpa.getConditions().map(({ type, tooltip, isReady }) => {
             if (!isReady) return null;
 

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -3,7 +3,6 @@ import "./hpa.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { Trans } from "@lingui/macro";
 import { KubeObjectListLayout } from "../kube-object";
 import { IHpaRouteParams } from "./hpa.route";
 import { HorizontalPodAutoscaler } from "../../api/endpoints/hpa.api";
@@ -29,7 +28,7 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
   getTargets(hpa: HorizontalPodAutoscaler) {
     const metrics = hpa.getMetrics();
     const metricsRemainCount = metrics.length - 1;
-    const metricsRemain = metrics.length > 1 ? <Trans>{metricsRemainCount} more...</Trans> : null;
+    const metricsRemain = metrics.length > 1 ? <>{metricsRemainCount} more...</> : null;
     const metricValues = hpa.getMetricValues(metrics[0]);
 
     return <p>{metricValues} {metricsRemain && "+"}{metricsRemain}</p>;
@@ -49,17 +48,17 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
         searchFilters={[
           (item: HorizontalPodAutoscaler) => item.getSearchFields()
         ]}
-        renderHeaderTitle={<Trans>Horizontal Pod Autoscalers</Trans>}
+        renderHeaderTitle="Horizontal Pod Autoscalers"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Metrics</Trans>, className: "metrics" },
-          { title: <Trans>Min Pods</Trans>, className: "min-pods", sortBy: sortBy.minPods },
-          { title: <Trans>Max Pods</Trans>, className: "max-pods", sortBy: sortBy.maxPods },
-          { title: <Trans>Replicas</Trans>, className: "replicas", sortBy: sortBy.replicas },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status" },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Metrics", className: "metrics" },
+          { title: "Min Pods", className: "min-pods", sortBy: sortBy.minPods },
+          { title: "Max Pods", className: "max-pods", sortBy: sortBy.maxPods },
+          { title: "Replicas", className: "replicas", sortBy: sortBy.replicas },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Status", className: "status" },
         ]}
         renderTableContents={(hpa: HorizontalPodAutoscaler) => [
           hpa.getName(),

src/renderer/components/+config-maps/config-map-details.tsx

@@ -3,7 +3,6 @@ import "./config-map-details.scss";
 import React from "react";
 import { autorun, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerTitle } from "../drawer";
 import { Notifications } from "../notifications";
 import { Input } from "../input";
@@ -43,7 +42,7 @@ export class ConfigMapDetails extends React.Component<Props> {
       await configMapsStore.update(configMap, { ...configMap, data: this.data.toJSON() });
       Notifications.ok(
         <p>
-          <Trans>ConfigMap <b>{configMap.getName()}</b> successfully updated.</Trans>
+          <>ConfigMap <b>{configMap.getName()}</b> successfully updated.</>
         </p>
       );
     } finally {
@@ -63,7 +62,7 @@ export class ConfigMapDetails extends React.Component<Props> {
         {
           data.length > 0 && (
             <>
-              <DrawerTitle title={<Trans>Data</Trans>}/>
+              <DrawerTitle title="Data"/>
               {
                 data.map(([name, value]) => {
                   return (
@@ -84,7 +83,7 @@ export class ConfigMapDetails extends React.Component<Props> {
               }
               <Button
                 primary
-                label={<Trans>Save</Trans>} waiting={this.isSaving}
+                label="Save" waiting={this.isSaving}
                 className="save-btn"
                 onClick={this.save}
               />

src/renderer/components/+config-maps/config-maps.tsx

@@ -2,7 +2,6 @@ import "./config-maps.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { configMapsStore } from "./config-maps.store";
 import { ConfigMap } from "../../api/endpoints/configmap.api";
@@ -36,13 +35,13 @@ export class ConfigMaps extends React.Component<Props> {
           (item: ConfigMap) => item.getSearchFields(),
           (item: ConfigMap) => item.getKeys()
         ]}
-        renderHeaderTitle={<Trans>Config Maps</Trans>}
+        renderHeaderTitle="Config Maps"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Keys</Trans>, className: "keys", sortBy: sortBy.keys },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Keys", className: "keys", sortBy: sortBy.keys },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(configMap: ConfigMap) => [
           configMap.getName(),

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets-details.tsx

@@ -2,7 +2,6 @@ import "./pod-disruption-budgets-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -27,26 +26,26 @@ export class PodDisruptionBudgetDetails extends React.Component<Props> {
         <KubeObjectMeta object={pdb}/>
 
         {selectors.length > 0 &&
-          <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+          <DrawerItem name="Selector" labelsOnly>
             {
               selectors.map(label => <Badge key={label} label={label}/>)
             }
           </DrawerItem>
         }
 
-        <DrawerItem name={<Trans>Min Available</Trans>}>
+        <DrawerItem name="Min Available">
           {pdb.getMinAvailable()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Max Unavailable</Trans>}>
+        <DrawerItem name="Max Unavailable">
           {pdb.getMaxUnavailable()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Current Healthy</Trans>}>
+        <DrawerItem name="Current Healthy">
           {pdb.getCurrentHealthy()}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Desired Healthy</Trans>}>
+        <DrawerItem name="Desired Healthy">
           {pdb.getDesiredHealthy()}
         </DrawerItem>
 

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx

@@ -2,7 +2,6 @@ import "./pod-disruption-budgets.scss";
 
 import * as React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { podDisruptionBudgetsStore } from "./pod-disruption-budgets.store";
 import { PodDisruptionBudget } from "../../api/endpoints/poddisruptionbudget.api";
 import { KubeObjectDetailsProps, KubeObjectListLayout } from "../kube-object";
@@ -40,16 +39,16 @@ export class PodDisruptionBudgets extends React.Component<Props> {
         searchFilters={[
           (pdb: PodDisruptionBudget) => pdb.getSearchFields(),
         ]}
-        renderHeaderTitle={<Trans>Pod Disruption Budgets</Trans>}
+        renderHeaderTitle="Pod Disruption Budgets"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Min Available</Trans>, className: "min-available", sortBy: sortBy.minAvailable },
-          { title: <Trans>Max Unavailable</Trans>, className: "max-unavailable", sortBy: sortBy.maxUnavailable },
-          { title: <Trans>Current Healthy</Trans>, className: "current-healthy", sortBy: sortBy.currentHealthy },
-          { title: <Trans>Desired Healthy</Trans>, className: "desired-healthy", sortBy: sortBy.desiredHealthy },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Min Available", className: "min-available", sortBy: sortBy.minAvailable },
+          { title: "Max Unavailable", className: "max-unavailable", sortBy: sortBy.maxUnavailable },
+          { title: "Current Healthy", className: "current-healthy", sortBy: sortBy.currentHealthy },
+          { title: "Desired Healthy", className: "desired-healthy", sortBy: sortBy.desiredHealthy },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(pdb: PodDisruptionBudget) => {
           return [

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -3,8 +3,6 @@ import "./add-quota-dialog.scss";
 import React from "react";
 import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Input } from "../input";
@@ -129,7 +127,7 @@ export class AddQuotaDialog extends React.Component<Props> {
 
   render() {
     const { ...dialogProps } = this.props;
-    const header = <h5><Trans>Create ResourceQuota</Trans></h5>;
+    const header = <h5>Create ResourceQuota</h5>;
 
     return (
       <Dialog
@@ -142,41 +140,41 @@ export class AddQuotaDialog extends React.Component<Props> {
           <WizardStep
             contentClass="flex gaps column"
             disabledNext={!this.namespace}
-            nextLabel={<Trans>Create</Trans>}
+            nextLabel="Create"
             next={this.addQuota}
           >
             <div className="flex gaps">
               <Input
                 required autoFocus
-                placeholder={_i18n._(t`ResourceQuota name`)}
+                placeholder={`ResourceQuota name`}
                 validators={systemName}
                 value={this.quotaName} onChange={v => this.quotaName = v.toLowerCase()}
                 className="box grow"
               />
             </div>
 
-            <SubTitle title={<Trans>Namespace</Trans>} />
+            <SubTitle title="Namespace" />
             <NamespaceSelect
               value={this.namespace}
-              placeholder={_i18n._(t`Namespace`)}
+              placeholder={`Namespace`}
               themeName="light"
               className="box grow"
               onChange={({ value }) => this.namespace = value}
             />
 
-            <SubTitle title={<Trans>Values</Trans>} />
+            <SubTitle title="Values" />
             <div className="flex gaps align-center">
               <Select
                 className="quota-select"
                 themeName="light"
-                placeholder={_i18n._(t`Select a quota..`)}
+                placeholder={`Select a quota..`}
                 options={this.quotaOptions}
                 value={this.quotaSelectValue}
                 onChange={({ value }) => this.quotaSelectValue = value}
               />
               <Input
                 maxLength={10}
-                placeholder={_i18n._(t`Value`)}
+                placeholder={`Value`}
                 value={this.quotaInputValue}
                 onChange={v => this.quotaInputValue = v}
                 onKeyDown={this.onInputQuota}
@@ -185,7 +183,7 @@ export class AddQuotaDialog extends React.Component<Props> {
               <Button round primary onClick={this.setQuota}>
                 <Icon
                   material={this.quotas[this.quotaSelectValue] ? "edit" : "add"}
-                  tooltip={_i18n._(t`Set quota`)}
+                  tooltip={`Set quota`}
                 />
               </Button>
             </div>

src/renderer/components/+config-resource-quotas/resource-quota-details.tsx

@@ -2,7 +2,6 @@ import "./resource-quota-details.scss";
 import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { cpuUnitsToNumber, cssNames, unitsToBytes, metricUnitsToNumber } from "../../utils";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -45,7 +44,7 @@ function renderQuotas(quota: ResourceQuota): JSX.Element[] {
             max={max}
             value={current}
             tooltip={
-              <p><Trans>Set</Trans>: {value}. <Trans>Usage</Trans>: {`${usage}%`}</p>
+              <p>Set: {value}. Usage: {`${usage}%`}</p>
             }
           />
         </div>
@@ -64,18 +63,18 @@ export class ResourceQuotaDetails extends React.Component<Props> {
       <div className="ResourceQuotaDetails">
         <KubeObjectMeta object={quota}/>
 
-        <DrawerItem name={<Trans>Quotas</Trans>} className="quota-list">
+        <DrawerItem name="Quotas" className="quota-list">
           {renderQuotas(quota)}
         </DrawerItem>
 
         {quota.getScopeSelector().length > 0 && (
           <>
-            <DrawerTitle title={<Trans>Scope Selector</Trans>}/>
+            <DrawerTitle title="Scope Selector"/>
             <Table className="paths">
               <TableHead>
-                <TableCell><Trans>Operator</Trans></TableCell>
-                <TableCell><Trans>Scope name</Trans></TableCell>
-                <TableCell><Trans>Values</Trans></TableCell>
+                <TableCell>Operator</TableCell>
+                <TableCell>Scope name</TableCell>
+                <TableCell>Values</TableCell>
               </TableHead>
               {
                 quota.getScopeSelector().map((selector, index) => {

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -2,7 +2,6 @@ import "./resource-quotas.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { ResourceQuota } from "../../api/endpoints/resource-quota.api";
@@ -36,12 +35,12 @@ export class ResourceQuotas extends React.Component<Props> {
             (item: ResourceQuota) => item.getSearchFields(),
             (item: ResourceQuota) => item.getName(),
           ]}
-          renderHeaderTitle={<Trans>Resource Quotas</Trans>}
+          renderHeaderTitle="Resource Quotas"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Age", className: "age", sortBy: sortBy.age },
           ]}
           renderTableContents={(resourceQuota: ResourceQuota) => [
             resourceQuota.getName(),
@@ -51,7 +50,7 @@ export class ResourceQuotas extends React.Component<Props> {
           ]}
           addRemoveButtons={{
             onAdd: () => AddQuotaDialog.open(),
-            addTooltip: <Trans>Create new ResourceQuota</Trans>
+            addTooltip: "Create new ResourceQuota"
           }}
         />
         <AddQuotaDialog/>

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -3,8 +3,6 @@ import "./add-secret-dialog.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Input } from "../input";
@@ -135,7 +133,7 @@ export class AddSecretDialog extends React.Component<Props> {
         <SubTitle compact className="fields-title" title={upperFirst(field.toString())}>
           <Icon
             small
-            tooltip={_i18n._(t`Add field`)}
+            tooltip={`Add field`}
             material="add_circle_outline"
             onClick={() => this.addField(field)}
           />
@@ -148,7 +146,7 @@ export class AddSecretDialog extends React.Component<Props> {
               <div key={index} className="secret-field flex gaps auto align-center">
                 <Input
                   className="key"
-                  placeholder={_i18n._(t`Name`)}
+                  placeholder={`Name`}
                   title={key}
                   tabIndex={required ? -1 : 0}
                   readOnly={required}
@@ -158,13 +156,13 @@ export class AddSecretDialog extends React.Component<Props> {
                   multiLine maxRows={5}
                   required={required}
                   className="value"
-                  placeholder={_i18n._(t`Value`)}
+                  placeholder={`Value`}
                   value={value} onChange={v => item.value = v}
                 />
                 <Icon
                   small
                   disabled={required}
-                  tooltip={required ? <Trans>Required field</Trans> : <Trans>Remove field</Trans>}
+                  tooltip={required ? "Required field" : "Remove field"}
                   className="remove-icon"
                   material="remove_circle_outline"
                   onClick={() => this.removeField(field, index)}
@@ -180,7 +178,7 @@ export class AddSecretDialog extends React.Component<Props> {
   render() {
     const { ...dialogProps } = this.props;
     const { namespace, name, type } = this;
-    const header = <h5><Trans>Create Secret</Trans></h5>;
+    const header = <h5>Create Secret</h5>;
 
     return (
       <Dialog
@@ -191,19 +189,19 @@ export class AddSecretDialog extends React.Component<Props> {
         close={this.close}
       >
         <Wizard header={header} done={this.close}>
-          <WizardStep contentClass="flow column" nextLabel={<Trans>Create</Trans>} next={this.createSecret}>
+          <WizardStep contentClass="flow column" nextLabel="Create" next={this.createSecret}>
             <div className="secret-name">
-              <SubTitle title={<Trans>Secret name</Trans>} />
+              <SubTitle title="Secret name" />
               <Input
                 autoFocus required
-                placeholder={_i18n._(t`Name`)}
+                placeholder={`Name`}
                 validators={systemName}
                 value={name} onChange={v => this.name = v}
               />
             </div>
             <div className="flex auto gaps">
               <div className="secret-namespace">
-                <SubTitle title={<Trans>Namespace</Trans>} />
+                <SubTitle title="Namespace" />
                 <NamespaceSelect
                   themeName="light"
                   value={namespace}
@@ -211,7 +209,7 @@ export class AddSecretDialog extends React.Component<Props> {
                 />
               </div>
               <div className="secret-type">
-                <SubTitle title={<Trans>Secret type</Trans>} />
+                <SubTitle title="Secret type" />
                 <Select
                   themeName="light"
                   options={this.types}

src/renderer/components/+config-secrets/secret-details.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import isEmpty from "lodash/isEmpty";
 import { autorun, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
 import { Button } from "../button";
@@ -14,7 +13,6 @@ import { Icon } from "../icon";
 import { secretsStore } from "./secrets.store";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { Secret } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
@@ -47,7 +45,7 @@ export class SecretDetails extends React.Component<Props> {
 
     try {
       await secretsStore.update(secret, { ...secret, data: this.data });
-      Notifications.ok(<Trans>Secret successfully updated.</Trans>);
+      Notifications.ok("Secret successfully updated.");
     } catch (err) {
       Notifications.error(err);
     }
@@ -66,12 +64,12 @@ export class SecretDetails extends React.Component<Props> {
     return (
       <div className="SecretDetails">
         <KubeObjectMeta object={secret}/>
-        <DrawerItem name={<Trans>Type</Trans>}>
+        <DrawerItem name="Type">
           {secret.type}
         </DrawerItem>
         {!isEmpty(this.data) && (
           <>
-            <DrawerTitle title={_i18n._(t`Data`)}/>
+            <DrawerTitle title={`Data`}/>
             {
               Object.entries(this.data).map(([name, value]) => {
                 const revealSecret = this.revealSecret[name];
@@ -98,7 +96,7 @@ export class SecretDetails extends React.Component<Props> {
                       {decodedVal && (
                         <Icon
                           material={`visibility${revealSecret ? "" : "_off"}`}
-                          tooltip={revealSecret ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
+                          tooltip={revealSecret ? "Hide" : "Show"}
                           onClick={() => this.revealSecret[name] = !revealSecret}
                         />)
                       }
@@ -109,7 +107,7 @@ export class SecretDetails extends React.Component<Props> {
             }
             <Button
               primary
-              label={_i18n._(t`Save`)} waiting={this.isSaving}
+              label={`Save`} waiting={this.isSaving}
               className="save-btn"
               onClick={this.saveSecret}
             />

src/renderer/components/+config-secrets/secrets.tsx

@@ -2,7 +2,6 @@ import "./secrets.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { Secret } from "../../api/endpoints";
 import { AddSecretDialog } from "./add-secret-dialog";
@@ -43,15 +42,15 @@ export class Secrets extends React.Component<Props> {
             (item: Secret) => item.getSearchFields(),
             (item: Secret) => item.getKeys(),
           ]}
-          renderHeaderTitle={<Trans>Secrets</Trans>}
+          renderHeaderTitle="Secrets"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-            { title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
-            { title: <Trans>Keys</Trans>, className: "keys", sortBy: sortBy.keys },
-            { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Labels", className: "labels", sortBy: sortBy.labels },
+            { title: "Keys", className: "keys", sortBy: sortBy.keys },
+            { title: "Type", className: "type", sortBy: sortBy.type },
+            { title: "Age", className: "age", sortBy: sortBy.age },
           ]}
           renderTableContents={(secret: Secret) => [
             secret.getName(),
@@ -64,7 +63,7 @@ export class Secrets extends React.Component<Props> {
           ]}
           addRemoveButtons={{
             onAdd: () => AddSecretDialog.open(),
-            addTooltip: <Trans>Create new Secret</Trans>
+            addTooltip: "Create new Secret"
           }}
         />
         <AddSecretDialog/>

src/renderer/components/+config/config.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { ConfigMaps, configMapsRoute, configMapsURL } from "../+config-maps";
 import { Secrets, secretsRoute, secretsURL } from "../+config-secrets";
@@ -18,7 +17,7 @@ export class Config extends React.Component {
 
     if (isAllowedResource("configmaps")) {
       routes.push({
-        title: <Trans>ConfigMaps</Trans>,
+        title: "ConfigMaps",
         component: ConfigMaps,
         url: configMapsURL({ query }),
         routePath: configMapsRoute.path.toString(),
@@ -27,7 +26,7 @@ export class Config extends React.Component {
 
     if (isAllowedResource("secrets")) {
       routes.push({
-        title: <Trans>Secrets</Trans>,
+        title: "Secrets",
         component: Secrets,
         url: secretsURL({ query }),
         routePath: secretsRoute.path.toString(),
@@ -36,7 +35,7 @@ export class Config extends React.Component {
 
     if (isAllowedResource("resourcequotas")) {
       routes.push({
-        title: <Trans>Resource Quotas</Trans>,
+        title: "Resource Quotas",
         component: ResourceQuotas,
         url: resourceQuotaURL({ query }),
         routePath: resourceQuotaRoute.path.toString(),
@@ -45,7 +44,7 @@ export class Config extends React.Component {
 
     if (isAllowedResource("horizontalpodautoscalers")) {
       routes.push({
-        title: <Trans>HPA</Trans>,
+        title: "HPA",
         component: HorizontalPodAutoscalers,
         url: hpaURL({ query }),
         routePath: hpaRoute.path.toString(),
@@ -54,7 +53,7 @@ export class Config extends React.Component {
 
     if (isAllowedResource("poddisruptionbudgets")) {
       routes.push({
-        title: <Trans>Pod Disruption Budgets</Trans>,
+        title: "Pod Disruption Budgets",
         component: PodDisruptionBudgets,
         url: pdbURL({ query }),
         routePath: pdbRoute.path.toString(),

src/renderer/components/+custom-resources/crd-details.tsx

@@ -1,7 +1,6 @@
 import "./crd-details.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { CustomResourceDefinition } from "../../api/endpoints/crd.api";
@@ -32,24 +31,24 @@ export class CRDDetails extends React.Component<Props> {
       <div className="CRDDetails">
         <KubeObjectMeta object={crd}/>
 
-        <DrawerItem name={<Trans>Group</Trans>}>
+        <DrawerItem name="Group">
           {crd.getGroup()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Version</Trans>}>
+        <DrawerItem name="Version">
           {crd.getVersion()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Stored versions</Trans>}>
+        <DrawerItem name="Stored versions">
           {crd.getStoredVersions()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Scope</Trans>}>
+        <DrawerItem name="Scope">
           {crd.getScope()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Resource</Trans>}>
+        <DrawerItem name="Resource">
           <Link to={crd.getResourceUrl()}>
             {crd.getResourceTitle()}
           </Link>
         </DrawerItem>
-        <DrawerItem name={<Trans>Conversion</Trans>} className="flex gaps align-flex-start">
+        <DrawerItem name="Conversion" className="flex gaps align-flex-start">
           <Input
             multiLine
             theme="round-black"
@@ -58,7 +57,7 @@ export class CRDDetails extends React.Component<Props> {
             readOnly
           />
         </DrawerItem>
-        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+        <DrawerItem name="Conditions" className="conditions" labelsOnly>
           {
             crd.getConditions().map(condition => {
               const { type, message, lastTransitionTime, status } = condition;
@@ -71,7 +70,7 @@ export class CRDDetails extends React.Component<Props> {
                   tooltip={(
                     <>
                       <p>{message}</p>
-                      <p><Trans>Last transition time: {lastTransitionTime}</Trans></p>
+                      <p>Last transition time: {lastTransitionTime}</p>
                     </>
                   )}
                 />
@@ -79,13 +78,13 @@ export class CRDDetails extends React.Component<Props> {
             })
           }
         </DrawerItem>
-        <DrawerTitle title={<Trans>Names</Trans>}/>
+        <DrawerTitle title="Names"/>
         <Table selectable className="names box grow">
           <TableHead>
-            <TableCell><Trans>plural</Trans></TableCell>
-            <TableCell><Trans>singular</Trans></TableCell>
-            <TableCell><Trans>kind</Trans></TableCell>
-            <TableCell><Trans>listKind</Trans></TableCell>
+            <TableCell>plural</TableCell>
+            <TableCell>singular</TableCell>
+            <TableCell>kind</TableCell>
+            <TableCell>listKind</TableCell>
           </TableHead>
           <TableRow>
             <TableCell>{plural}</TableCell>
@@ -96,12 +95,12 @@ export class CRDDetails extends React.Component<Props> {
         </Table>
         {printerColumns.length > 0 &&
         <>
-          <DrawerTitle title={<Trans>Additional Printer Columns</Trans>}/>
+          <DrawerTitle title="Additional Printer Columns"/>
           <Table selectable className="printer-columns box grow">
             <TableHead>
-              <TableCell className="name"><Trans>Name</Trans></TableCell>
-              <TableCell className="type"><Trans>Type</Trans></TableCell>
-              <TableCell className="json-path"><Trans>JSON Path</Trans></TableCell>
+              <TableCell className="name">Name</TableCell>
+              <TableCell className="type">Type</TableCell>
+              <TableCell className="json-path">JSON Path</TableCell>
             </TableHead>
             {
               printerColumns.map((column, index) => {
@@ -123,7 +122,7 @@ export class CRDDetails extends React.Component<Props> {
         }
         {validation &&
         <>
-          <DrawerTitle title={<Trans>Validation</Trans>}/>
+          <DrawerTitle title="Validation"/>
           <AceEditor
             mode="json"
             className="validation"

src/renderer/components/+custom-resources/crd-list.tsx

@@ -1,7 +1,6 @@
 import "./crd-list.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
@@ -66,12 +65,12 @@ export class CrdList extends React.Component {
             return selectedGroups.length ? items.filter(item => selectedGroups.includes(item.getGroup())) : items;
           }
         ]}
-        renderHeaderTitle={<Trans>Custom Resources</Trans>}
+        renderHeaderTitle="Custom Resources"
         customizeHeader={() => {
-          let placeholder = <Trans>All groups</Trans>;
+          let placeholder = <>All groups</>;
 
-          if (selectedGroups.length == 1) placeholder = <><Trans>Group</Trans>: {selectedGroups[0]}</>;
-          if (selectedGroups.length >= 2) placeholder = <><Trans>Groups</Trans>: {selectedGroups.join(", ")}</>;
+          if (selectedGroups.length == 1) placeholder = <>Group: {selectedGroups[0]}</>;
+          if (selectedGroups.length >= 2) placeholder = <>Groups: {selectedGroups.join(", ")}</>;
 
           return {
             // todo: move to global filters
@@ -98,11 +97,11 @@ export class CrdList extends React.Component {
           };
         }}
         renderTableHeader={[
-          { title: <Trans>Resource</Trans>, className: "kind", sortBy: sortBy.kind },
-          { title: <Trans>Group</Trans>, className: "group", sortBy: sortBy.group },
-          { title: <Trans>Version</Trans>, className: "version", sortBy: sortBy.group },
-          { title: <Trans>Scope</Trans>, className: "scope", sortBy: sortBy.scope },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Resource", className: "kind", sortBy: sortBy.kind },
+          { title: "Group", className: "group", sortBy: sortBy.group },
+          { title: "Version", className: "version", sortBy: sortBy.group },
+          { title: "Scope", className: "scope", sortBy: sortBy.scope },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(crd: CustomResourceDefinition) => [
           <Link key="link" to={crd.getResourceUrl()} onClick={stopPropagation}>

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -2,7 +2,6 @@ import "./crd-resource-details.scss";
 
 import React from "react";
 import jsonPath from "jsonpath";
-import { Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
 import { cssNames } from "../../utils";
@@ -71,7 +70,7 @@ export class CrdResourceDetails extends React.Component<Props> {
       ));
 
     return (
-      <DrawerItem name={<Trans>Status</Trans>} className="status" labelsOnly>
+      <DrawerItem name="Status" className="status" labelsOnly>
         {conditions}
       </DrawerItem>
     );

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -3,7 +3,6 @@ import "./crd-resources.scss";
 import React from "react";
 import jsonPath from "jsonpath";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObject } from "../../api/kube-object";
@@ -76,8 +75,8 @@ export class CrdResources extends React.Component<Props> {
         ]}
         renderHeaderTitle={crd.getResourceTitle()}
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-          isNamespaced && { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: "Name", className: "name", sortBy: sortBy.name },
+          isNamespaced && { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
           ...extraColumns.map(column => {
             const { name } = column;
 
@@ -87,7 +86,7 @@ export class CrdResources extends React.Component<Props> {
               sortBy: name
             };
           }),
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(crdInstance: KubeObject) => [
           crdInstance.getName(),

src/renderer/components/+custom-resources/custom-resources.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Redirect, Route, Switch } from "react-router";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { crdResourcesRoute, crdRoute, crdURL, crdDefinitionsRoute } from "./crd.route";
 import { CrdList } from "./crd-list";
@@ -12,7 +11,7 @@ export class CustomResources extends React.Component {
   static get tabRoutes(): TabLayoutRoute[] {
     return [
       {
-        title: <Trans>Definitions</Trans>,
+        title: "Definitions",
         component: CustomResources,
         url: crdURL(),
         routePath: crdRoute.path.toString(),
@@ -31,4 +30,4 @@ export class CustomResources extends React.Component {
       </TabLayout>
     );
   }
-}
+}

src/renderer/components/+events/event-details.tsx

@@ -2,7 +2,6 @@ import "./event-details.scss";
 
 import React from "react";
 import kebabCase from "lodash/kebabCase";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
@@ -29,35 +28,35 @@ export class EventDetails extends React.Component<Props> {
       <div className="EventDetails">
         <KubeObjectMeta object={event}/>
 
-        <DrawerItem name={<Trans>Message</Trans>}>
+        <DrawerItem name="Message">
           {message}
         </DrawerItem>
-        <DrawerItem name={<Trans>Reason</Trans>}>
+        <DrawerItem name="Reason">
           {reason}
         </DrawerItem>
-        <DrawerItem name={<Trans>Source</Trans>}>
+        <DrawerItem name="Source">
           {event.getSource()}
         </DrawerItem>
-        <DrawerItem name={<Trans>First seen</Trans>}>
-          {event.getFirstSeenTime()} <Trans>ago</Trans> {event.firstTimestamp}
+        <DrawerItem name="First seen">
+          {event.getFirstSeenTime()} ago {event.firstTimestamp}
         </DrawerItem>
-        <DrawerItem name={<Trans>Last seen</Trans>}>
-          {event.getLastSeenTime()} <Trans>ago</Trans> {event.lastTimestamp}
+        <DrawerItem name="Last seen">
+          {event.getLastSeenTime()} ago {event.lastTimestamp}
         </DrawerItem>
-        <DrawerItem name={<Trans>Count</Trans>}>
+        <DrawerItem name="Count">
           {count}
         </DrawerItem>
-        <DrawerItem name={<Trans>Type</Trans>} className="type">
+        <DrawerItem name="Type" className="type">
           <span className={kebabCase(type)}>{type}</span>
         </DrawerItem>
 
-        <DrawerTitle title={<Trans>Involved object</Trans>}/>
+        <DrawerTitle title="Involved object"/>
         <Table>
           <TableHead>
-            <TableCell><Trans>Name</Trans></TableCell>
-            <TableCell><Trans>Namespace</Trans></TableCell>
-            <TableCell><Trans>Kind</Trans></TableCell>
-            <TableCell><Trans>Field Path</Trans></TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Namespace</TableCell>
+            <TableCell>Kind</TableCell>
+            <TableCell>Field Path</TableCell>
           </TableHead>
           <TableRow>
             <TableCell>

src/renderer/components/+events/events.tsx

@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 import { TabLayout } from "../layout/tab-layout";
 import { eventStore } from "./event.store";
 import { KubeObjectListLayout, KubeObjectListLayoutProps, getDetailsUrl } from "../kube-object";
-import { Trans } from "@lingui/macro";
 import { KubeEvent } from "../../api/endpoints/events.api";
 import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
@@ -56,7 +55,7 @@ export class Events extends React.Component<Props> {
           (event: KubeEvent) => event.getSource(),
           (event: KubeEvent) => event.involvedObject.name,
         ]}
-        renderHeaderTitle={<Trans>Events</Trans>}
+        renderHeaderTitle="Events"
         customizeHeader={({ title, info }) => (
           compact ? title : ({
             info: (
@@ -66,20 +65,20 @@ export class Events extends React.Component<Props> {
                   small
                   material="help_outline"
                   className="help-icon"
-                  tooltip={<Trans>Limited to {eventStore.limit}</Trans>}
+                  tooltip="Limited to {eventStore.limit}"
                 />
               </>
             )
           })
         )}
         renderTableHeader={[
-          { title: <Trans>Message</Trans>, className: "message" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
-          { title: <Trans>Involved Object</Trans>, className: "object", sortBy: sortBy.object },
-          { title: <Trans>Source</Trans>, className: "source" },
-          { title: <Trans>Count</Trans>, className: "count", sortBy: sortBy.count },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Message", className: "message" },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Type", className: "type", sortBy: sortBy.type },
+          { title: "Involved Object", className: "object", sortBy: sortBy.object },
+          { title: "Source", className: "source" },
+          { title: "Count", className: "count", sortBy: sortBy.count },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(event: KubeEvent) => {
           const { involvedObject, type, message } = event;

src/renderer/components/+events/kube-event-details.tsx

@@ -2,7 +2,6 @@ import "./kube-event-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { KubeObject } from "../../api/kube-object";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { cssNames } from "../../utils";
@@ -25,7 +24,7 @@ export class KubeEventDetails extends React.Component<KubeEventDetailsProps> {
     if (!events.length) {
       return (
         <DrawerTitle className="flex gaps align-center">
-          <span><Trans>Events</Trans></span>
+          <span>Events</span>
         </DrawerTitle>
       );
     }
@@ -33,7 +32,7 @@ export class KubeEventDetails extends React.Component<KubeEventDetailsProps> {
     return (
       <div>
         <DrawerTitle className="flex gaps align-center">
-          <span><Trans>Events</Trans></span>
+          <span>Events</span>
         </DrawerTitle>
         <div className="KubeEventDetails">
           {events.map(evt => {
@@ -44,16 +43,16 @@ export class KubeEventDetails extends React.Component<KubeEventDetailsProps> {
                 <div className={cssNames("title", { warning: evt.isWarning() })}>
                   {message}
                 </div>
-                <DrawerItem name={<Trans>Source</Trans>}>
+                <DrawerItem name="Source">
                   {evt.getSource()}
                 </DrawerItem>
-                <DrawerItem name={<Trans>Count</Trans>}>
+                <DrawerItem name="Count">
                   {count}
                 </DrawerItem>
-                <DrawerItem name={<Trans>Sub-object</Trans>}>
+                <DrawerItem name="Sub-object">
                   {involvedObject.fieldPath}
                 </DrawerItem>
-                <DrawerItem name={<Trans>Last seen</Trans>}>
+                <DrawerItem name="Last seen">
                   {lastTimestamp}
                 </DrawerItem>
               </div>

src/renderer/components/+extensions/extensions.tsx

@@ -1,4 +1,3 @@
-import { t, Trans } from "@lingui/macro";
 import { remote, shell } from "electron";
 import fse from "fs-extra";
 import { computed, observable, reaction } from "mobx";
@@ -12,7 +11,6 @@ import { extensionDiscovery, InstalledExtension, manifestFilename } from "../../
 import { extensionLoader } from "../../../extensions/extension-loader";
 import { extensionDisplayName, LensExtensionManifest, sanitizeExtensionName } from "../../../extensions/lens-extension";
 import logger from "../../../main/logger";
-import { _i18n } from "../../i18n";
 import { prevDefault } from "../../utils";
 import { Button } from "../button";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -46,7 +44,7 @@ export class Extensions extends React.Component {
   private static supportedFormats = ["tar", "tgz"];
 
   private static installPathValidator: InputValidator = {
-    message: <Trans>Invalid URL or absolute path</Trans>,
+    message: "Invalid URL or absolute path",
     validate(value: string) {
       return InputValidators.isUrl.validate(value) || InputValidators.isPath.validate(value);
     }
@@ -143,8 +141,8 @@ export class Extensions extends React.Component {
     const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
       defaultPath: app.getPath("downloads"),
       properties: ["openFile", "multiSelections"],
-      message: _i18n._(t`Select extensions to install (formats: ${Extensions.supportedFormats.join(", ")}), `),
-      buttonLabel: _i18n._(t`Use configuration`),
+      message: `Select extensions to install (formats: ${Extensions.supportedFormats.join(", ")}), `,
+      buttonLabel: `Use configuration`,
       filters: [
         { name: "tarball", extensions: Extensions.supportedFormats }
       ]
@@ -398,8 +396,8 @@ export class Extensions extends React.Component {
 
     ConfirmDialog.open({
       message: <p>Are you sure you want to uninstall extension <b>{displayName}</b>?</p>,
-      labelOk: <Trans>Yes</Trans>,
-      labelCancel: <Trans>No</Trans>,
+      labelOk: "Yes",
+      labelCancel: "No",
       ok: () => this.uninstallExtension(extension)
     });
   };
@@ -500,7 +498,7 @@ export class Extensions extends React.Component {
           </div>
 
           <div className="install-extension flex column gaps">
-            <SubTitle title={<Trans>Install Extension:</Trans>}/>
+            <SubTitle title="Install Extension:"/>
             <div className="extension-input flex box gaps align-center">
               <Input
                 className="box grow"
@@ -518,7 +516,7 @@ export class Extensions extends React.Component {
                     interactive
                     material="folder"
                     onClick={prevDefault(this.installFromSelectFileDialog)}
-                    tooltip={<Trans>Browse</Trans>}
+                    tooltip="Browse"
                   />
                 }
               />
@@ -531,7 +529,7 @@ export class Extensions extends React.Component {
               onClick={this.installFromUrlOrPath}
             />
             <small className="hint">
-              <Trans><b>Pro-Tip</b>: you can also drag-n-drop tarball-file to this area</Trans>
+              <b>Pro-Tip</b>: you can also drag-n-drop tarball-file to this area
             </small>
           </div>
 

src/renderer/components/+landing-page/landing-page.tsx

@@ -2,7 +2,6 @@ import "./landing-page.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { clusterStore } from "../../../common/cluster-store";
 import { workspaceStore } from "../../../common/workspace-store";
 
@@ -19,21 +18,19 @@ export class LandingPage extends React.Component {
       <div className="LandingPage flex">
         {showStartupHint && (
           <div className="startup-hint flex column gaps" onMouseEnter={() => this.showHint = false}>
-            <p><Trans>This is the quick launch menu.</Trans></p>
+            <p>This is the quick launch menu.</p>
             <p>
-              <Trans>
-                Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
-              </Trans>
+              Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
             </p>
           </div>
         )}
         {noClustersInScope && (
           <div className="no-clusters flex column gaps box center">
             <h1>
-              <Trans>Welcome!</Trans>
+              Welcome!
             </h1>
             <p>
-              <Trans>Get started by associating one or more clusters to Lens.</Trans>
+              Get started by associating one or more clusters to Lens.
             </p>
           </div>
         )}

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -3,8 +3,6 @@ import "./add-namespace-dialog.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { namespaceStore } from "./namespace.store";
@@ -55,7 +53,7 @@ export class AddNamespaceDialog extends React.Component<Props> {
   render() {
     const { ...dialogProps } = this.props;
     const { namespace } = this;
-    const header = <h5><Trans>Create Namespace</Trans></h5>;
+    const header = <h5>Create Namespace</h5>;
 
     return (
       <Dialog
@@ -68,13 +66,13 @@ export class AddNamespaceDialog extends React.Component<Props> {
         <Wizard header={header} done={this.close}>
           <WizardStep
             contentClass="flex gaps column"
-            nextLabel={<Trans>Create</Trans>}
+            nextLabel="Create"
             next={this.addNamespace}
           >
             <Input
               required autoFocus
               iconLeft="layers"
-              placeholder={_i18n._(t`Namespace`)}
+              placeholder={`Namespace`}
               validators={systemName}
               value={namespace} onChange={v => this.namespace = v.toLowerCase()}
             />

src/renderer/components/+namespaces/namespace-details.tsx

@@ -3,7 +3,6 @@ import "./namespace-details.scss";
 import React from "react";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
 import { Namespace } from "../../api/endpoints";
@@ -39,11 +38,11 @@ export class NamespaceDetails extends React.Component<Props> {
       <div className="NamespaceDetails">
         <KubeObjectMeta object={namespace}/>
 
-        <DrawerItem name={<Trans>Status</Trans>}>
+        <DrawerItem name="Status">
           <span className={cssNames("status", status.toLowerCase())}>{status}</span>
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Resource Quotas</Trans>} className="quotas flex align-center">
+        <DrawerItem name="Resource Quotas" className="quotas flex align-center">
           {!this.quotas && resourceQuotaStore.isLoading && <Spinner/>}
           {this.quotas.map(quota => {
             return (

src/renderer/components/+namespaces/namespace-select.tsx

@@ -3,12 +3,10 @@ import "./namespace-select.scss";
 import React from "react";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { Select, SelectOption, SelectProps } from "../select";
 import { cssNames, noop } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
-import { _i18n } from "../../i18n";
 import { FilterIcon } from "../item-object-list/filter-icon";
 import { FilterType } from "../item-object-list/page-filters.store";
 
@@ -23,7 +21,7 @@ const defaultProps: Partial<Props> = {
   showIcons: true,
   showClusterOption: false,
   get clusterOptionLabel() {
-    return _i18n._(t`Cluster`);
+    return `Cluster`;
   },
 };
 
@@ -87,10 +85,10 @@ export class NamespaceSelect extends React.Component<Props> {
 export class NamespaceSelectFilter extends React.Component {
   render() {
     const { contextNs, hasContext, toggleContext } = namespaceStore;
-    let placeholder = <Trans>All namespaces</Trans>;
+    let placeholder = <>All namespaces</>;
 
-    if (contextNs.length == 1) placeholder = <Trans>Namespace: {contextNs[0]}</Trans>;
-    if (contextNs.length >= 2) placeholder = <Trans>Namespaces: {contextNs.join(", ")}</Trans>;
+    if (contextNs.length == 1) placeholder = <>Namespace: {contextNs[0]}</>;
+    if (contextNs.length >= 2) placeholder = <>Namespaces: {contextNs.join(", ")}</>;
 
     return (
       <NamespaceSelect

src/renderer/components/+namespaces/namespaces.tsx

@@ -1,7 +1,6 @@
 import "./namespaces.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { Namespace, NamespaceStatus } from "../../api/endpoints";
 import { AddNamespaceDialog } from "./add-namespace-dialog";
 import { TabLayout } from "../layout/tab-layout";
@@ -39,13 +38,13 @@ export class Namespaces extends React.Component<Props> {
             (item: Namespace) => item.getSearchFields(),
             (item: Namespace) => item.getStatus()
           ]}
-          renderHeaderTitle={<Trans>Namespaces</Trans>}
+          renderHeaderTitle="Namespaces"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-            { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+            { title: "Labels", className: "labels", sortBy: sortBy.labels },
+            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Status", className: "status", sortBy: sortBy.status },
           ]}
           renderTableContents={(item: Namespace) => [
             item.getName(),
@@ -55,7 +54,7 @@ export class Namespaces extends React.Component<Props> {
             { title: item.getStatus(), className: item.getStatus().toLowerCase() },
           ]}
           addRemoveButtons={{
-            addTooltip: <Trans>Add Namespace</Trans>,
+            addTooltip: "Add Namespace",
             onAdd: () => AddNamespaceDialog.open(),
           }}
           customizeTableRowProps={(item: Namespace) => ({

src/renderer/components/+network-endpoints/endpoint-details.tsx

@@ -2,7 +2,6 @@ import "./endpoint-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
@@ -24,7 +23,7 @@ export class EndpointDetails extends React.Component<Props> {
     return (
       <div className="EndpointDetails">
         <KubeObjectMeta object={endpoint}/>
-        <DrawerTitle title={<Trans>Subsets</Trans>}/>
+        <DrawerTitle title="Subsets"/>
         {
           endpoint.getEndpointSubsets().map((subset) => (
             <EndpointSubsetList key={subset.toString()} subset={subset} endpoint={endpoint} />

src/renderer/components/+network-endpoints/endpoint-subset-list.tsx

@@ -3,7 +3,6 @@ import "./endpoint-subset-list.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { EndpointSubset, Endpoint, EndpointAddress} from "../../api/endpoints";
-import { Trans } from "@lingui/macro";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { autobind } from "../../utils";
 import { lookupApiLink } from "../../api/kube-api";
@@ -37,7 +36,7 @@ export class EndpointSubsetList extends React.Component<Props> {
   renderAddressTable(addresses: EndpointAddress[], virtual: boolean) {
     return (
       <div>
-        <div className="title flex gaps"><Trans>Addresses</Trans></div>
+        <div className="title flex gaps">Addresses</div>
         <Table
           items={addresses}
           selectable={false}
@@ -48,7 +47,7 @@ export class EndpointSubsetList extends React.Component<Props> {
         >
           <TableHead>
             <TableCell className="ip">IP</TableCell>
-            <TableCell className="name"><Trans>Hostname</Trans></TableCell>
+            <TableCell className="name">Hostname</TableCell>
             <TableCell className="target">Target</TableCell>
           </TableHead>
           {
@@ -92,7 +91,7 @@ export class EndpointSubsetList extends React.Component<Props> {
       <div className="EndpointSubsetList flex column">
         {addresses.length > 0 && (
           <div>
-            <div className="title flex gaps"><Trans>Addresses</Trans></div>
+            <div className="title flex gaps">Addresses</div>
             <Table
               items={addresses}
               selectable={false}
@@ -103,7 +102,7 @@ export class EndpointSubsetList extends React.Component<Props> {
             >
               <TableHead>
                 <TableCell className="ip">IP</TableCell>
-                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="host">Hostname</TableCell>
                 <TableCell className="target">Target</TableCell>
               </TableHead>
               { !addressesVirtual && addresses.map(address => this.getAddressTableRow(address.getId())) }
@@ -113,7 +112,7 @@ export class EndpointSubsetList extends React.Component<Props> {
 
         {notReadyAddresses.length > 0 && (
           <div>
-            <div className="title flex gaps"><Trans>Not Ready Addresses</Trans></div>
+            <div className="title flex gaps">Not Ready Addresses</div>
             <Table
               items={notReadyAddresses}
               selectable
@@ -124,7 +123,7 @@ export class EndpointSubsetList extends React.Component<Props> {
             >
               <TableHead>
                 <TableCell className="ip">IP</TableCell>
-                <TableCell className="host"><Trans>Hostname</Trans></TableCell>
+                <TableCell className="host">Hostname</TableCell>
                 <TableCell className="target">Target</TableCell>
               </TableHead>
               { !notReadyAddressesVirtual && notReadyAddresses.map(address => this.getNotReadyAddressTableRow(address.getId())) }
@@ -132,7 +131,7 @@ export class EndpointSubsetList extends React.Component<Props> {
           </div>
         )}
 
-        <div className="title flex gaps"><Trans>Ports</Trans></div>
+        <div className="title flex gaps">Ports</div>
         <Table
           selectable={false}
           virtual={false}
@@ -140,8 +139,8 @@ export class EndpointSubsetList extends React.Component<Props> {
           className="box grow"
         >
           <TableHead>
-            <TableCell className="port"><Trans>Port</Trans></TableCell>
-            <TableCell className="name"><Trans>Name</Trans></TableCell>
+            <TableCell className="port">Port</TableCell>
+            <TableCell className="name">Name</TableCell>
             <TableCell className="protocol">Protocol</TableCell>
           </TableHead>
           {

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -7,7 +7,6 @@ import { EndpointRouteParams } from "./endpoints.route";
 import { Endpoint } from "../../api/endpoints/endpoint.api";
 import { endpointStore } from "./endpoints.store";
 import { KubeObjectListLayout } from "../kube-object";
-import { Trans } from "@lingui/macro";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
 enum sortBy {
@@ -33,13 +32,13 @@ export class Endpoints extends React.Component<Props> {
         searchFilters={[
           (endpoint: Endpoint) => endpoint.getSearchFields()
         ]}
-        renderHeaderTitle={<Trans>Endpoints</Trans>}
+        renderHeaderTitle="Endpoints"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Endpoints</Trans>, className: "endpoints" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Endpoints", className: "endpoints" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(endpoint: Endpoint) => [
           endpoint.getName(),

src/renderer/components/+network-ingresses/ingress-charts.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from "react";
-import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { ChartOptions, ChartPoint } from "chart.js";
 import { IIngressMetrics, Ingress } from "../../api/endpoints";
@@ -7,7 +6,6 @@ import { BarChart, memoryOptions } from "../chart";
 import { normalizeMetrics, isMetricsEmpty } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { ResourceMetricsContext, IResourceMetricsValue } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 
 type IContext = IResourceMetricsValue<Ingress, { metrics: IIngressMetrics }>;
 
@@ -33,15 +31,15 @@ export const IngressCharts = observer(() => {
     [
       {
         id: `${id}-bytesSentSuccess`,
-        label: _i18n._(t`Bytes sent, status 2xx`),
-        tooltip: _i18n._(t`Bytes sent by Ingress controller with successful status`),
+        label: `Bytes sent, status 2xx`,
+        tooltip: `Bytes sent by Ingress controller with successful status`,
         borderColor: "#46cd9e",
         data: bytesSentSuccess.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-bytesSentFailure`,
-        label: _i18n._(t`Bytes sent, status 5xx`),
-        tooltip: _i18n._(t`Bytes sent by Ingress controller with error status`),
+        label: `Bytes sent, status 5xx`,
+        tooltip: `Bytes sent by Ingress controller with error status`,
         borderColor: "#cd465a",
         data: bytesSentFailure.map(([x, y]) => ({ x, y }))
       },
@@ -50,15 +48,15 @@ export const IngressCharts = observer(() => {
     [
       {
         id: `${id}-requestDurationSeconds`,
-        label: _i18n._(t`Request`),
-        tooltip: _i18n._(t`Request duration in seconds`),
+        label: `Request`,
+        tooltip: `Request duration in seconds`,
         borderColor: "#48b18d",
         data: requestDurationSeconds.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-responseDurationSeconds`,
-        label: _i18n._(t`Response`),
-        tooltip: _i18n._(t`Response duration in seconds`),
+        label: `Response`,
+        tooltip: `Response duration in seconds`,
         borderColor: "#73ba3c",
         data: responseDurationSeconds.map(([x, y]) => ({ x, y }))
       },
@@ -78,7 +76,7 @@ export const IngressCharts = observer(() => {
         label: ({ datasetIndex, index }, { datasets }) => {
           const { label, data } = datasets[datasetIndex];
           const value = data[index] as ChartPoint;
-          const chartTooltipSec = _i18n._(t`sec`);
+          const chartTooltipSec = `sec`;
 
           return `${label}: ${parseFloat(value.y as string).toFixed(3)} ${chartTooltipSec}`;
         }
@@ -95,4 +93,4 @@ export const IngressCharts = observer(() => {
       data={{ datasets: datasets[tabId] }}
     />
   );
-});
+});

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -3,7 +3,6 @@ import "./ingress-details.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Ingress, ILoadBalancerIngress } from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
@@ -40,14 +39,14 @@ export class IngressDetails extends React.Component<Props> {
         <div className="rules" key={index}>
           {rule.host && (
             <div className="host-title">
-              <Trans>Host: {rule.host}</Trans>
+              <>Host: {rule.host}</>
             </div>
           )}
           {rule.http && (
             <Table className="paths">
               <TableHead>
-                <TableCell className="path"><Trans>Path</Trans></TableCell>
-                <TableCell className="backends"><Trans>Backends</Trans></TableCell>
+                <TableCell className="path">Path</TableCell>
+                <TableCell className="backends">Backends</TableCell>
               </TableHead>
               {
                 rule.http.paths.map((path, index) => {
@@ -78,8 +77,8 @@ export class IngressDetails extends React.Component<Props> {
       <div>
         <Table className="ingress-points">
           <TableHead>
-            <TableCell className="name" ><Trans>Hostname</Trans></TableCell>
-            <TableCell className="ingresspoints"><Trans>IP</Trans></TableCell>
+            <TableCell className="name" >Hostname</TableCell>
+            <TableCell className="ingresspoints">IP</TableCell>
           </TableHead>
           {ingressPoints.map(({hostname, ip}, index) => {
             return (
@@ -104,8 +103,8 @@ export class IngressDetails extends React.Component<Props> {
     const ingressPoints = status?.loadBalancer?.ingress;
     const { metrics } = ingressStore;
     const metricTabs = [
-      <Trans key="network">Network</Trans>,
-      <Trans key="network">Duration</Trans>,
+      "Network",
+      "Duration",
     ];
 
     const { serviceName, servicePort } = ingress.getServiceNamePort();
@@ -119,23 +118,23 @@ export class IngressDetails extends React.Component<Props> {
           <IngressCharts/>
         </ResourceMetrics>
         <KubeObjectMeta object={ingress}/>
-        <DrawerItem name={<Trans>Ports</Trans>}>
+        <DrawerItem name="Ports">
           {ingress.getPorts()}
         </DrawerItem>
         {spec.tls &&
-        <DrawerItem name={<Trans>TLS</Trans>}>
+        <DrawerItem name="TLS">
           {spec.tls.map((tls, index) => <p key={index}>{tls.secretName}</p>)}
         </DrawerItem>
         }
         {serviceName && servicePort &&
-        <DrawerItem name={<Trans>Service</Trans>}>
+        <DrawerItem name="Service">
           {serviceName}:{servicePort}
         </DrawerItem>
         }
-        <DrawerTitle title={<Trans>Rules</Trans>}/>
+        <DrawerTitle title="Rules"/>
         {this.renderPaths(ingress)}
 
-        <DrawerTitle title={<Trans>Load-Balancer Ingress Points</Trans>}/>
+        <DrawerTitle title="Load-Balancer Ingress Points"/>
         {this.renderIngressPoints(ingressPoints)}
       </div>
     );

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -7,7 +7,6 @@ import { IngressRouteParams } from "./ingresses.route";
 import { Ingress } from "../../api/endpoints/ingress.api";
 import { ingressStore } from "./ingress.store";
 import { KubeObjectListLayout } from "../kube-object";
-import { Trans } from "@lingui/macro";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
 enum sortBy {
@@ -34,14 +33,14 @@ export class Ingresses extends React.Component<Props> {
           (ingress: Ingress) => ingress.getSearchFields(),
           (ingress: Ingress) => ingress.getPorts(),
         ]}
-        renderHeaderTitle={<Trans>Ingresses</Trans>}
+        renderHeaderTitle="Ingresses"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>LoadBalancers</Trans>, className: "loadbalancers" },
-          { title: <Trans>Rules</Trans>, className: "rules" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "LoadBalancers", className: "loadbalancers" },
+          { title: "Rules", className: "rules" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(ingress: Ingress) => [
           ingress.getName(),

src/renderer/components/+network-policies/network-policies.tsx

@@ -2,7 +2,6 @@ import "./network-policies.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router-dom";
 import { NetworkPolicy } from "../../api/endpoints/network-policy.api";
 import { KubeObjectListLayout } from "../kube-object";
@@ -33,13 +32,13 @@ export class NetworkPolicies extends React.Component<Props> {
         searchFilters={[
           (item: NetworkPolicy) => item.getSearchFields(),
         ]}
-        renderHeaderTitle={<Trans>Network Policies</Trans>}
+        renderHeaderTitle="Network Policies"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Policy Types</Trans>, className: "type" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Policy Types", className: "type" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(item: NetworkPolicy) => [
           item.getName(),

src/renderer/components/+network-policies/network-policy-details.tsx

@@ -2,7 +2,6 @@ import "./network-policy-details.scss";
 
 import get from "lodash/get";
 import React, { Fragment } from "react";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy } from "../../api/endpoints/network-policy.api";
 import { Badge } from "../badge";
@@ -10,7 +9,6 @@ import { SubTitle } from "../layout/sub-title";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { _i18n } from "../../i18n";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
@@ -26,7 +24,7 @@ export class NetworkPolicyDetails extends React.Component<Props> {
 
     return (
       <>
-        <SubTitle title={<Trans>From</Trans>}/>
+        <SubTitle title="From"/>
         {from.map(item =>
           Object.keys(item).map(key => {
             const data = get(item, key);
@@ -75,7 +73,7 @@ export class NetworkPolicyDetails extends React.Component<Props> {
 
     return (
       <>
-        <SubTitle title={<Trans>To</Trans>}/>
+        <SubTitle title="To"/>
         {to.map(item => {
           const { ipBlock } = item;
 
@@ -110,22 +108,22 @@ export class NetworkPolicyDetails extends React.Component<Props> {
       <div className="NetworkPolicyDetails">
         <KubeObjectMeta object={policy}/>
 
-        <DrawerItem name={<Trans>Pod Selector</Trans>} labelsOnly={selector.length > 0}>
+        <DrawerItem name="Pod Selector" labelsOnly={selector.length > 0}>
           {selector.length > 0 ?
             policy.getMatchLabels().map(label => <Badge key={label} label={label}/>) :
-            _i18n._(t`(empty) (Allowing the specific traffic to all pods in this namespace)`)
+            `(empty) (Allowing the specific traffic to all pods in this namespace)`
           }
         </DrawerItem>
 
         {ingress && (
           <>
-            <DrawerTitle title={_i18n._(t`Ingress`)}/>
+            <DrawerTitle title={`Ingress`}/>
             {ingress.map((ingress, i) => {
               const { ports } = ingress;
 
               return (
                 <Fragment key={i}>
-                  <DrawerItem name={<Trans>Ports</Trans>}>
+                  <DrawerItem name="Ports">
                     {ports && ports.map(({ port, protocol }) => `${protocol || ""}:${port || ""}`).join(", ")}
                   </DrawerItem>
                   {this.renderIngressFrom(ingress)}
@@ -137,13 +135,13 @@ export class NetworkPolicyDetails extends React.Component<Props> {
 
         {egress && (
           <>
-            <DrawerTitle title={<Trans>Egress</Trans>}/>
+            <DrawerTitle title="Egress"/>
             {egress.map((egress, i) => {
               const { ports } = egress;
 
               return (
                 <Fragment key={i}>
-                  <DrawerItem name={<Trans>Ports</Trans>}>
+                  <DrawerItem name="Ports">
                     {ports && ports.map(({ port, protocol }) => `${protocol || ""}:${port || ""}`).join(", ")}
                   </DrawerItem>
                   {this.renderEgressTo(egress)}

src/renderer/components/+network-services/service-details-endpoint.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import React from "react";
 import { Table, TableHead, TableCell, TableRow } from "../table";
 import { prevDefault } from "../../utils";
-import { Trans } from "@lingui/macro";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { Spinner } from "../spinner";
 import { showDetails } from "../kube-object";
@@ -34,8 +33,8 @@ export class ServiceDetailsEndpoint extends React.Component<Props> {
           className="box grow"
         >
           <TableHead>
-            <TableCell className="name" ><Trans>Name</Trans></TableCell>
-            <TableCell className="endpoints"><Trans>Endpoints</Trans></TableCell>
+            <TableCell className="name" >Name</TableCell>
+            <TableCell className="endpoints">Endpoints</TableCell>
           </TableHead>
           <TableRow
             key={endpoint.getId()}

src/renderer/components/+network-services/service-details.tsx

@@ -2,13 +2,11 @@ import "./service-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { Service, endpointApi } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
@@ -38,31 +36,31 @@ export class ServiceDetails extends React.Component<Props> {
       <div className="ServicesDetails">
         <KubeObjectMeta object={service}/>
 
-        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+        <DrawerItem name="Selector" labelsOnly>
           {service.getSelector().map(selector => <Badge key={selector} label={selector}/>)}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Type</Trans>}>
+        <DrawerItem name="Type">
           {spec.type}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Session Affinity</Trans>}>
+        <DrawerItem name="Session Affinity">
           {spec.sessionAffinity}
         </DrawerItem>
 
-        <DrawerTitle title={_i18n._(t`Connection`)}/>
+        <DrawerTitle title={`Connection`}/>
 
-        <DrawerItem name={<Trans>Cluster IP</Trans>}>
+        <DrawerItem name="Cluster IP">
           {spec.clusterIP}
         </DrawerItem>
 
         {service.getExternalIps().length > 0 && (
-          <DrawerItem name={<Trans>External IPs</Trans>}>
+          <DrawerItem name="External IPs">
             {service.getExternalIps().map(ip => <div key={ip}>{ip}</div>)}
           </DrawerItem>
         )}
 
-        <DrawerItem name={<Trans>Ports</Trans>}>
+        <DrawerItem name="Ports">
           <div>
             {
               service.getPorts().map((port) => (
@@ -73,11 +71,11 @@ export class ServiceDetails extends React.Component<Props> {
         </DrawerItem>
 
         {spec.type === "LoadBalancer" && spec.loadBalancerIP && (
-          <DrawerItem name={<Trans>Load Balancer IP</Trans>}>
+          <DrawerItem name="Load Balancer IP">
             {spec.loadBalancerIP}
           </DrawerItem>
         )}
-        <DrawerTitle title={_i18n._(t`Endpoint`)}/>
+        <DrawerTitle title={`Endpoint`}/>
 
         <ServiceDetailsEndpoint endpoint={endpoint} />
       </div>

src/renderer/components/+network-services/service-port-component.tsx

@@ -2,9 +2,7 @@ import "./service-port-component.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t } from "@lingui/macro";
 import { Service, ServicePort } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { apiBase } from "../../api";
 import { observable } from "mobx";
 import { cssNames } from "../../utils";
@@ -39,7 +37,7 @@ export class ServicePortComponent extends React.Component<Props> {
 
     return (
       <div className={cssNames("ServicePortComponent", { waiting: this.waiting })}>
-        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
+        <span title={`Open in a browser`} onClick={() => this.portForward() }>
           {port.toString()}
           {this.waiting && (
             <Spinner />

src/renderer/components/+network-services/services.tsx

@@ -2,7 +2,6 @@ import "./services.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { IServicesRouteParams } from "./services.route";
 import { Service } from "../../api/endpoints/service.api";
@@ -46,18 +45,18 @@ export class Services extends React.Component<Props> {
           (service: Service) => service.getSelector().join(" "),
           (service: Service) => service.getPorts().join(" "),
         ]}
-        renderHeaderTitle={<Trans>Services</Trans>}
+        renderHeaderTitle="Services"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
-          { title: <Trans>Cluster IP</Trans>, className: "clusterIp", sortBy: sortBy.clusterIp, },
-          { title: <Trans>Ports</Trans>, className: "ports", sortBy: sortBy.ports },
-          { title: <Trans>External IP</Trans>, className: "externalIp" },
-          { title: <Trans>Selector</Trans>, className: "selector", sortBy: sortBy.selector },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Type", className: "type", sortBy: sortBy.type },
+          { title: "Cluster IP", className: "clusterIp", sortBy: sortBy.clusterIp, },
+          { title: "Ports", className: "ports", sortBy: sortBy.ports },
+          { title: "External IP", className: "externalIp" },
+          { title: "Selector", className: "selector", sortBy: sortBy.selector },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Status", className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(service: Service) => [
           service.getName(),

src/renderer/components/+network/network.tsx

@@ -2,7 +2,6 @@ import "./network.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { Services, servicesRoute, servicesURL } from "../+network-services";
 import { endpointRoute, Endpoints, endpointURL } from "../+network-endpoints";
@@ -19,7 +18,7 @@ export class Network extends React.Component {
 
     if (isAllowedResource("services")) {
       routes.push({
-        title: <Trans>Services</Trans>,
+        title: "Services",
         component: Services,
         url: servicesURL({ query }),
         routePath: servicesRoute.path.toString(),
@@ -28,7 +27,7 @@ export class Network extends React.Component {
 
     if (isAllowedResource("endpoints")) {
       routes.push({
-        title: <Trans>Endpoints</Trans>,
+        title: "Endpoints",
         component: Endpoints,
         url: endpointURL({ query }),
         routePath: endpointRoute.path.toString(),
@@ -37,7 +36,7 @@ export class Network extends React.Component {
 
     if (isAllowedResource("ingresses")) {
       routes.push({
-        title: <Trans>Ingresses</Trans>,
+        title: "Ingresses",
         component: Ingresses,
         url: ingressURL({ query }),
         routePath: ingressRoute.path.toString(),
@@ -46,7 +45,7 @@ export class Network extends React.Component {
 
     if (isAllowedResource("networkpolicies")) {
       routes.push({
-        title: <Trans>Network Policies</Trans>,
+        title: "Network Policies",
         component: NetworkPolicies,
         url: networkPoliciesURL({ query }),
         routePath: networkPoliciesRoute.path.toString(),

src/renderer/components/+nodes/node-charts.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from "react";
-import { t } from "@lingui/macro";
 import { IClusterMetrics, Node } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
@@ -8,7 +7,6 @@ import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metri
 import { observer } from "mobx-react";
 import { ChartOptions, ChartPoint } from "chart.js";
 import { themeStore } from "../../theme.store";
-import { _i18n } from "../../i18n";
 
 type IContext = IResourceMetricsValue<Node, { metrics: IClusterMetrics }>;
 
@@ -43,22 +41,22 @@ export const NodeCharts = observer(() => {
     [
       {
         id: `${id}-cpuUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`CPU cores usage`),
+        label: `Usage`,
+        tooltip: `CPU cores usage`,
         borderColor: "#3D90CE",
         data: cpuUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuRequests`,
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`CPU requests`),
+        label: `Requests`,
+        tooltip: `CPU requests`,
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuCapacity`,
-        label: _i18n._(t`Capacity`),
-        tooltip: _i18n._(t`CPU capacity`),
+        label: `Capacity`,
+        tooltip: `CPU capacity`,
         borderColor: chartCapacityColor,
         data: cpuCapacity.map(([x, y]) => ({ x, y }))
       }
@@ -67,22 +65,22 @@ export const NodeCharts = observer(() => {
     [
       {
         id: `${id}-memoryUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Memory usage`),
+        label: `Usage`,
+        tooltip: `Memory usage`,
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: "memoryRequests",
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Memory requests`),
+        label: `Requests`,
+        tooltip: `Memory requests`,
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-memoryCapacity`,
-        label: _i18n._(t`Capacity`),
-        tooltip: _i18n._(t`Memory capacity`),
+        label: `Capacity`,
+        tooltip: `Memory capacity`,
         borderColor: chartCapacityColor,
         data: memoryCapacity.map(([x, y]) => ({ x, y }))
       }
@@ -91,15 +89,15 @@ export const NodeCharts = observer(() => {
     [
       {
         id: `${id}-fsUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Node filesystem usage in bytes`),
+        label: `Usage`,
+        tooltip: `Node filesystem usage in bytes`,
         borderColor: "#ffc63d",
         data: fsUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-fsSize`,
-        label: _i18n._(t`Size`),
-        tooltip: _i18n._(t`Node filesystem size in bytes`),
+        label: `Size`,
+        tooltip: `Node filesystem size in bytes`,
         borderColor: chartCapacityColor,
         data: fsSize.map(([x, y]) => ({ x, y }))
       }
@@ -108,15 +106,15 @@ export const NodeCharts = observer(() => {
     [
       {
         id: `${id}-podUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Number of running Pods`),
+        label: `Usage`,
+        tooltip: `Number of running Pods`,
         borderColor: "#30b24d",
         data: podUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-podCapacity`,
-        label: _i18n._(t`Capacity`),
-        tooltip: _i18n._(t`Node Pods capacity`),
+        label: `Capacity`,
+        tooltip: `Node Pods capacity`,
         borderColor: chartCapacityColor,
         data: podCapacity.map(([x, y]) => ({ x, y }))
       }

src/renderer/components/+nodes/node-details.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import upperFirst from "lodash/upperFirst";
 import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerItemLabels } from "../drawer";
 import { Badge } from "../badge";
 import { nodesStore } from "./nodes.store";
@@ -50,10 +49,10 @@ export class NodeDetails extends React.Component<Props> {
     const childPods = podsStore.getPodsByNode(node.getName());
     const metrics = nodesStore.nodeMetrics;
     const metricTabs = [
-      <Trans key="cpu">CPU</Trans>,
-      <Trans key="memory">Memory</Trans>,
-      <Trans key="disk">Disk</Trans>,
-      <Trans key="pods">Pods</Trans>,
+      "CPU",
+      "Memory",
+      "Disk",
+      "Pods",
     ];
 
     return (
@@ -67,18 +66,18 @@ export class NodeDetails extends React.Component<Props> {
           </ResourceMetrics>
         )}
         <KubeObjectMeta object={node} hideFields={["labels", "annotations", "uid", "resourceVersion", "selfLink"]}/>
-        <DrawerItem name={<Trans>Capacity</Trans>}>
-          <Trans>CPU</Trans>: {capacity.cpu},{" "}
-          <Trans>Memory</Trans>: {Math.floor(parseInt(capacity.memory) / 1024)}Mi,{" "}
-          <Trans>Pods</Trans>: {capacity.pods}
+        <DrawerItem name="Capacity">
+          CPU: {capacity.cpu},{" "}
+          Memory: {Math.floor(parseInt(capacity.memory) / 1024)}Mi,{" "}
+          Pods: {capacity.pods}
         </DrawerItem>
-        <DrawerItem name={<Trans>Allocatable</Trans>}>
-          <Trans>CPU</Trans>: {allocatable.cpu},{" "}
-          <Trans>Memory</Trans>: {Math.floor(parseInt(allocatable.memory) / 1024)}Mi,{" "}
-          <Trans>Pods</Trans>: {allocatable.pods}
+        <DrawerItem name="Allocatable">
+          CPU: {allocatable.cpu},{" "}
+          Memory: {Math.floor(parseInt(allocatable.memory) / 1024)}Mi,{" "}
+          Pods: {allocatable.pods}
         </DrawerItem>
         {addresses &&
-        <DrawerItem name={<Trans>Addresses</Trans>}>
+        <DrawerItem name="Addresses">
           {
             addresses.map(({ type, address }) => (
               <p key={type}>{type}: {address}</p>
@@ -86,31 +85,31 @@ export class NodeDetails extends React.Component<Props> {
           }
         </DrawerItem>
         }
-        <DrawerItem name={<Trans>OS</Trans>}>
+        <DrawerItem name="OS">
           {nodeInfo.operatingSystem} ({nodeInfo.architecture})
         </DrawerItem>
-        <DrawerItem name={<Trans>OS Image</Trans>}>
+        <DrawerItem name="OS Image">
           {nodeInfo.osImage}
         </DrawerItem>
-        <DrawerItem name={<Trans>Kernel version</Trans>}>
+        <DrawerItem name="Kernel version">
           {nodeInfo.kernelVersion}
         </DrawerItem>
-        <DrawerItem name={<Trans>Container runtime</Trans>}>
+        <DrawerItem name="Container runtime">
           {nodeInfo.containerRuntimeVersion}
         </DrawerItem>
-        <DrawerItem name={<Trans>Kubelet version</Trans>}>
+        <DrawerItem name="Kubelet version">
           {nodeInfo.kubeletVersion}
         </DrawerItem>
         <DrawerItemLabels
-          name={<Trans>Labels</Trans>}
+          name="Labels"
           labels={node.getLabels()}
         />
         <DrawerItemLabels
-          name={<Trans>Annotations</Trans>}
+          name="Annotations"
           labels={node.getAnnotations()}
         />
         {taints.length > 0 && (
-          <DrawerItem name={<Trans>Taints</Trans>} labelsOnly>
+          <DrawerItem name="Taints" labelsOnly>
             {
               taints.map(({ key, effect, value }) => (
                 <Badge key={key} label={`${key}: ${effect}`} tooltip={value}/>
@@ -119,7 +118,7 @@ export class NodeDetails extends React.Component<Props> {
           </DrawerItem>
         )}
         {conditions &&
-        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+        <DrawerItem name="Conditions" className="conditions" labelsOnly>
           {
             conditions.map(condition => {
               const { type } = condition;

src/renderer/components/+nodes/nodes.tsx

@@ -2,7 +2,6 @@ import "./nodes.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { t, Trans } from "@lingui/macro";
 import { cssNames, interval } from "../../utils";
 import { TabLayout } from "../layout/tab-layout";
 import { nodesStore } from "./nodes.store";
@@ -11,7 +10,6 @@ import { KubeObjectListLayout } from "../kube-object";
 import { INodesRouteParams } from "./nodes.route";
 import { Node } from "../../api/endpoints/nodes.api";
 import { LineProgress } from "../line-progress";
-import { _i18n } from "../../i18n";
 import { bytesToUnits } from "../../utils/convertMemory";
 import { Tooltip, TooltipPosition } from "../tooltip";
 import kebabCase from "lodash/kebabCase";
@@ -60,7 +58,7 @@ export class Nodes extends React.Component<Props> {
         value={usage}
         tooltip={{
           preferredPositions: TooltipPosition.BOTTOM,
-          children: `${_i18n._(t`CPU:`)} ${Math.ceil(usage * 100) / cores}\%, ${_i18n._(t`cores:`)} ${cores}`
+          children: `CPU: ${Math.ceil(usage * 100) / cores}\%, cores: ${cores}`
         }}
       />
     );
@@ -79,7 +77,7 @@ export class Nodes extends React.Component<Props> {
         value={usage}
         tooltip={{
           preferredPositions: TooltipPosition.BOTTOM,
-          children: `${_i18n._(t`Memory:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
+          children: `Memory: ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
         }}
       />
     );
@@ -98,7 +96,7 @@ export class Nodes extends React.Component<Props> {
         value={usage}
         tooltip={{
           preferredPositions: TooltipPosition.BOTTOM,
-          children: `${_i18n._(t`Disk:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
+          children: `Disk: ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
         }}
       />
     );
@@ -155,18 +153,18 @@ export class Nodes extends React.Component<Props> {
             (node: Node) => node.getKubeletVersion(),
             (node: Node) => node.getNodeConditionText(),
           ]}
-          renderHeaderTitle={<Trans>Nodes</Trans>}
+          renderHeaderTitle="Nodes"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>CPU</Trans>, className: "cpu", sortBy: sortBy.cpu },
-            { title: <Trans>Memory</Trans>, className: "memory", sortBy: sortBy.memory },
-            { title: <Trans>Disk</Trans>, className: "disk", sortBy: sortBy.disk },
-            { title: <Trans>Taints</Trans>, className: "taints", sortBy: sortBy.taints },
-            { title: <Trans>Roles</Trans>, className: "roles", sortBy: sortBy.roles },
-            { title: <Trans>Version</Trans>, className: "version", sortBy: sortBy.version },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-            { title: <Trans>Conditions</Trans>, className: "conditions", sortBy: sortBy.conditions },
+            { title: "CPU", className: "cpu", sortBy: sortBy.cpu },
+            { title: "Memory", className: "memory", sortBy: sortBy.memory },
+            { title: "Disk", className: "disk", sortBy: sortBy.disk },
+            { title: "Taints", className: "taints", sortBy: sortBy.taints },
+            { title: "Roles", className: "roles", sortBy: sortBy.roles },
+            { title: "Version", className: "version", sortBy: sortBy.version },
+            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Conditions", className: "conditions", sortBy: sortBy.conditions },
           ]}
           renderTableContents={(node: Node) => {
             const tooltipId = `node-taints-${node.getId()}`;

src/renderer/components/+pod-security-policies/pod-security-policies.tsx

@@ -2,7 +2,6 @@ import "./pod-security-policies.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { KubeObjectListLayout } from "../kube-object";
 import { podSecurityPoliciesStore } from "./pod-security-policies.store";
 import { PodSecurityPolicy } from "../../api/endpoints";
@@ -34,19 +33,19 @@ export class PodSecurityPolicies extends React.Component {
           (item: PodSecurityPolicy) => item.getVolumes(),
           (item: PodSecurityPolicy) => Object.values(item.getRules()),
         ]}
-        renderHeaderTitle={<Trans>Pod Security Policies</Trans>}
+        renderHeaderTitle="Pod Security Policies"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Privileged</Trans>, className: "privileged", sortBy: sortBy.privileged },
-          { title: <Trans>Volumes</Trans>, className: "volumes", sortBy: sortBy.volumes },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Privileged", className: "privileged", sortBy: sortBy.privileged },
+          { title: "Volumes", className: "volumes", sortBy: sortBy.volumes },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(item: PodSecurityPolicy) => {
           return [
             item.getName(),
             <KubeObjectStatusIcon key="icon" object={item} />,
-            item.isPrivileged() ? <Trans>Yes</Trans> : <Trans>No</Trans>,
+            item.isPrivileged() ? "Yes" : "No",
             item.getVolumes().join(", "),
             item.getAge(),
           ];

src/renderer/components/+pod-security-policies/pod-security-policy-details.tsx

@@ -2,7 +2,6 @@ import "./pod-security-policy-details.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { PodSecurityPolicy } from "../../api/endpoints";
@@ -28,11 +27,11 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
     return (
       <>
         <DrawerTitle title={title}/>
-        <DrawerItem name={<Trans>Rule</Trans>}>
+        <DrawerItem name="Rule">
           {rule}
         </DrawerItem>
         {ranges && (
-          <DrawerItem name={<Trans>Ranges (Min-Max)</Trans>} labelsOnly>
+          <DrawerItem name="Ranges (Min-Max)" labelsOnly>
             {ranges.map(({ min, max }, index) => {
               return <Badge key={index} label={`${min} - ${max}`}/>;
             })}
@@ -60,85 +59,85 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
         <KubeObjectMeta object={psp}/>
 
         {allowedCapabilities && (
-          <DrawerItem name={<Trans>Allowed Capabilities</Trans>}>
+          <DrawerItem name="Allowed Capabilities">
             {allowedCapabilities.join(", ")}
           </DrawerItem>
         )}
 
         {volumes && (
-          <DrawerItem name={<Trans>Volumes</Trans>}>
+          <DrawerItem name="Volumes">
             {volumes.join(", ")}
           </DrawerItem>
         )}
 
         {allowedCSIDrivers && (
-          <DrawerItem name={<Trans>Allowed CSI Drivers</Trans>}>
+          <DrawerItem name="Allowed CSI Drivers">
             {allowedCSIDrivers.map(({ name }) => name).join(", ")}
           </DrawerItem>
         )}
 
         {allowedFlexVolumes && (
-          <DrawerItem name={<Trans>Allowed Flex Volumes</Trans>}>
+          <DrawerItem name="Allowed Flex Volumes">
             {allowedFlexVolumes.map(({ driver }) => driver).join(", ")}
           </DrawerItem>
         )}
 
         {allowedProcMountTypes && (
-          <DrawerItem name={<Trans>Allowed Proc Mount Types</Trans>}>
+          <DrawerItem name="Allowed Proc Mount Types">
             {allowedProcMountTypes.join(", ")}
           </DrawerItem>
         )}
 
         {allowedUnsafeSysctls && (
-          <DrawerItem name={<Trans>Allowed Unsafe Sysctls</Trans>}>
+          <DrawerItem name="Allowed Unsafe Sysctls">
             {allowedUnsafeSysctls.join(", ")}
           </DrawerItem>
         )}
 
         {forbiddenSysctls && (
-          <DrawerItem name={<Trans>Forbidden Sysctls</Trans>}>
+          <DrawerItem name="Forbidden Sysctls">
             {forbiddenSysctls.join(", ")}
           </DrawerItem>
         )}
 
-        <DrawerItem name={<Trans>Allow Privilege Escalation</Trans>}>
-          {allowPrivilegeEscalation ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Allow Privilege Escalation">
+          {allowPrivilegeEscalation ? "Yes" : "No"}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Privileged</Trans>}>
-          {privileged ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Privileged">
+          {privileged ? "Yes" : "No"}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Read-only Root Filesystem</Trans>}>
-          {readOnlyRootFilesystem ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Read-only Root Filesystem">
+          {readOnlyRootFilesystem ? "Yes" : "No"}
         </DrawerItem>
 
         {defaultAddCapabilities && (
-          <DrawerItem name={<Trans>Default Add Capabilities</Trans>}>
+          <DrawerItem name="Default Add Capabilities">
             {defaultAddCapabilities.join(", ")}
           </DrawerItem>
         )}
 
         {requiredDropCapabilities && (
-          <DrawerItem name={<Trans>Required Drop Capabilities</Trans>}>
+          <DrawerItem name="Required Drop Capabilities">
             {requiredDropCapabilities.join(", ")}
           </DrawerItem>
         )}
 
-        <DrawerItem name={<Trans>Host IPC</Trans>}>
-          {hostIPC ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Host IPC">
+          {hostIPC ? "Yes" : "No"}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Host Network</Trans>}>
-          {hostNetwork ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Host Network">
+          {hostNetwork ? "Yes" : "No"}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Host PID</Trans>}>
-          {hostPID ? <Trans>Yes</Trans> : <Trans>No</Trans>}
+        <DrawerItem name="Host PID">
+          {hostPID ? "Yes" : "No"}
         </DrawerItem>
 
         {hostPorts && (
-          <DrawerItem name={<Trans>Host Ports (Min-Max)</Trans>} labelsOnly>
+          <DrawerItem name="Host Ports (Min-Max)" labelsOnly>
             {hostPorts.map(({ min, max }, index) => {
               return <Badge key={index} label={`${min} - ${max}`}/>;
             })}
@@ -147,17 +146,17 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
 
         {allowedHostPaths && (
           <>
-            <DrawerTitle title={<Trans>Allowed Host Paths</Trans>}/>
+            <DrawerTitle title="Allowed Host Paths"/>
             <Table>
               <TableHead>
-                <TableCell><Trans>Path Prefix</Trans></TableCell>
-                <TableCell><Trans>Read-only</Trans></TableCell>
+                <TableCell>Path Prefix</TableCell>
+                <TableCell>Read-only</TableCell>
               </TableHead>
               {allowedHostPaths.map(({ pathPrefix, readOnly }, index) => {
                 return (
                   <TableRow key={index}>
                     <TableCell>{pathPrefix}</TableCell>
-                    <TableCell>{readOnly ? <Trans>Yes</Trans> : <Trans>No</Trans>}</TableCell>
+                    <TableCell>{readOnly ? "Yes" : "No"}</TableCell>
                   </TableRow>
                 );
               })}
@@ -165,18 +164,18 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
           </>
         )}
 
-        {this.renderRuleGroup(<Trans>Fs Group</Trans>, fsGroup)}
-        {this.renderRuleGroup(<Trans>Run As Group</Trans>, runAsGroup)}
-        {this.renderRuleGroup(<Trans>Run As User</Trans>, runAsUser)}
-        {this.renderRuleGroup(<Trans>Supplemental Groups</Trans>, supplementalGroups)}
+        {this.renderRuleGroup("Fs Group", fsGroup)}
+        {this.renderRuleGroup("Run As Group", runAsGroup)}
+        {this.renderRuleGroup("Run As User", runAsUser)}
+        {this.renderRuleGroup("Supplemental Groups", supplementalGroups)}
 
         {runtimeClass && (
           <>
-            <DrawerTitle title={<Trans>Runtime Class</Trans>}/>
-            <DrawerItem name={<Trans>Allowed Runtime Class Names</Trans>}>
+            <DrawerTitle title="Runtime Class"/>
+            <DrawerItem name="Allowed Runtime Class Names">
               {(runtimeClass.allowedRuntimeClassNames || []).join(", ") || "-"}
             </DrawerItem>
-            <DrawerItem name={<Trans>Default Runtime Class Name</Trans>}>
+            <DrawerItem name="Default Runtime Class Name">
               {runtimeClass.defaultRuntimeClassName || "-"}
             </DrawerItem>
           </>
@@ -184,22 +183,22 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
 
         {seLinux && (
           <>
-            <DrawerTitle title={<Trans>Se Linux</Trans>}/>
-            <DrawerItem name={<Trans>Rule</Trans>}>
+            <DrawerTitle title="Se Linux"/>
+            <DrawerItem name="Rule">
               {seLinux.rule}
             </DrawerItem>
             {seLinux.seLinuxOptions && (
               <>
-                <DrawerItem name={<Trans>Level</Trans>}>
+                <DrawerItem name="Level">
                   {seLinux.seLinuxOptions.level}
                 </DrawerItem>
-                <DrawerItem name={<Trans>Role</Trans>}>
+                <DrawerItem name="Role">
                   {seLinux.seLinuxOptions.role}
                 </DrawerItem>
-                <DrawerItem name={<Trans>Type</Trans>}>
+                <DrawerItem name="Type">
                   {seLinux.seLinuxOptions.type}
                 </DrawerItem>
-                <DrawerItem name={<Trans>User</Trans>}>
+                <DrawerItem name="User">
                   {seLinux.seLinuxOptions.user}
                 </DrawerItem>
               </>

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -4,8 +4,6 @@ import React from "react";
 import { remote, FileFilter } from "electron";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Input } from "../input";
@@ -66,8 +64,8 @@ export class AddHelmRepoDialog extends React.Component<Props> {
     const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
       defaultPath: this.getFilePath(type),
       properties: ["openFile", "showHiddenFiles"],
-      message: _i18n._(t`Select file`),
-      buttonLabel: _i18n._(t`Use file`),
+      message: `Select file`,
+      buttonLabel: `Use file`,
       filters: [
         fileFilter,
         { name: "Any", extensions: ["*"]}
@@ -82,11 +80,11 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   async addCustomRepo() {
     try {
       await repoManager.addСustomRepo(this.helmRepo);
-      Notifications.ok(<Trans>Helm repository <b>{this.helmRepo.name}</b> has added</Trans>);
+      Notifications.ok(<>Helm repository <b>{this.helmRepo.name}</b> has added</>);
       this.props.onAddRepo();
       this.close();
     } catch (err) {
-      Notifications.error(<Trans>Adding helm branch <b>{this.helmRepo.name}</b> has failed: {String(err)}</Trans>);
+      Notifications.error(<>Adding helm branch <b>{this.helmRepo.name}</b> has failed: {String(err)}</>);
     }
   }
 
@@ -103,7 +101,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
         <Icon
           material="folder"
           onClick={() => this.selectFileDialog(fileType, {name: placeholder, extensions: fileExtensions})}
-          tooltip={<Trans>Browse</Trans>}
+          tooltip="Browse"
         />
       </div>);
   }
@@ -111,23 +109,23 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   renderOptions() {
     return (
       <>
-        <SubTitle title={<Trans>Security settings</Trans>} />
+        <SubTitle title="Security settings" />
         <Checkbox
-          label={_i18n._(t`Skip TLS certificate checks for the repository`)}
+          label={`Skip TLS certificate checks for the repository`}
           value={this.helmRepo.insecureSkipTlsVerify}
           onChange={v => this.helmRepo.insecureSkipTlsVerify = v}
         />
-        {this.renderFileInput(_i18n._(t`Key file`), FileType.KeyFile, AddHelmRepoDialog.keyExtensions)}
-        {this.renderFileInput(_i18n._(t`Ca file`), FileType.CaFile, AddHelmRepoDialog.certExtensions)}
-        {this.renderFileInput(_i18n._(t`Cerificate file`), FileType.CertFile, AddHelmRepoDialog.certExtensions)}
-        <SubTitle title={<Trans>Chart Repository Credentials</Trans>} />
+        {this.renderFileInput(`Key file`, FileType.KeyFile, AddHelmRepoDialog.keyExtensions)}
+        {this.renderFileInput(`Ca file`, FileType.CaFile, AddHelmRepoDialog.certExtensions)}
+        {this.renderFileInput(`Cerificate file`, FileType.CertFile, AddHelmRepoDialog.certExtensions)}
+        <SubTitle title="Chart Repository Credentials" />
         <Input
-          placeholder={_i18n._(t`Username`)}
+          placeholder={`Username`}
           value={this.helmRepo.username} onChange= {v => this.helmRepo.username = v}
         />
         <Input
           type="password"
-          placeholder={_i18n._(t`Password`)}
+          placeholder={`Password`}
           value={this.helmRepo.password} onChange={v => this.helmRepo.password = v}
         />
       </>);
@@ -136,7 +134,7 @@ export class AddHelmRepoDialog extends React.Component<Props> {
   render() {
     const { ...dialogProps } = this.props;
 
-    const header = <h5><Trans>Add custom Helm Repo</Trans></h5>;
+    const header = <h5>Add custom Helm Repo</h5>;
 
     return (
       <Dialog
@@ -146,25 +144,25 @@ export class AddHelmRepoDialog extends React.Component<Props> {
         close={this.close}
       >
         <Wizard header={header} done={this.close}>
-          <WizardStep contentClass="flow column" nextLabel={<Trans>Add</Trans>} next={()=>{this.addCustomRepo();}}>
+          <WizardStep contentClass="flow column" nextLabel="Add" next={()=>{this.addCustomRepo();}}>
             <div className="flex column gaps">
               <Input
                 autoFocus required
-                placeholder={_i18n._(t`Helm repo name`)}
+                placeholder={`Helm repo name`}
                 validators={systemName}
                 value={this.helmRepo.name} onChange={v => this.helmRepo.name = v}
               />
               <Input
                 required
-                placeholder={_i18n._(t`URL`)}
+                placeholder={`URL`}
                 validators={isUrl}
                 value={this.helmRepo.url} onChange={v => this.helmRepo.url = v}
               />
               <Button plain className="accordion" onClick={() => this.showOptions = !this.showOptions} >
-                <Trans>More</Trans>
+                More
                 <Icon
                   small
-                  tooltip={_i18n._(t`More`)}
+                  tooltip={`More`}
                   material={this.showOptions ? "remove" : "add"}
                 />
               </Button>

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Trans } from "@lingui/macro";
 import { Checkbox } from "../checkbox";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
@@ -25,18 +24,18 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
 
   return (
     <>
-      <h2><Trans>Kubectl Binary</Trans></h2>
+      <h2>Kubectl Binary</h2>
       <Checkbox
-        label={<Trans>Download kubectl binaries</Trans>}
+        label="Download kubectl binaries"
         value={preferences.downloadKubectlBinaries}
         onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries}
       />
       <small className="hint">
-        <Trans>Download kubectl binaries matching to Kubernetes cluster version.</Trans>
+        Download kubectl binaries matching to Kubernetes cluster version.
       </small>
       <SubTitle title="Download mirror" />
       <Select
-        placeholder={<Trans>Download mirror for kubectl</Trans>}
+        placeholder="Download mirror for kubectl"
         options={downloadMirrorOptions}
         value={preferences.downloadMirror}
         onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
@@ -66,7 +65,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         disabled={preferences.downloadKubectlBinaries}
       />
       <small className="hint">
-        <Trans>The path to the kubectl binary on the system.</Trans>
+        The path to the kubectl binary on the system.
       </small>
     </>
   );

src/renderer/components/+preferences/preferences.tsx

@@ -3,8 +3,6 @@ import "./preferences.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { action, computed, observable } from "mobx";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Icon } from "../icon";
 import { Select, SelectOption } from "../select";
 import { userStore } from "../../../common/user-store";
@@ -69,7 +67,7 @@ export class Preferences extends React.Component {
       await repoManager.addRepo(repo);
       this.helmAddedRepos.set(repo.name, repo);
     } catch (err) {
-      Notifications.error(<Trans>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>);
+      Notifications.error(<>Adding helm branch <b>{repo.name}</b> has failed: {String(err)}</>);
     }
   }
 
@@ -79,7 +77,7 @@ export class Preferences extends React.Component {
       this.helmAddedRepos.delete(repo.name);
     } catch (err) {
       Notifications.error(
-        <Trans>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</Trans>
+        <>Removing helm branch <b>{repo.name}</b> has failed: {String(err)}</>
       );
     }
   }
@@ -88,7 +86,7 @@ export class Preferences extends React.Component {
     const isAdded = this.helmAddedRepos.has(repo.name);
 
     if (isAdded) {
-      Notifications.ok(<Trans>Helm branch <b>{repo.name}</b> already in use</Trans>);
+      Notifications.ok(<>Helm branch <b>{repo.name}</b> already in use</>);
 
       return;
     }
@@ -110,35 +108,35 @@ export class Preferences extends React.Component {
 
   render() {
     const { preferences } = userStore;
-    const header = <h2><Trans>Preferences</Trans></h2>;
+    const header = <h2>Preferences</h2>;
 
     return (
       <PageLayout showOnTop className="Preferences" header={header}>
-        <h2><Trans>Color Theme</Trans></h2>
+        <h2>Color Theme</h2>
         <Select
           options={this.themeOptions}
           value={preferences.colorTheme}
           onChange={({ value }: SelectOption) => preferences.colorTheme = value}
         />
 
-        <h2><Trans>HTTP Proxy</Trans></h2>
+        <h2>HTTP Proxy</h2>
         <Input
           theme="round-black"
-          placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
+          placeholder={`Type HTTP proxy url (example: http://proxy.acme.org:8080)`}
           value={this.httpProxy}
           onChange={v => this.httpProxy = v}
           onBlur={() => preferences.httpsProxy = this.httpProxy}
         />
         <small className="hint">
-          <Trans>Proxy is used only for non-cluster communication.</Trans>
+          Proxy is used only for non-cluster communication.
         </small>
 
         <KubectlBinaries preferences={preferences}/>
 
-        <h2><Trans>Helm</Trans></h2>
+        <h2>Helm</h2>
         <div className="flex gaps">
           <Select id="HelmRepoSelect"
-            placeholder={<Trans>Repositories</Trans>}
+            placeholder="Repositories"
             isLoading={this.helmLoading}
             isDisabled={this.helmLoading}
             options={this.helmOptions}
@@ -149,7 +147,7 @@ export class Preferences extends React.Component {
           />
           <Button
             primary
-            label={<Trans>Add Custom Helm Repo</Trans>}
+            label="Add Custom Helm Repo"
             onClick={AddHelmRepoDialog.open}
           />
         </div>
@@ -164,7 +162,7 @@ export class Preferences extends React.Component {
                 <Icon
                   material="delete"
                   onClick={() => this.removeRepo(repo)}
-                  tooltip={<Trans>Remove</Trans>}
+                  tooltip="Remove"
                 />
                 <Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
                   {repo.url}
@@ -174,23 +172,23 @@ export class Preferences extends React.Component {
           })}
         </div>
 
-        <h2><Trans>Auto start-up</Trans></h2>
+        <h2>Auto start-up</h2>
         <Checkbox
-          label={<Trans>Automatically start Lens on login</Trans>}
+          label="Automatically start Lens on login"
           value={preferences.openAtLogin}
           onChange={v => preferences.openAtLogin = v}
         />
 
-        <h2><Trans>Certificate Trust</Trans></h2>
+        <h2>Certificate Trust</h2>
         <Checkbox
-          label={<Trans>Allow untrusted Certificate Authorities</Trans>}
+          label="Allow untrusted Certificate Authorities"
           value={preferences.allowUntrustedCAs}
           onChange={v => preferences.allowUntrustedCAs = v}
         />
         <small className="hint">
-          <Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
-          <Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
-          <Trans>Does not affect cluster communications!</Trans>
+          This will make Lens to trust ANY certificate authority without any validations.{" "}
+          Needed with some corporate proxies that do certificate re-writing.{" "}
+          Does not affect cluster communications!
         </small>
 
         <div className="extensions flex column gaps">

src/renderer/components/+storage-classes/storage-class-details.tsx

@@ -2,14 +2,12 @@ import "./storage-class-details.scss";
 
 import React from "react";
 import startCase from "lodash/startCase";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { StorageClass } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
@@ -29,25 +27,25 @@ export class StorageClassDetails extends React.Component<Props> {
         <KubeObjectMeta object={storageClass}/>
 
         {provisioner && (
-          <DrawerItem name={<Trans>Provisioner</Trans>} labelsOnly>
+          <DrawerItem name="Provisioner" labelsOnly>
             <Badge label={provisioner}/>
           </DrawerItem>
         )}
-        <DrawerItem name={<Trans>Volume Binding Mode</Trans>}>
+        <DrawerItem name="Volume Binding Mode">
           {storageClass.getVolumeBindingMode()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Reclaim Policy</Trans>}>
+        <DrawerItem name="Reclaim Policy">
           {storageClass.getReclaimPolicy()}
         </DrawerItem>
 
         {mountOptions && (
-          <DrawerItem name={<Trans>Mount Options</Trans>}>
+          <DrawerItem name="Mount Options">
             {mountOptions.join(", ")}
           </DrawerItem>
         )}
         {parameters && (
           <>
-            <DrawerTitle title={_i18n._(t`Parameters`)}/>
+            <DrawerTitle title={`Parameters`}/>
             {
               Object.entries(parameters).map(([name, value]) => (
                 <DrawerItem key={name + value} name={startCase(name)}>

src/renderer/components/+storage-classes/storage-classes.tsx

@@ -3,7 +3,6 @@ import "./storage-classes.scss";
 import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { StorageClass } from "../../api/endpoints/storage-class.api";
 import { KubeObjectListLayout } from "../kube-object";
 import { IStorageClassesRouteParams } from "./storage-classes.route";
@@ -37,21 +36,21 @@ export class StorageClasses extends React.Component<Props> {
           (item: StorageClass) => item.getSearchFields(),
           (item: StorageClass) => item.provisioner,
         ]}
-        renderHeaderTitle={<Trans>Storage Classes</Trans>}
+        renderHeaderTitle="Storage Classes"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Provisioner</Trans>, className: "provisioner", sortBy: sortBy.provisioner },
-          { title: <Trans>Reclaim Policy</Trans>, className: "reclaim-policy", sortBy: sortBy.reclaimPolicy },
-          { title: <Trans>Default</Trans>, className: "is-default" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Provisioner", className: "provisioner", sortBy: sortBy.provisioner },
+          { title: "Reclaim Policy", className: "reclaim-policy", sortBy: sortBy.reclaimPolicy },
+          { title: "Default", className: "is-default" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(storageClass: StorageClass) => [
           storageClass.getName(),
           <KubeObjectStatusIcon key="icon" object={storageClass} />,
           storageClass.provisioner,
           storageClass.getReclaimPolicy(),
-          storageClass.isDefault() ? <Trans>Yes</Trans> : null,
+          storageClass.isDefault() ? "Yes" : null,
           storageClass.getAge(),
         ]}
       />

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -3,7 +3,6 @@ import "./volume-claim-details.scss";
 import React, { Fragment } from "react";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { podsStore } from "../+workloads-pods/pods.store";
@@ -14,7 +13,6 @@ import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import { getDetailsUrl, KubeObjectDetailsProps, KubeObjectMeta } from "../kube-object";
 import { PersistentVolumeClaim } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
@@ -41,7 +39,7 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     const { metrics } = volumeClaimStore;
     const pods = volumeClaim.getPods(podsStore.items);
     const metricTabs = [
-      <Trans key="disk">Disk</Trans>
+      "Disk"
     ];
 
     return (
@@ -53,38 +51,38 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
           <VolumeClaimDiskChart/>
         </ResourceMetrics>
         <KubeObjectMeta object={volumeClaim}/>
-        <DrawerItem name={<Trans>Access Modes</Trans>}>
+        <DrawerItem name="Access Modes">
           {accessModes.join(", ")}
         </DrawerItem>
-        <DrawerItem name={<Trans>Storage Class Name</Trans>}>
+        <DrawerItem name="Storage Class Name">
           {storageClassName}
         </DrawerItem>
-        <DrawerItem name={<Trans>Storage</Trans>}>
+        <DrawerItem name="Storage">
           {volumeClaim.getStorage()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Pods</Trans>} className="pods">
+        <DrawerItem name="Pods" className="pods">
           {pods.map(pod => (
             <Link key={pod.getId()} to={getDetailsUrl(pod.selfLink)}>
               {pod.getName()}
             </Link>
           ))}
         </DrawerItem>
-        <DrawerItem name={<Trans>Status</Trans>}>
+        <DrawerItem name="Status">
           {volumeClaim.getStatus()}
         </DrawerItem>
 
-        <DrawerTitle title={_i18n._(t`Selector`)}/>
+        <DrawerTitle title={`Selector`}/>
 
-        <DrawerItem name={<Trans>Match Labels</Trans>} labelsOnly>
+        <DrawerItem name="Match Labels" labelsOnly>
           {volumeClaim.getMatchLabels().map(label => <Badge key={label} label={label}/>)}
         </DrawerItem>
 
-        <DrawerItem name={<Trans>Match Expressions</Trans>}>
+        <DrawerItem name="Match Expressions">
           {volumeClaim.getMatchExpressions().map(({ key, operator, values }, i) => (
             <Fragment key={i}>
-              <DrawerItem name={<Trans>Key</Trans>}>{key}</DrawerItem>
-              <DrawerItem name={<Trans>Operator</Trans>}>{operator}</DrawerItem>
-              <DrawerItem name={<Trans>Values</Trans>}>{values.join(", ")}</DrawerItem>
+              <DrawerItem name="Key">{key}</DrawerItem>
+              <DrawerItem name="Operator">{operator}</DrawerItem>
+              <DrawerItem name="Values">{values.join(", ")}</DrawerItem>
             </Fragment>
           ))}
         </DrawerItem>

src/renderer/components/+storage-volume-claims/volume-claim-disk-chart.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from "react";
 import { observer } from "mobx-react";
-import { t } from "@lingui/macro";
 import { IPvcMetrics, PersistentVolumeClaim } from "../../api/endpoints";
 import { BarChart, ChartDataSets, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 import { themeStore } from "../../theme.store";
 
 type IContext = IResourceMetricsValue<PersistentVolumeClaim, { metrics: IPvcMetrics }>;
@@ -26,15 +24,15 @@ export const VolumeClaimDiskChart = observer(() => {
   const datasets: ChartDataSets[] = [
     {
       id: `${id}-diskUsage`,
-      label: _i18n._(t`Usage`),
-      tooltip: _i18n._(t`Volume disk usage`),
+      label: `Usage`,
+      tooltip: `Volume disk usage`,
       borderColor: "#ffc63d",
       data: usage.map(([x, y]) => ({ x, y }))
     },
     {
       id: `${id}-diskCapacity`,
-      label: _i18n._(t`Capacity`),
-      tooltip: _i18n._(t`Volume disk capacity`),
+      label: `Capacity`,
+      tooltip: `Volume disk capacity`,
       borderColor: chartCapacityColor,
       data: capacity.map(([x, y]) => ({ x, y }))
     }

src/renderer/components/+storage-volume-claims/volume-claims.tsx

@@ -3,7 +3,6 @@ import "./volume-claims.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { Link, RouteComponentProps } from "react-router-dom";
-import { Trans } from "@lingui/macro";
 import { volumeClaimStore } from "./volume-claim.store";
 import { PersistentVolumeClaim } from "../../api/endpoints/persistent-volume-claims.api";
 import { podsStore } from "../+workloads-pods/pods.store";
@@ -48,16 +47,16 @@ export class PersistentVolumeClaims extends React.Component<Props> {
           (item: PersistentVolumeClaim) => item.getSearchFields(),
           (item: PersistentVolumeClaim) => item.getPods(podsStore.items).map(pod => pod.getName()),
         ]}
-        renderHeaderTitle={<Trans>Persistent Volume Claims</Trans>}
+        renderHeaderTitle="Persistent Volume Claims"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Storage class</Trans>, className: "storageClass", sortBy: sortBy.storageClass },
-          { title: <Trans>Size</Trans>, className: "size", sortBy: sortBy.size },
-          { title: <Trans>Pods</Trans>, className: "pods", sortBy: sortBy.pods },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Storage class", className: "storageClass", sortBy: sortBy.storageClass },
+          { title: "Size", className: "size", sortBy: sortBy.size },
+          { title: "Pods", className: "pods", sortBy: sortBy.pods },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Status", className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(pvc: PersistentVolumeClaim) => {
           const pods = pvc.getPods(podsStore.items);

src/renderer/components/+storage-volumes/volume-details.tsx

@@ -2,7 +2,6 @@ import startCase from "lodash/startCase";
 import "./volume-details.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -29,32 +28,32 @@ export class PersistentVolumeDetails extends React.Component<Props> {
     return (
       <div className="PersistentVolumeDetails">
         <KubeObjectMeta object={volume}/>
-        <DrawerItem name={<Trans>Capacity</Trans>}>
+        <DrawerItem name="Capacity">
           {capacity.storage}
         </DrawerItem>
 
         {mountOptions && (
-          <DrawerItem name={<Trans>Mount Options</Trans>}>
+          <DrawerItem name="Mount Options">
             {mountOptions.join(", ")}
           </DrawerItem>
         )}
 
-        <DrawerItem name={<Trans>Access Modes</Trans>}>
+        <DrawerItem name="Access Modes">
           {accessModes.join(", ")}
         </DrawerItem>
-        <DrawerItem name={<Trans>Reclaim Policy</Trans>}>
+        <DrawerItem name="Reclaim Policy">
           {persistentVolumeReclaimPolicy}
         </DrawerItem>
-        <DrawerItem name={<Trans>Storage Class Name</Trans>}>
+        <DrawerItem name="Storage Class Name">
           {storageClassName}
         </DrawerItem>
-        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
+        <DrawerItem name="Status" labelsOnly>
           <Badge label={volume.getStatus()}/>
         </DrawerItem>
 
         {nfs && (
           <>
-            <DrawerTitle title={<Trans>Network File System</Trans>}/>
+            <DrawerTitle title="Network File System"/>
             {
               Object.entries(nfs).map(([name, value]) => (
                 <DrawerItem key={name} name={startCase(name)}>
@@ -67,8 +66,8 @@ export class PersistentVolumeDetails extends React.Component<Props> {
 
         {flexVolume && (
           <>
-            <DrawerTitle title={<Trans>FlexVolume</Trans>}/>
-            <DrawerItem name={<Trans>Driver</Trans>}>
+            <DrawerTitle title="FlexVolume"/>
+            <DrawerItem name="Driver">
               {flexVolume.driver}
             </DrawerItem>
             {
@@ -83,16 +82,16 @@ export class PersistentVolumeDetails extends React.Component<Props> {
 
         {claimRef && (
           <>
-            <DrawerTitle title={<Trans>Claim</Trans>}/>
-            <DrawerItem name={<Trans>Type</Trans>}>
+            <DrawerTitle title="Claim"/>
+            <DrawerItem name="Type">
               {claimRef.kind}
             </DrawerItem>
-            <DrawerItem name={<Trans>Name</Trans>}>
+            <DrawerItem name="Name">
               <Link to={getDetailsUrl(pvcApi.getUrl(claimRef))}>
                 {claimRef.name}
               </Link>
             </DrawerItem>
-            <DrawerItem name={<Trans>Namespace</Trans>}>
+            <DrawerItem name="Namespace">
               {claimRef.namespace}
             </DrawerItem>
           </>

src/renderer/components/+storage-volumes/volumes.tsx

@@ -2,7 +2,6 @@ import "./volumes.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { Link, RouteComponentProps } from "react-router-dom";
 import { PersistentVolume } from "../../api/endpoints/persistent-volume.api";
 import { getDetailsUrl, KubeObjectListLayout } from "../kube-object";
@@ -41,15 +40,15 @@ export class PersistentVolumes extends React.Component<Props> {
           (item: PersistentVolume) => item.getSearchFields(),
           (item: PersistentVolume) => item.getClaimRefName(),
         ]}
-        renderHeaderTitle={<Trans>Persistent Volumes</Trans>}
+        renderHeaderTitle="Persistent Volumes"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Storage Class</Trans>, className: "storageClass", sortBy: sortBy.storageClass },
-          { title: <Trans>Capacity</Trans>, className: "capacity", sortBy: sortBy.capacity },
-          { title: <Trans>Claim</Trans>, className: "claim" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
+          { title: "Storage Class", className: "storageClass", sortBy: sortBy.storageClass },
+          { title: "Capacity", className: "capacity", sortBy: sortBy.capacity },
+          { title: "Claim", className: "claim" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Status", className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(volume: PersistentVolume) => {
           const { claimRef, storageClassName } = volume.spec;

src/renderer/components/+storage/storage.tsx

@@ -2,7 +2,6 @@ import "./storage.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { PersistentVolumes, volumesRoute, volumesURL } from "../+storage-volumes";
 import { StorageClasses, storageClassesRoute, storageClassesURL } from "../+storage-classes";
@@ -18,7 +17,7 @@ export class Storage extends React.Component {
 
     if (isAllowedResource("persistentvolumeclaims")) {
       tabRoutes.push({
-        title: <Trans>Persistent Volume Claims</Trans>,
+        title: "Persistent Volume Claims",
         component: PersistentVolumeClaims,
         url: volumeClaimsURL({ query }),
         routePath: volumeClaimsRoute.path.toString(),
@@ -27,7 +26,7 @@ export class Storage extends React.Component {
 
     if (isAllowedResource("persistentvolumes")) {
       tabRoutes.push({
-        title: <Trans>Persistent Volumes</Trans>,
+        title: "Persistent Volumes",
         component: PersistentVolumes,
         url: volumesURL(),
         routePath: volumesRoute.path.toString(),
@@ -36,7 +35,7 @@ export class Storage extends React.Component {
 
     if (isAllowedResource("storageclasses")) {
       tabRoutes.push({
-        title: <Trans>Storage Classes</Trans>,
+        title: "Storage Classes",
         component: StorageClasses,
         url: storageClassesURL(),
         routePath: storageClassesRoute.path.toString(),

src/renderer/components/+user-management-roles-bindings/add-role-binding-dialog.tsx

@@ -3,8 +3,6 @@ import "./add-role-binding-dialog.scss";
 import React from "react";
 import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Select, SelectOption } from "../select";
@@ -194,7 +192,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
 
     return (
       <>
-        <SubTitle title={<Trans>Context</Trans>}/>
+        <SubTitle title="Context"/>
         <NamespaceSelect
           showClusterOption
           themeName="light"
@@ -203,11 +201,11 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           onChange={({ value }) => this.onBindContextChange(value)}
         />
 
-        <SubTitle title={<Trans>Role</Trans>}/>
+        <SubTitle title="Role"/>
         <Select
           key={this.selectedRoleId}
           themeName="light"
-          placeholder={_i18n._(t`Select role..`)}
+          placeholder={`Select role..`}
           isDisabled={this.isEditing}
           options={this.roleOptions}
           value={this.selectedRoleId}
@@ -218,7 +216,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
             <>
               <Checkbox
                 theme="light"
-                label={<Trans>Use same name for RoleBinding</Trans>}
+                label="Use same name for RoleBinding"
                 value={this.useRoleForBindingName}
                 onChange={v => this.useRoleForBindingName = v}
               />
@@ -226,7 +224,7 @@ export class AddRoleBindingDialog extends React.Component<Props> {
                 !this.useRoleForBindingName && (
                   <Input
                     autoFocus
-                    placeholder={_i18n._(t`Name`)}
+                    placeholder={`Name`}
                     disabled={this.isEditing}
                     value={this.bindingName}
                     onChange={v => this.bindingName = v}
@@ -237,11 +235,11 @@ export class AddRoleBindingDialog extends React.Component<Props> {
           )
         }
 
-        <SubTitle title={<Trans>Binding targets</Trans>}/>
+        <SubTitle title="Binding targets"/>
         <Select
           isMulti
           themeName="light"
-          placeholder={_i18n._(t`Select service accounts`)}
+          placeholder={`Select service accounts`}
           autoConvertOptions={false}
           options={this.serviceAccountOptions}
           onChange={(opts: BindingSelectOption[]) => {
@@ -261,13 +259,13 @@ export class AddRoleBindingDialog extends React.Component<Props> {
     const header = (
       <h5>
         {roleBindingName
-          ? <Trans>Edit RoleBinding <span className="name">{roleBindingName}</span></Trans>
-          : <Trans>Add RoleBinding</Trans>
+          ? <>Edit RoleBinding <span className="name">{roleBindingName}</span></>
+          : "Add RoleBinding"
         }
       </h5>
     );
     const disableNext = this.isLoading || !selectedRole || !selectedBindings.length;
-    const nextLabel = isEditing ? <Trans>Update</Trans> : <Trans>Create</Trans>;
+    const nextLabel = isEditing ? "Update"  : "Create";
 
     return (
       <Dialog

src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx

@@ -1,7 +1,6 @@
 import "./role-binding-details.scss";
 
 import React from "react";
-import { t, Trans } from "@lingui/macro";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { IRoleBindingSubject, RoleBinding } from "../../api/endpoints";
 import { autobind, prevDefault } from "../../utils";
@@ -14,7 +13,6 @@ import { observable, reaction } from "mobx";
 import { roleBindingsStore } from "./role-bindings.store";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { _i18n } from "../../i18n";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
@@ -51,9 +49,9 @@ export class RoleBindingDetails extends React.Component<Props> {
 
     ConfirmDialog.open({
       ok: () => roleBindingsStore.updateSubjects({ roleBinding, removeSubjects: selectedSubjects }),
-      labelOk: _i18n._(t`Remove`),
+      labelOk: `Remove`,
       message: (
-        <p><Trans>Remove selected bindings for <b>{roleBinding.getName()}</b>?</Trans></p>
+        <p>Remove selected bindings for <b>{roleBinding.getName()}</b>?</p>
       )
     });
   }
@@ -65,7 +63,6 @@ export class RoleBindingDetails extends React.Component<Props> {
     if (!roleBinding) {
       return null;
     }
-    const name = roleBinding.getName();
     const { roleRef } = roleBinding;
     const subjects = roleBinding.getSubjects();
 
@@ -73,12 +70,12 @@ export class RoleBindingDetails extends React.Component<Props> {
       <div className="RoleBindingDetails">
         <KubeObjectMeta object={roleBinding}/>
 
-        <DrawerTitle title={<Trans>Reference</Trans>}/>
+        <DrawerTitle title="Reference"/>
         <Table>
           <TableHead>
-            <TableCell><Trans>Kind</Trans></TableCell>
-            <TableCell><Trans>Name</Trans></TableCell>
-            <TableCell><Trans>API Group</Trans></TableCell>
+            <TableCell>Kind</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>API Group</TableCell>
           </TableHead>
           <TableRow>
             <TableCell>{roleRef.kind}</TableCell>
@@ -87,14 +84,14 @@ export class RoleBindingDetails extends React.Component<Props> {
           </TableRow>
         </Table>
 
-        <DrawerTitle title={<Trans>Bindings</Trans>}/>
+        <DrawerTitle title="Bindings"/>
         {subjects.length > 0 && (
           <Table selectable className="bindings box grow">
             <TableHead>
               <TableCell checkbox/>
-              <TableCell className="binding"><Trans>Binding</Trans></TableCell>
-              <TableCell className="type"><Trans>Type</Trans></TableCell>
-              <TableCell className="type"><Trans>Namespace</Trans></TableCell>
+              <TableCell className="binding">Binding</TableCell>
+              <TableCell className="type">Type</TableCell>
+              <TableCell className="type">Namespace</TableCell>
             </TableHead>
             {
               subjects.map((subject, i) => {
@@ -120,8 +117,8 @@ export class RoleBindingDetails extends React.Component<Props> {
         <AddRemoveButtons
           onAdd={() => AddRoleBindingDialog.open(roleBinding)}
           onRemove={selectedSubjects.length ? this.removeSelectedSubjects : null}
-          addTooltip={<Trans>Add bindings to {name}</Trans>}
-          removeTooltip={<Trans>Remove selected bindings from ${name}</Trans>}
+          addTooltip="Add bindings to {name}"
+          removeTooltip="Remove selected bindings from ${name}"
         />
       </div>
     );

src/renderer/components/+user-management-roles-bindings/role-bindings.tsx

@@ -2,7 +2,6 @@ import "./role-bindings.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { IRoleBindingsRouteParams } from "../+user-management/user-management.route";
 import { RoleBinding } from "../../api/endpoints";
@@ -38,13 +37,13 @@ export class RoleBindings extends React.Component<Props> {
           (binding: RoleBinding) => binding.getSearchFields(),
           (binding: RoleBinding) => binding.getSubjectNames(),
         ]}
-        renderHeaderTitle={<Trans>Role Bindings</Trans>}
+        renderHeaderTitle="Role Bindings"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Bindings</Trans>, className: "bindings", sortBy: sortBy.bindings },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Bindings", className: "bindings", sortBy: sortBy.bindings },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(binding: RoleBinding) => [
           binding.getName(),
@@ -55,7 +54,7 @@ export class RoleBindings extends React.Component<Props> {
         ]}
         addRemoveButtons={{
           onAdd: () => AddRoleBindingDialog.open(),
-          addTooltip: <Trans>Create new RoleBinding</Trans>,
+          addTooltip: "Create new RoleBinding",
         }}
       />
     );

src/renderer/components/+user-management-roles/add-role-dialog.tsx

@@ -3,8 +3,6 @@ import "./add-role-dialog.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Notifications } from "../notifications";
@@ -51,7 +49,7 @@ export class AddRoleDialog extends React.Component<Props> {
 
   render() {
     const { ...dialogProps } = this.props;
-    const header = <h5><Trans>Create Role</Trans></h5>;
+    const header = <h5>Create Role</h5>;
 
     return (
       <Dialog
@@ -63,12 +61,12 @@ export class AddRoleDialog extends React.Component<Props> {
         <Wizard header={header} done={this.close}>
           <WizardStep
             contentClass="flex gaps column"
-            nextLabel={<Trans>Create</Trans>}
+            nextLabel="Create"
             next={this.createRole}
           >
             <Input
               required autoFocus
-              placeholder={_i18n._(t`Role name`)}
+              placeholder={`Role name`}
               iconLeft="supervisor_account"
               value={this.roleName}
               onChange={v => this.roleName = v}

src/renderer/components/+user-management-roles/role-details.tsx

@@ -1,7 +1,6 @@
 import "./role-details.scss";
 
 import React from "react";
-import { Trans } from "@lingui/macro";
 import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
@@ -25,25 +24,25 @@ export class RoleDetails extends React.Component<Props> {
       <div className="RoleDetails">
         <KubeObjectMeta object={role}/>
 
-        <DrawerTitle title={<Trans>Rules</Trans>}/>
+        <DrawerTitle title="Rules"/>
         {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
           return (
             <div className="rule" key={index}>
               {resources && (
                 <>
-                  <div className="name"><Trans>Resources</Trans></div>
+                  <div className="name">Resources</div>
                   <div className="value">{resources.join(", ")}</div>
                 </>
               )}
               {verbs && (
                 <>
-                  <div className="name"><Trans>Verbs</Trans></div>
+                  <div className="name">Verbs</div>
                   <div className="value">{verbs.join(", ")}</div>
                 </>
               )}
               {apiGroups && (
                 <>
-                  <div className="name"><Trans>Api Groups</Trans></div>
+                  <div className="name">Api Groups</div>
                   <div className="value">
                     {apiGroups
                       .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
@@ -54,7 +53,7 @@ export class RoleDetails extends React.Component<Props> {
               )}
               {resourceNames && (
                 <>
-                  <div className="name"><Trans>Resource Names</Trans></div>
+                  <div className="name">Resource Names</div>
                   <div className="value">{resourceNames.join(", ")}</div>
                 </>
               )}

src/renderer/components/+user-management-roles/roles.tsx

@@ -2,7 +2,6 @@ import "./roles.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { IRolesRouteParams } from "../+user-management/user-management.route";
 import { rolesStore } from "./roles.store";
@@ -36,12 +35,12 @@ export class Roles extends React.Component<Props> {
           searchFilters={[
             (role: Role) => role.getSearchFields(),
           ]}
-          renderHeaderTitle={<Trans>Roles</Trans>}
+          renderHeaderTitle="Roles"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Age", className: "age", sortBy: sortBy.age },
           ]}
           renderTableContents={(role: Role) => [
             role.getName(),
@@ -51,7 +50,7 @@ export class Roles extends React.Component<Props> {
           ]}
           addRemoveButtons={{
             onAdd: () => AddRoleDialog.open(),
-            addTooltip: <Trans>Create new Role</Trans>,
+            addTooltip: "Create new Role",
           }}
         />
         <AddRoleDialog/>

src/renderer/components/+user-management-service-accounts/create-service-account-dialog.tsx

@@ -3,8 +3,6 @@ import "./create-service-account-dialog.scss";
 import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
-import { _i18n } from "../../i18n";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { SubTitle } from "../layout/sub-title";
@@ -54,7 +52,7 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
   render() {
     const { ...dialogProps } = this.props;
     const { name, namespace } = this;
-    const header = <h5><Trans>Create Service Account</Trans></h5>;
+    const header = <h5>Create Service Account</h5>;
 
     return (
       <Dialog
@@ -64,15 +62,15 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
         close={this.close}
       >
         <Wizard header={header} done={this.close}>
-          <WizardStep nextLabel={<Trans>Create</Trans>} next={this.createAccount}>
-            <SubTitle title={<Trans>Account Name</Trans>} />
+          <WizardStep nextLabel="Create" next={this.createAccount}>
+            <SubTitle title="Account Name" />
             <Input
               autoFocus required
-              placeholder={_i18n._(t`Enter a name`)}
+              placeholder={`Enter a name`}
               validators={systemName}
               value={name} onChange={v => this.name = v.toLowerCase()}
             />
-            <SubTitle title={<Trans>Namespace</Trans>} />
+            <SubTitle title="Namespace" />
             <NamespaceSelect
               themeName="light"
               value={namespace}
@@ -83,4 +81,4 @@ export class CreateServiceAccountDialog extends React.Component<Props> {
       </Dialog>
     );
   }
-}
+}

src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx

@@ -2,7 +2,6 @@ import "./service-accounts-details.scss";
 
 import React from "react";
 import { autorun, observable } from "mobx";
-import { Trans } from "@lingui/macro";
 import { Spinner } from "../spinner";
 import { ServiceAccountsSecret } from "./service-accounts-secret";
 import { DrawerItem, DrawerTitle } from "../drawer";
@@ -76,7 +75,7 @@ export class ServiceAccountsDetails extends React.Component<Props> {
             {secret.getName()}
             <Icon
               small material="warning"
-              tooltip={<Trans>Secret is not found</Trans>}
+              tooltip="Secret is not found"
             />
           </div>
         );
@@ -120,17 +119,17 @@ export class ServiceAccountsDetails extends React.Component<Props> {
         <KubeObjectMeta object={serviceAccount}/>
 
         {tokens.length > 0 &&
-        <DrawerItem name={<Trans>Tokens</Trans>} className="links">
+        <DrawerItem name="Tokens" className="links">
           {this.renderSecretLinks(tokens)}
         </DrawerItem>
         }
         {imagePullSecrets.length > 0 &&
-        <DrawerItem name={<Trans>ImagePullSecrets</Trans>} className="links">
+        <DrawerItem name="ImagePullSecrets" className="links">
           {this.renderImagePullSecrets()}
         </DrawerItem>
         }
 
-        <DrawerTitle title={<Trans>Mountable secrets</Trans>}/>
+        <DrawerTitle title="Mountable secrets"/>
         <div className="secrets">
           {this.renderSecrets()}
         </div>

src/renderer/components/+user-management-service-accounts/service-accounts-secret.tsx

@@ -2,7 +2,6 @@ import "./service-accounts-secret.scss";
 
 import React from "react";
 import moment from "moment";
-import { Trans } from "@lingui/macro";
 import { Icon } from "../icon";
 import { Secret } from "../../api/endpoints/secret.api";
 import { prevDefault } from "../../utils";
@@ -31,7 +30,7 @@ export class ServiceAccountsSecret extends React.Component<Props, State> {
             <span className="asterisks">{Array(16).fill("•").join("")}</span>
             <Icon
               small material="lock_open"
-              tooltip={<Trans>Show value</Trans>}
+              tooltip="Show value"
               onClick={prevDefault(() => this.setState({ showToken: true }))}
             />
           </>
@@ -49,24 +48,24 @@ export class ServiceAccountsSecret extends React.Component<Props, State> {
     return (
       <div className="ServiceAccountsSecret box grow-fixed">
         <div className="secret-row">
-          <span className="name"><Trans>Name</Trans>: </span>
+          <span className="name">Name: </span>
           <span className="value">{name}</span>
         </div>
         <div className="secret-row">
-          <span className="name"><Trans>Value</Trans>: </span>
+          <span className="name">Value: </span>
           <span className="value flex align-center">{this.renderSecretValue()}</span>
         </div>
         <div className="secret-row">
-          <span className="name"><Trans>Created at</Trans>: </span>
+          <span className="name">Created at: </span>
           <span className="value" title={creationTimestamp}>
             {moment(creationTimestamp).format("LLL")}
           </span>
         </div>
         <div className="secret-row">
-          <span className="name"><Trans>Type</Trans>: </span>
+          <span className="name">Type: </span>
           <span className="value">{type}</span>
         </div>
       </div>
     );
   }
-}
+}

src/renderer/components/+user-management-service-accounts/service-accounts.tsx

@@ -2,7 +2,6 @@ import "./service-accounts.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { ServiceAccount } from "../../api/endpoints/service-accounts.api";
 import { RouteComponentProps } from "react-router";
 import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
@@ -40,12 +39,12 @@ export class ServiceAccounts extends React.Component<Props> {
           searchFilters={[
             (account: ServiceAccount) => account.getSearchFields(),
           ]}
-          renderHeaderTitle={<Trans>Service Accounts</Trans>}
+          renderHeaderTitle="Service Accounts"
           renderTableHeader={[
-            { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+            { title: "Name", className: "name", sortBy: sortBy.name },
             { className: "warning" },
-            { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-            { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+            { title: "Age", className: "age", sortBy: sortBy.age },
           ]}
           renderTableContents={(account: ServiceAccount) => [
             account.getName(),
@@ -58,7 +57,7 @@ export class ServiceAccounts extends React.Component<Props> {
           }}
           addRemoveButtons={{
             onAdd: () => CreateServiceAccountDialog.open(),
-            addTooltip: <Trans>Create new Service Account</Trans>,
+            addTooltip: "Create new Service Account",
           }}
         />
         <CreateServiceAccountDialog/>
@@ -73,7 +72,7 @@ function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
   return (
     <MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
       <Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar}/>
-      <span className="title"><Trans>Kubeconfig</Trans></span>
+      <span className="title">Kubeconfig</span>
     </MenuItem>
   );
 }

src/renderer/components/+user-management/user-management.tsx

@@ -1,7 +1,6 @@
 import "./user-management.scss";
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
 import { Roles } from "../+user-management-roles";
 import { RoleBindings } from "../+user-management-roles-bindings";
@@ -19,19 +18,19 @@ export class UserManagement extends React.Component {
 
     tabRoutes.push(
       {
-        title: <Trans>Service Accounts</Trans>,
+        title: "Service Accounts",
         component: ServiceAccounts,
         url: serviceAccountsURL({ query }),
         routePath: serviceAccountsRoute.path.toString(),
       },
       {
-        title: <Trans>Role Bindings</Trans>,
+        title: "Role Bindings",
         component: RoleBindings,
         url: roleBindingsURL({ query }),
         routePath: roleBindingsRoute.path.toString(),
       },
       {
-        title: <Trans>Roles</Trans>,
+        title: "Roles",
         component: Roles,
         url: rolesURL({ query }),
         routePath: rolesRoute.path.toString(),
@@ -40,7 +39,7 @@ export class UserManagement extends React.Component {
 
     if (isAllowedResource("podsecuritypolicies")) {
       tabRoutes.push({
-        title: <Trans>Pod Security Policies</Trans>,
+        title: "Pod Security Policies",
         component: PodSecurityPolicies,
         url: podSecurityPoliciesURL(),
         routePath: podSecurityPoliciesRoute.path.toString(),

src/renderer/components/+whats-new/whats-new.tsx

@@ -6,7 +6,6 @@ import { observer } from "mobx-react";
 import { userStore } from "../../../common/user-store";
 import { navigate } from "../../navigation";
 import { Button } from "../button";
-import { Trans } from "@lingui/macro";
 import marked from "marked";
 
 @observer
@@ -34,7 +33,7 @@ export class WhatsNew extends React.Component {
         <div className="bottom">
           <Button
             primary autoFocus
-            label={<Trans>Ok, got it!</Trans>}
+            label="Ok, got it!"
             onClick={this.ok}
           />
         </div>

src/renderer/components/+workloads-cronjobs/cronjob-details.tsx

@@ -3,7 +3,6 @@ import "./cronjob-details.scss";
 import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge/badge";
 import { jobStore } from "../+workloads-jobs/job.store";
@@ -35,25 +34,25 @@ export class CronJobDetails extends React.Component<Props> {
     return (
       <div className="CronJobDetails">
         <KubeObjectMeta object={cronJob}/>
-        <DrawerItem name={<Trans>Schedule</Trans>}>
+        <DrawerItem name="Schedule">
           {cronJob.isNeverRun() ? (
             <>
-              <Trans>never</Trans> ({cronJob.getSchedule()})
+              never ({cronJob.getSchedule()})
             </>
           ) : cronJob.getSchedule()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Active</Trans>}>
+        <DrawerItem name="Active">
           {cronJobStore.getActiveJobsNum(cronJob)}
         </DrawerItem>
-        <DrawerItem name={<Trans>Suspend</Trans>}>
+        <DrawerItem name="Suspend">
           {cronJob.getSuspendFlag()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Last schedule</Trans>}>
+        <DrawerItem name="Last schedule">
           {cronJob.getLastScheduleTime()}
         </DrawerItem>
         {childJobs.length > 0 &&
           <>
-            <DrawerTitle title={<Trans>Jobs</Trans>}/>
+            <DrawerTitle title="Jobs"/>
             {childJobs.map((job: Job) => {
               const selectors = job.getSelectors();
               const condition = job.getCondition();
@@ -65,7 +64,7 @@ export class CronJobDetails extends React.Component<Props> {
                       {job.getName()}
                     </Link>
                   </div>
-                  <DrawerItem name={<Trans>Condition</Trans>} className="conditions" labelsOnly>
+                  <DrawerItem name="Condition" className="conditions" labelsOnly>
                     {condition && (
                       <Badge
                         label={condition.type}
@@ -73,7 +72,7 @@ export class CronJobDetails extends React.Component<Props> {
                       />
                     )}
                   </DrawerItem>
-                  <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+                  <DrawerItem name="Selector" labelsOnly>
                     {
                       selectors.map(label => <Badge key={label} label={label}/>)
                     }

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx

@@ -3,7 +3,6 @@ import "./cronjob-trigger-dialog.scss";
 import React, { Component } from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { CronJob, cronJobApi, jobApi } from "../../api/endpoints";
@@ -80,7 +79,7 @@ export class CronJobTriggerDialog extends Component<Props> {
     return (
       <>
         <div className="flex gaps">
-          <Trans>Job name</Trans>:
+          Job name:
         </div>
         <div className="flex gaps">
           <Input
@@ -101,7 +100,7 @@ export class CronJobTriggerDialog extends Component<Props> {
     const cronjobName = this.cronjob ? this.cronjob.getName() : "";
     const header = (
       <h5>
-        <Trans>Trigger CronJob <span>{cronjobName}</span></Trans>
+        Trigger CronJob <span>{cronjobName}</span>
       </h5>
     );
 
@@ -118,7 +117,7 @@ export class CronJobTriggerDialog extends Component<Props> {
           <WizardStep
             contentClass="flex gaps column"
             next={this.trigger}
-            nextLabel={<Trans>Trigger</Trans>}
+            nextLabel="Trigger"
             disabledNext={!this.ready}
           >
             {this.renderContents()}
@@ -127,4 +126,4 @@ export class CronJobTriggerDialog extends Component<Props> {
       </Dialog>
     );
   }
-}
+}

src/renderer/components/+workloads-cronjobs/cronjobs.tsx

@@ -3,7 +3,6 @@ import "./cronjobs.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { t, Trans } from "@lingui/macro";
 import { CronJob } from "../../api/endpoints/cron-job.api";
 import { MenuItem } from "../menu";
 import { Icon } from "../icon";
@@ -13,7 +12,6 @@ import { eventStore } from "../+events/event.store";
 import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { ICronJobsRouteParams } from "../+workloads";
 import { KubeObjectListLayout } from "../kube-object";
-import { _i18n } from "../../i18n";
 import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
@@ -49,22 +47,22 @@ export class CronJobs extends React.Component<Props> {
           (cronJob: CronJob) => cronJob.getSearchFields(),
           (cronJob: CronJob) => cronJob.getSchedule(),
         ]}
-        renderHeaderTitle={<Trans>Cron Jobs</Trans>}
+        renderHeaderTitle="Cron Jobs"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Schedule</Trans>, className: "schedule" },
-          { title: <Trans>Suspend</Trans>, className: "suspend", sortBy: sortBy.suspend },
-          { title: <Trans>Active</Trans>, className: "active", sortBy: sortBy.active },
-          { title: <Trans>Last schedule</Trans>, className: "last-schedule", sortBy: sortBy.lastSchedule },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Schedule", className: "schedule" },
+          { title: "Suspend", className: "suspend", sortBy: sortBy.suspend },
+          { title: "Active", className: "active", sortBy: sortBy.active },
+          { title: "Last schedule", className: "last-schedule", sortBy: sortBy.lastSchedule },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(cronJob: CronJob) => [
           cronJob.getName(),
           <KubeObjectStatusIcon key="icon" object={cronJob} />,
           cronJob.getNs(),
-          cronJob.isNeverRun() ? <Trans>never</Trans> : cronJob.getSchedule(),
+          cronJob.isNeverRun() ? "never"  : cronJob.getSchedule(),
           cronJob.getSuspendFlag(),
           cronJobStore.getActiveJobsNum(cronJob),
           cronJob.getLastScheduleTime(),
@@ -83,8 +81,8 @@ export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
 
   return (
     <MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
-      <Icon material="play_circle_filled" title={_i18n._(t`Trigger`)} interactive={toolbar}/>
-      <span className="title"><Trans>Trigger</Trans></span>
+      <Icon material="play_circle_filled" title={`Trigger`} interactive={toolbar}/>
+      <span className="title">Trigger</span>
     </MenuItem>
   );
 }

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -2,7 +2,6 @@ import "./daemonset-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
@@ -63,32 +62,32 @@ export class DaemonSetDetails extends React.Component<Props> {
         )}
         <KubeObjectMeta object={daemonSet}/>
         {selectors.length > 0 &&
-        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+        <DrawerItem name="Selector" labelsOnly>
           {
             selectors.map(label => <Badge key={label} label={label}/>)
           }
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
-        <DrawerItem name={<Trans>Node Selector</Trans>} labelsOnly>
+        <DrawerItem name="Node Selector" labelsOnly>
           {
             nodeSelector.map(label => (<Badge key={label} label={label}/>))
           }
         </DrawerItem>
         }
         {images.length > 0 &&
-        <DrawerItem name={<Trans>Images</Trans>}>
+        <DrawerItem name="Images">
           {
             images.map(image => <p key={image}>{image}</p>)
           }
         </DrawerItem>
         }
-        <DrawerItem name={<Trans>Strategy Type</Trans>}>
+        <DrawerItem name="Strategy Type">
           {spec.updateStrategy.type}
         </DrawerItem>
         <PodDetailsTolerations workload={daemonSet}/>
         <PodDetailsAffinities workload={daemonSet}/>
-        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+        <DrawerItem name="Pod Status" className="pod-status">
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
         <ResourceMetricsText metrics={metrics}/>

src/renderer/components/+workloads-daemonsets/daemonsets.tsx

@@ -10,7 +10,6 @@ import { podsStore } from "../+workloads-pods/pods.store";
 import { nodesStore } from "../+nodes/nodes.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { IDaemonSetsRouteParams } from "../+workloads";
-import { Trans } from "@lingui/macro";
 import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
@@ -51,14 +50,14 @@ export class DaemonSets extends React.Component<Props> {
           (daemonSet: DaemonSet) => daemonSet.getSearchFields(),
           (daemonSet: DaemonSet) => daemonSet.getLabels(),
         ]}
-        renderHeaderTitle={<Trans>Daemon Sets</Trans>}
+        renderHeaderTitle="Daemon Sets"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Pods</Trans>, className: "pods", sortBy: sortBy.pods },
+          { title: "Name", className: "name", sortBy: sortBy.name },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Pods", className: "pods", sortBy: sortBy.pods },
           { className: "warning" },
-          { title: <Trans>Node Selector</Trans>, className: "labels" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: "Node Selector", className: "labels" },
+          { title: "Age", className: "age", sortBy: sortBy.age },
         ]}
         renderTableContents={(daemonSet: DaemonSet) => [
           daemonSet.getName(),

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -3,7 +3,6 @@ import "./deployment-details.scss";
 import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { Deployment } from "../../api/endpoints";
@@ -13,7 +12,6 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { _i18n } from "../../i18n";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { deploymentStore } from "./deployments.store";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
@@ -63,20 +61,20 @@ export class DeploymentDetails extends React.Component<Props> {
           </ResourceMetrics>
         )}
         <KubeObjectMeta object={deployment}/>
-        <DrawerItem name={<Trans>Replicas</Trans>}>
-          {_i18n._(t`${spec.replicas} desired, ${status.updatedReplicas || 0} updated`)},{" "}
-          {_i18n._(t`${status.replicas || 0} total, ${status.availableReplicas || 0} available`)},{" "}
-          {_i18n._(t`${status.unavailableReplicas || 0} unavailable`)}
+        <DrawerItem name="Replicas">
+          {`${spec.replicas} desired, ${status.updatedReplicas || 0} updated`},{" "}
+          {`${status.replicas || 0} total, ${status.availableReplicas || 0} available`},{" "}
+          {`${status.unavailableReplicas || 0} unavailable`}
         </DrawerItem>
         {selectors.length > 0 &&
-        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+        <DrawerItem name="Selector" labelsOnly>
           {
             selectors.map(label => <Badge key={label} label={label}/>)
           }
         </DrawerItem>
         }
         {nodeSelector.length > 0 &&
-        <DrawerItem name={<Trans>Node Selector</Trans>}>
+        <DrawerItem name="Node Selector">
           {
             nodeSelector.map(label => (
               <Badge key={label} label={label}/>
@@ -84,10 +82,10 @@ export class DeploymentDetails extends React.Component<Props> {
           }
         </DrawerItem>
         }
-        <DrawerItem name={<Trans>Strategy Type</Trans>}>
+        <DrawerItem name="Strategy Type">
           {spec.strategy.type}
         </DrawerItem>
-        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+        <DrawerItem name="Conditions" className="conditions" labelsOnly>
           {
             deployment.getConditions().map(condition => {
               const { type, message, lastTransitionTime, status } = condition;
@@ -100,7 +98,7 @@ export class DeploymentDetails extends React.Component<Props> {
                   tooltip={(
                     <>
                       <p>{message}</p>
-                      <p><Trans>Last transition time: {lastTransitionTime}</Trans></p>
+                      <p>Last transition time: {lastTransitionTime}</p>
                     </>
                   )}
                 />

src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx

@@ -3,7 +3,6 @@ import "./deployment-scale-dialog.scss";
 import React, { Component } from "react";
 import { computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
 import { Deployment, deploymentApi } from "../../api/endpoints";
@@ -89,7 +88,7 @@ export class DeploymentScaleDialog extends Component<Props> {
   desiredReplicasUp = () => {
     this.desiredReplicas < this.scaleMax && this.desiredReplicas++;
   };
-  
+
   desiredReplicasDown = () => {
     this.desiredReplicas > 0 && this.desiredReplicas--;
   };
@@ -101,11 +100,11 @@ export class DeploymentScaleDialog extends Component<Props> {
     return (
       <>
         <div className="current-scale" data-testid="current-scale">
-          <Trans>Current replica scale: {currentReplicas}</Trans>
+          Current replica scale: {currentReplicas}
         </div>
         <div className="flex gaps align-center">
           <div className="desired-scale" data-testid="desired-scale">
-            <Trans>Desired number of replicas</Trans>: {desiredReplicas}
+            Desired number of replicas: {desiredReplicas}
           </div>
           <div className="slider-container flex align-center">
             <Slider value={desiredReplicas} max={scaleMax} onChange={onChange as any /** see: https://github.com/mui-org/material-ui/issues/20191 */}/>
@@ -126,7 +125,7 @@ export class DeploymentScaleDialog extends Component<Props> {
         {warning &&
         <div className="warning" data-testid="warning">
           <Icon material="warning"/>
-          <Trans>High number of replicas may cause cluster performance issues</Trans>
+          High number of replicas may cause cluster performance issues
         </div>
         }
       </>
@@ -138,7 +137,7 @@ export class DeploymentScaleDialog extends Component<Props> {
     const deploymentName = this.deployment ? this.deployment.getName() : "";
     const header = (
       <h5>
-        <Trans>Scale Deployment <span>{deploymentName}</span></Trans>
+        Scale Deployment <span>{deploymentName}</span>
       </h5>
     );
 
@@ -155,7 +154,7 @@ export class DeploymentScaleDialog extends Component<Props> {
           <WizardStep
             contentClass="flex gaps column"
             next={this.scale}
-            nextLabel={<Trans>Scale</Trans>}
+            nextLabel="Scale"
             disabledNext={!this.ready}
           >
             {this.renderContents()}

src/renderer/components/+workloads-deployments/deployments.tsx

@@ -3,7 +3,6 @@ import "./deployments.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { t, Trans } from "@lingui/macro";
 import { Deployment, deploymentApi } from "../../api/endpoints";
 import { KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { MenuItem } from "../menu";
@@ -17,7 +16,6 @@ import { nodesStore } from "../+nodes/nodes.store";
 import { eventStore } from "../+events/event.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { IDeploymentsRouteParams } from "../+workloads";
-import { _i18n } from "../../i18n";
 import { cssNames } from "../../utils";
 import kebabCase from "lodash/kebabCase";
 import orderBy from "lodash/orderBy";
@@ -70,15 +68,15 @@ export class Deployments extends React.Component<Props> {
           (deployment: Deployment) => deployment.getSearchFields(),
           (deployment: Deployment) => deployment.getConditionsText(),
         ]}
-        renderHeaderTitle={<Trans>Deployments</Trans>}
+        renderHeaderTitle="Deployments"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: "Name", className: "name", sortBy: sortBy.name },
           { className: "warning" },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Pods</Trans>, className: "pods" },
-          { title: <Trans>Replicas</Trans>, className: "replicas", sortBy: sortBy.replicas },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Conditions</Trans>, className: "conditions", sortBy: sortBy.condition },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Pods", className: "pods" },
+          { title: "Replicas", className: "replicas", sortBy: sortBy.replicas },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Conditions", className: "conditions", sortBy: sortBy.condition },
         ]}
         renderTableContents={(deployment: Deployment) => [
           deployment.getName(),
@@ -103,8 +101,8 @@ export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
   return (
     <>
       <MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
-        <Icon material="open_with" title={_i18n._(t`Scale`)} interactive={toolbar}/>
-        <span className="title"><Trans>Scale</Trans></span>
+        <Icon material="open_with" title={`Scale`} interactive={toolbar}/>
+        <span className="title">Scale</span>
       </MenuItem>
       <MenuItem onClick={() => ConfirmDialog.open({
         ok: async () =>
@@ -118,15 +116,15 @@ export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
             Notifications.error(err);
           }
         },
-        labelOk: _i18n._(t`Restart`),
+        labelOk: `Restart`,
         message: (
           <p>
-            <Trans>Are you sure you want to restart deployment <b>{object.getName()}</b>?</Trans>
+            Are you sure you want to restart deployment <b>{object.getName()}</b>?
           </p>
         ),
       })}>
-        <Icon material="autorenew" title={_i18n._(t`Restart`)} interactive={toolbar}/>
-        <span className="title"><Trans>Restart</Trans></span>
+        <Icon material="autorenew" title={`Restart`} interactive={toolbar}/>
+        <span className="title">Restart</span>
       </MenuItem>
     </>
   );

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -3,7 +3,6 @@ import "./job-details.scss";
 import React from "react";
 import kebabCase from "lodash/kebabCase";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
@@ -45,13 +44,13 @@ export class JobDetails extends React.Component<Props> {
     return (
       <div className="JobDetails">
         <KubeObjectMeta object={job}/>
-        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+        <DrawerItem name="Selector" labelsOnly>
           {
             Object.keys(selectors).map(label => <Badge key={label} label={label}/>)
           }
         </DrawerItem>
         {nodeSelector.length > 0 &&
-        <DrawerItem name={<Trans>Node Selector</Trans>} labelsOnly>
+        <DrawerItem name="Node Selector" labelsOnly>
           {
             nodeSelector.map(label => (
               <Badge key={label} label={label}/>
@@ -60,14 +59,14 @@ export class JobDetails extends React.Component<Props> {
         </DrawerItem>
         }
         {images.length > 0 &&
-        <DrawerItem name={<Trans>Images</Trans>}>
+        <DrawerItem name="Images">
           {
             images.map(image => <p key={image}>{image}</p>)
           }
         </DrawerItem>
         }
         {ownerRefs.length > 0 &&
-        <DrawerItem name={<Trans>Controlled by</Trans>}>
+        <DrawerItem name="Controlled by">
           {
             ownerRefs.map(ref => {
               const { name, kind } = ref;
@@ -82,7 +81,7 @@ export class JobDetails extends React.Component<Props> {
           }
         </DrawerItem>
         }
-        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+        <DrawerItem name="Conditions" className="conditions" labelsOnly>
           {condition && (
             <Badge
               className={kebabCase(condition.type)}
@@ -91,15 +90,15 @@ export class JobDetails extends React.Component<Props> {
             />
           )}
         </DrawerItem>
-        <DrawerItem name={<Trans>Completions</Trans>}>
+        <DrawerItem name="Completions">
           {job.getDesiredCompletions()}
         </DrawerItem>
-        <DrawerItem name={<Trans>Parallelism</Trans>}>
+        <DrawerItem name="Parallelism">
           {job.getParallelism()}
         </DrawerItem>
         <PodDetailsTolerations workload={job}/>
         <PodDetailsAffinities workload={job}/>
-        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+        <DrawerItem name="Pod Status" className="pod-status">
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
         <PodDetailsList pods={childPods} owner={job}/>

src/renderer/components/+workloads-jobs/jobs.tsx

@@ -3,7 +3,6 @@ import "./jobs.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { Trans } from "@lingui/macro";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import { eventStore } from "../+events/event.store";
@@ -39,14 +38,14 @@ export class Jobs extends React.Component<Props> {
         searchFilters={[
           (job: Job) => job.getSearchFields(),
         ]}
-        renderHeaderTitle={<Trans>Jobs</Trans>}
+        renderHeaderTitle="Jobs"
         renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Completions</Trans>, className: "completions" },
+          { title: "Name", className: "name", sortBy: sortBy.name },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Completions", className: "completions" },
           { className: "warning" },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Conditions</Trans>, className: "conditions", sortBy: sortBy.conditions },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Conditions", className: "conditions", sortBy: sortBy.conditions },
         ]}
         renderTableContents={(job: Job) => {
           const condition = job.getCondition();

src/renderer/components/+workloads-overview/overview-statuses.tsx

@@ -2,7 +2,6 @@ import "./overview-statuses.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
 import { workloadURL, workloadStores } from "../+workloads";
@@ -48,7 +47,7 @@ export class OverviewStatuses extends React.Component {
     return (
       <div className="OverviewStatuses">
         <div className="header flex gaps align-center">
-          <h5 className="box grow"><Trans>Overview</Trans></h5>
+          <h5 className="box grow">Overview</h5>
           <NamespaceSelectFilter />
         </div>
         <PageFiltersList />

src/renderer/components/+workloads-pods/container-charts.tsx

@@ -1,12 +1,10 @@
 import React, { useContext } from "react";
-import { t } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { IPodMetrics } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 import { themeStore } from "../../theme.store";
 
 type IContext = IResourceMetricsValue<any, { metrics: IPodMetrics }>;
@@ -36,22 +34,22 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "cpuUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`CPU cores usage`),
+        label: `Usage`,
+        tooltip: `CPU cores usage`,
         borderColor: "#3D90CE",
         data: cpuUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: "cpuRequests",
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`CPU requests`),
+        label: `Requests`,
+        tooltip: `CPU requests`,
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: "cpuLimits",
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`CPU limits`),
+        label: `Limits`,
+        tooltip: `CPU limits`,
         borderColor: chartCapacityColor,
         data: cpuLimits.map(([x, y]) => ({ x, y }))
       }
@@ -60,22 +58,22 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "memoryUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Memory usage`),
+        label: `Usage`,
+        tooltip: `Memory usage`,
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: "memoryRequests",
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Memory requests`),
+        label: `Requests`,
+        tooltip: `Memory requests`,
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: "memoryLimits",
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`Memory limits`),
+        label: `Limits`,
+        tooltip: `Memory limits`,
         borderColor: chartCapacityColor,
         data: memoryLimits.map(([x, y]) => ({ x, y }))
       }
@@ -84,8 +82,8 @@ export const ContainerCharts = observer(() => {
     [
       {
         id: "fsUsage",
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Bytes consumed on this filesystem`),
+        label: `Usage`,
+        tooltip: `Bytes consumed on this filesystem`,
         borderColor: "#ffc63d",
         data: fsUsage.map(([x, y]) => ({ x, y }))
       }
@@ -101,4 +99,4 @@ export const ContainerCharts = observer(() => {
       data={{ datasets: datasets[tabId] }}
     />
   );
-});
+});

src/renderer/components/+workloads-pods/pod-charts.tsx

@@ -1,20 +1,18 @@
 import React, { useContext } from "react";
-import { t, Trans } from "@lingui/macro";
 import { observer } from "mobx-react";
 import { IPodMetrics } from "../../api/endpoints";
 import { BarChart, cpuOptions, memoryOptions } from "../chart";
 import { isMetricsEmpty, normalizeMetrics } from "../../api/endpoints/metrics.api";
 import { NoMetrics } from "../resource-metrics/no-metrics";
 import { IResourceMetricsValue, ResourceMetricsContext } from "../resource-metrics";
-import { _i18n } from "../../i18n";
 import { WorkloadKubeObject } from "../../api/workload-kube-object";
 import { themeStore } from "../../theme.store";
 
 export const podMetricTabs = [
-  <Trans key="cpu">CPU</Trans>,
-  <Trans key="memory">Memory</Trans>,
-  <Trans key="network">Network</Trans>,
-  <Trans key="filesystem">Filesystem</Trans>,
+  "CPU",
+  "Memory",
+  "Network",
+  "Filesystem",
 ];
 
 type IContext = IResourceMetricsValue<WorkloadKubeObject, { metrics: IPodMetrics }>;
@@ -48,22 +46,22 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-cpuUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Container CPU cores usage`),
+        label: `Usage`,
+        tooltip: `Container CPU cores usage`,
         borderColor: "#3D90CE",
         data: cpuUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuRequests`,
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Container CPU requests`),
+        label: `Requests`,
+        tooltip: `Container CPU requests`,
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-cpuLimits`,
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`CPU limits`),
+        label: `Limits`,
+        tooltip: `CPU limits`,
         borderColor: chartCapacityColor,
         data: cpuLimits.map(([x, y]) => ({ x, y }))
       }
@@ -72,22 +70,22 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-memoryUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Container memory usage`),
+        label: `Usage`,
+        tooltip: `Container memory usage`,
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-memoryRequests`,
-        label: _i18n._(t`Requests`),
-        tooltip: _i18n._(t`Container memory requests`),
+        label: `Requests`,
+        tooltip: `Container memory requests`,
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-memoryLimits`,
-        label: _i18n._(t`Limits`),
-        tooltip: _i18n._(t`Container memory limits`),
+        label: `Limits`,
+        tooltip: `Container memory limits`,
         borderColor: chartCapacityColor,
         data: memoryLimits.map(([x, y]) => ({ x, y }))
       }
@@ -96,15 +94,15 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-networkReceive`,
-        label: _i18n._(t`Receive`),
-        tooltip: _i18n._(t`Bytes received by all containers`),
+        label: `Receive`,
+        tooltip: `Bytes received by all containers`,
         borderColor: "#64c5d6",
         data: networkReceive.map(([x, y]) => ({ x, y }))
       },
       {
         id: `${id}-networkTransmit`,
-        label: _i18n._(t`Transmit`),
-        tooltip: _i18n._(t`Bytes transmitted from all containers`),
+        label: `Transmit`,
+        tooltip: `Bytes transmitted from all containers`,
         borderColor: "#46cd9e",
         data: networkTransmit.map(([x, y]) => ({ x, y }))
       }
@@ -113,8 +111,8 @@ export const PodCharts = observer(() => {
     [
       {
         id: `${id}-fsUsage`,
-        label: _i18n._(t`Usage`),
-        tooltip: _i18n._(t`Bytes consumed on this filesystem`),
+        label: `Usage`,
+        tooltip: `Bytes consumed on this filesystem`,
         borderColor: "#ffc63d",
         data: fsUsage.map(([x, y]) => ({ x, y }))
       }

src/renderer/components/+workloads-pods/pod-container-env.tsx

@@ -2,7 +2,6 @@ import "./pod-container-env.scss";
 
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
 import { IPodContainer, Secret } from "../../api/endpoints";
 import { DrawerItem } from "../drawer";
 import { autorun } from "mobx";
@@ -106,7 +105,7 @@ export const ContainerEnvironment = observer((props: Props) => {
   };
 
   return (
-    <DrawerItem name={<Trans>Environment</Trans>} className="ContainerEnvironment">
+    <DrawerItem name="Environment" className="ContainerEnvironment">
       {env && renderEnv()}
       {envFrom && renderEnvFrom()}
     </DrawerItem>
@@ -145,7 +144,7 @@ const SecretKey = (props: SecretKeyProps) => {
       <Icon
         className={cssNames("secret-button", { loading })}
         material="visibility"
-        tooltip={<Trans>Show</Trans>}
+        tooltip="Show"
         onClick={showKey}
       />
     </>

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -2,9 +2,7 @@ import "./pod-container-port.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t } from "@lingui/macro";
 import { Pod } from "../../api/endpoints";
-import { _i18n } from "../../i18n";
 import { apiBase } from "../../api";
 import { observable } from "mobx";
 import { cssNames } from "../../utils";
@@ -45,7 +43,7 @@ export class PodContainerPort extends React.Component<Props> {
 
     return (
       <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
-        <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
+        <span title={`Open in a browser`} onClick={() => this.portForward() }>
           {text}
           {this.waiting && (
             <Spinner />

src/renderer/components/+workloads-pods/pod-details-affinities.tsx

@@ -1,7 +1,6 @@
 import "./pod-details-affinities.scss";
 import React from "react";
 import jsYaml from "js-yaml";
-import { Trans } from "@lingui/macro";
 import { AceEditor } from "../ace-editor";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
 import { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../api/endpoints";
@@ -19,7 +18,7 @@ export class PodDetailsAffinities extends React.Component<Props> {
     if (!affinitiesNum) return null;
 
     return (
-      <DrawerItem name={<Trans>Affinities</Trans>} className="PodDetailsAffinities">
+      <DrawerItem name="Affinities" className="PodDetailsAffinities">
         <DrawerParamToggler label={affinitiesNum}>
           <div className="ace-container">
             <AceEditor
@@ -33,4 +32,4 @@ export class PodDetailsAffinities extends React.Component<Props> {
       </DrawerItem>
     );
   }
-}
+}