Enforce template strings in eslint (#1574)

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

.eslintrc.js

@@ -47,6 +47,8 @@ module.exports = {
         }],
         "semi": ["error", "always"],
         "object-shorthand": "error",
+        "prefer-template": "error",
+        "template-curly-spacing": "error",
       }
     },
     {
@@ -90,6 +92,8 @@ module.exports = {
         "semi": "off",
         "@typescript-eslint/semi": ["error"],
         "object-shorthand": "error",
+        "prefer-template": "error",
+        "template-curly-spacing": "error",
       },
     },
     {
@@ -140,6 +144,8 @@ module.exports = {
         "semi": "off",
         "@typescript-eslint/semi": ["error"],
         "object-shorthand": "error",
+        "prefer-template": "error",
+        "template-curly-spacing": "error",
       },
     }
   ]

build/download_kubectl.ts

@@ -43,7 +43,7 @@ class KubectlDownloader {
         return true;
       }
 
-      console.log("Kubectl md5sum " + hash + " does not match the remote etag " + etag + ", unlinking and downloading again");
+      console.log(`Kubectl md5sum ${hash} does not match the remote etag ${etag}, unlinking and downloading again`);
       await fs.promises.unlink(this.path);
     }
 
@@ -103,7 +103,7 @@ const downloads = [
 downloads.forEach((dlOpts) => {
   console.log(dlOpts);
   const downloader = new KubectlDownloader(downloadVersion, dlOpts.platform, dlOpts.arch, dlOpts.target);
-  console.log("Downloading: " + JSON.stringify(dlOpts));
+  console.log(`Downloading: ${JSON.stringify(dlOpts)}`);
   downloader.downloadKubectl().then(() => downloader.checkBinary().then(() => console.log("Download complete")));
 });
 

build/set_npm_version.ts

@@ -6,4 +6,4 @@ import appInfo from "../package.json";
 const packagePath = path.join(__dirname, "../src/extensions/npm/extensions/package.json");
 
 packageInfo.version = appInfo.version;
-fs.writeFileSync(packagePath, JSON.stringify(packageInfo, null, 2) + "\n");
+fs.writeFileSync(packagePath, `${JSON.stringify(packageInfo, null, 2)}\n`);

integration/__tests__/app.tests.ts

@@ -546,7 +546,7 @@ describe("Lens integration tests", () => {
         await app.client.keys("metadata:\n");
         await app.client.keys("  name: nginx-create-pod-test\n");
         await app.client.keys(`namespace: ${TEST_NAMESPACE}\n`);
-        await app.client.keys(BACKSPACE + "spec:\n");
+        await app.client.keys(`${BACKSPACE}spec:\n`);
         await app.client.keys("  containers:\n");
         await app.client.keys("- name: nginx-create-pod-test\n");
         await app.client.keys("  image: nginx:alpine\n");

src/common/register-protocol.ts

@@ -5,7 +5,7 @@ import path from "path";
 
 export function registerFileProtocol(name: string, basePath: string) {
   protocol.registerFileProtocol(name, (request, callback) => {
-    const filePath = request.url.replace(name + "://", "");
+    const filePath = request.url.replace(`${name}://`, "");
     const absPath = path.resolve(basePath, filePath);
     callback({ path: absPath });
   });

src/common/system-ca.ts

@@ -6,7 +6,7 @@ import logger from "../main/logger";
 if (isMac) {
   for (const crt of macca.all()) {
     const attributes = crt.issuer?.attributes?.map((a: any) => `${a.name}=${a.value}`);
-    logger.debug("Using host CA: " + attributes.join(","));
+    logger.debug(`Using host CA: ${attributes.join(",")}`);
   }
 }
 if (isWindows) {

src/main/helm/helm-cli.ts

@@ -28,7 +28,7 @@ export class HelmCli extends LensBinary {
   }
 
   protected getOriginalBinaryPath() {
-    return path.join(this.dirname, this.platformName + "-" + this.arch, this.originalBinaryName);
+    return path.join(this.dirname, `${this.platformName}-${this.arch}`, this.originalBinaryName);
   }
 }
 

src/main/kubeconfig-manager.ts

@@ -81,7 +81,7 @@ export class KubeconfigManager {
       return;
     }
 
-    logger.info("Deleting temporary kubeconfig: " + this.tempFile);
+    logger.info(`Deleting temporary kubeconfig: ${this.tempFile}`);
     await fs.unlink(this.tempFile);
     this.tempFile = undefined;
   }

src/main/kubectl.ts

@@ -81,10 +81,10 @@ export class Kubectl {
        if the version map includes that, use that version, if not, fallback to the exact x.y.z of kube version */
     if (kubectlMap.has(minorVersion)) {
       this.kubectlVersion = kubectlMap.get(minorVersion);
-      logger.debug("Set kubectl version " + this.kubectlVersion + " for cluster version " + clusterVersion + " using version map");
+      logger.debug(`Set kubectl version ${this.kubectlVersion} for cluster version ${clusterVersion} using version map`);
     } else {
       this.kubectlVersion = versionParts[1] + versionParts[2];
-      logger.debug("Set kubectl version " + this.kubectlVersion + " for cluster version " + clusterVersion + " using fallback");
+      logger.debug(`Set kubectl version ${this.kubectlVersion} for cluster version ${clusterVersion} using fallback`);
     }
 
     let arch = null;
@@ -197,7 +197,7 @@ export class Kubectl {
         }
         return true;
       } catch (err) {
-        logger.error("Could not copy the bundled kubectl to app-data: " + err);
+        logger.error(`Could not copy the bundled kubectl to app-data: ${err}`);
         return false;
       }
     } else {
@@ -280,7 +280,7 @@ export class Kubectl {
     const fsPromises = fs.promises;
     const bashScriptPath = path.join(this.dirname, ".bash_set_path");
 
-    let bashScript = "" + initScriptVersionString;
+    let bashScript = `${initScriptVersionString}`;
     bashScript += "tempkubeconfig=\"$KUBECONFIG\"\n";
     bashScript += "test -f \"/etc/profile\" && . \"/etc/profile\"\n";
     bashScript += "if test -f \"$HOME/.bash_profile\"; then\n";
@@ -303,7 +303,7 @@ export class Kubectl {
 
     const zshScriptPath = path.join(this.dirname, ".zlogin");
 
-    let zshScript = "" + initScriptVersionString;
+    let zshScript = `${initScriptVersionString}`;
 
     zshScript += "tempkubeconfig=\"$KUBECONFIG\"\n";
     // restore previous ZDOTDIR

src/main/lens-binary.ts

@@ -51,8 +51,8 @@ export class LensBinary {
     this.platformName = isWindows ? "windows" : process.platform;
     this.dirname = path.normalize(path.join(baseDir, this.binaryName));
     if (isWindows) {
-      this.binaryName = this.binaryName + ".exe";
+      this.binaryName = `${this.binaryName}.exe`;
-      this.originalBinaryName = this.originalBinaryName + ".exe";
+      this.originalBinaryName = `${this.originalBinaryName}.exe`;
     }
     const tarName = this.getTarName();
     if (tarName) {

src/main/lens-proxy.ts

@@ -95,7 +95,7 @@ export class LensProxy {
         socket.end();
       });
       proxySocket.on("error", function () {
-        socket.write("HTTP/" + req.httpVersion + " 500 Connection error\r\n\r\n");
+        socket.write(`HTTP/${req.httpVersion} 500 Connection error\r\n\r\n`);
         socket.end();
       });
       socket.on("data", function (chunk) {
@@ -117,7 +117,7 @@ export class LensProxy {
         return;
       }
       if (target) {
-        logger.debug("Failed proxy to target: " + JSON.stringify(target, null, 2));
+        logger.debug(`Failed proxy to target: ${JSON.stringify(target, null, 2)}`);
         if (req.method === "GET" && (!res.statusCode || res.statusCode >= 500)) {
           const reqId = this.getRequestId(req);
           const retryCount = this.retryCounters.get(reqId) || 0;

src/main/resource-applier.ts

@@ -26,7 +26,7 @@ export class ResourceApplier {
       const fileName = tempy.file({ name: "resource.yaml" });
       fs.writeFileSync(fileName, content);
       const cmd = `"${kubectlPath}" apply --kubeconfig "${this.cluster.getProxyKubeconfigPath()}" -o json -f "${fileName}"`;
-      logger.debug("shooting manifests with: " + cmd);
+      logger.debug(`shooting manifests with: ${cmd}`);
       const execEnv: NodeJS.ProcessEnv = Object.assign({}, process.env);
       const httpsProxy = this.cluster.preferences?.httpsProxy;
       if (httpsProxy) {
@@ -58,7 +58,7 @@ export class ResourceApplier {
       console.log("shooting manifests with:", cmd);
       exec(cmd, (error, stdout, stderr) => {
         if (error) {
-          reject("Error applying manifests:" + error);
+          reject(`Error applying manifests:${error}`);
         }
         if (stderr != "") {
           reject(stderr);

src/main/router.ts

@@ -102,7 +102,7 @@ export class Router {
       // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
       const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
       if (isDevelopment && toWebpackDevServer) {
-        const redirectLocation = `http://localhost:${webpackDevServerPort}` + req.url;
+        const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
         res.statusCode = 307;
         res.setHeader("Location", redirectLocation);
         res.end();

src/main/routes/watch-route.ts

@@ -37,7 +37,7 @@ class ApiWatcher {
     if (this.processor) {
       clearInterval(this.processor);
     }
-    logger.debug("Stopping watcher for api: " + this.apiUrl);
+    logger.debug(`Stopping watcher for api: ${this.apiUrl}`);
     try {
       this.watchRequest.abort();
       this.sendEvent({
@@ -47,7 +47,7 @@ class ApiWatcher {
       });
       logger.debug("watch aborted");
     } catch (error) {
-      logger.error("Watch abort errored:" + error);
+      logger.error(`Watch abort errored:${error}`);
     }
   }
 
@@ -59,7 +59,7 @@ class ApiWatcher {
   }
 
   private doneHandler(error: Error) {
-    if (error) logger.warn("watch ended: " + error.toString());
+    if (error) logger.warn(`watch ended: ${error.toString()}`);
     this.watchRequest.abort();
   }
 
@@ -87,7 +87,7 @@ class WatchRoute extends LensApi {
     response.setHeader("Content-Type", "text/event-stream");
     response.setHeader("Cache-Control", "no-cache");
     response.setHeader("Connection", "keep-alive");
-    logger.debug("watch using kubeconfig:" + JSON.stringify(cluster.getProxyKubeconfig(), null, 2));
+    logger.debug(`watch using kubeconfig:${JSON.stringify(cluster.getProxyKubeconfig(), null, 2)}`);
 
     apis.forEach(apiUrl => {
       const watcher = new ApiWatcher(apiUrl, cluster.getProxyKubeconfig(), response);

src/main/shell-session.ts

@@ -203,6 +203,6 @@ export class ShellSession extends EventEmitter {
   }
 
   protected sendResponse(msg: string) {
-    this.websocket.send("1" + Buffer.from(msg).toString("base64"));
+    this.websocket.send(`1${Buffer.from(msg).toString("base64")}`);
   }
 }

src/renderer/api/endpoints/deployment.api.ts

@@ -6,7 +6,7 @@ import { KubeApi } from "../kube-api";
 
 export class DeploymentApi extends KubeApi<Deployment> {
   protected getScaleApiUrl(params: { namespace: string; name: string }) {
-    return this.getUrl(params) + "/scale";
+    return `${this.getUrl(params)}/scale`;
   }
 
   getReplicas(params: { namespace: string; name: string }): Promise<number> {

src/renderer/api/endpoints/helm-charts.api.ts

@@ -34,7 +34,7 @@ export const helmChartsApi = {
   get(repo: string, name: string, readmeVersion?: string) {
     const path = endpoint({ repo, name });
     return apiBase
-      .get<IHelmChartDetails>(path + "?" + stringify({ version: readmeVersion }))
+      .get<IHelmChartDetails>(`${path}?${stringify({ version: readmeVersion })}`)
       .then(data => {
         const versions = data.versions.map(HelmChart.create);
         const readme = data.readme;
@@ -47,7 +47,7 @@ export const helmChartsApi = {
 
   getValues(repo: string, name: string, version: string) {
     return apiBase
-      .get<string>(`/v2/charts/${repo}/${name}/values?` + stringify({ version }));
+      .get<string>(`/v2/charts/${repo}/${name}/values?${stringify({ version })}`);
   }
 };
 

src/renderer/api/endpoints/helm-releases.api.ts

@@ -106,17 +106,17 @@ export const helmReleasesApi = {
   },
 
   getValues(name: string, namespace: string) {
-    const path = endpoint({ name, namespace }) + "/values";
+    const path = `${endpoint({ name, namespace })}/values`;
     return apiBase.get<string>(path);
   },
 
   getHistory(name: string, namespace: string): Promise<IReleaseRevision[]> {
-    const path = endpoint({ name, namespace }) + "/history";
+    const path = `${endpoint({ name, namespace })}/history`;
     return apiBase.get(path);
   },
 
   rollback(name: string, namespace: string, revision: number) {
-    const path = endpoint({ name, namespace }) + "/rollback";
+    const path = `${endpoint({ name, namespace })}/rollback`;
     return apiBase.put(path, {
       data: {
         revision

src/renderer/api/endpoints/ingress.api.ts

@@ -111,7 +111,7 @@ export class Ingress extends KubeObject {
         rule.http.paths.forEach(path => {
           const { serviceName, servicePort } = getBackendServiceNamePort(path.backend);
 
-          routes.push(protocol + "://" + host + (path.path || "/") + " ⇢ " + serviceName + ":" + servicePort);
+          routes.push(`${protocol}://${host}${path.path || "/"} ⇢ ${serviceName}:${servicePort}`);
         });
       }
     });

src/renderer/api/endpoints/pods.api.ts

@@ -5,7 +5,7 @@ import { KubeApi } from "../kube-api";
 
 export class PodsApi extends KubeApi<Pod> {
   async getLogs(params: { namespace: string; name: string }, query?: IPodLogsQuery): Promise<string> {
-    const path = this.getUrl(params) + "/log";
+    const path = `${this.getUrl(params)}/log`;
     return this.request.get(path, { query });
   }
 

src/renderer/api/endpoints/service.api.ts

@@ -24,7 +24,7 @@ export class ServicePort implements IServicePort {
     if (this.nodePort) {
       return `${this.port}:${this.nodePort}/${this.protocol}`;
     } else {
-      return `${this.port}${this.port === this.targetPort ? "" : ":" + this.targetPort}/${this.protocol}`;
+      return `${this.port}${this.port === this.targetPort ? "" : `:${this.targetPort}`}/${this.protocol}`;
     }
   }
 }

src/renderer/api/endpoints/stateful-set.api.ts

@@ -6,7 +6,7 @@ import { KubeApi } from "../kube-api";
 
 export class StatefulSetApi extends KubeApi<StatefulSet> {
   protected getScaleApiUrl(params: { namespace: string; name: string }) {
-    return this.getUrl(params) + "/scale";
+    return `${this.getUrl(params)}/scale`;
   }
 
   getReplicas(params: { namespace: string; name: string }): Promise<number> {

src/renderer/api/kube-api.ts

@@ -230,7 +230,7 @@ export class KubeApi<T extends KubeObject = any> {
       namespace: this.isNamespaced ? namespace : undefined,
       name,
     });
-    return resourcePath + (query ? `?` + stringify(this.normalizeQuery(query)) : "");
+    return resourcePath + (query ? `?${stringify(this.normalizeQuery(query))}` : "");
   }
 
   protected normalizeQuery(query: Partial<IKubeApiQueryParams> = {}) {

src/renderer/api/kube-watch-api.ts

@@ -78,7 +78,7 @@ export class KubeWatchApi {
       return;
     }
     const query = this.getQuery();
-    const apiUrl = `${apiPrefix}/watch?` + stringify(query);
+    const apiUrl = `${apiPrefix}/watch?${stringify(query)}`;
     this.evtSource = new EventSource(apiUrl);
     this.evtSource.onmessage = this.onMessage;
     this.evtSource.onerror = this.onError;

src/renderer/api/terminal-api.ts

@@ -130,7 +130,7 @@ export class TerminalApi extends WebSocketApi {
     }
     let time;
     if (showTime) {
-      time = (new Date()).toLocaleString() + " ";
+      time = `${(new Date()).toLocaleString()} `;
     }
     this.onData.emit(`${showTime ? time : ""}${data}\r\n`);
   }

src/renderer/api/websocket-api.ts

@@ -88,7 +88,7 @@ export class WebSocketApi {
   reconnect() {
     const { reconnectDelaySeconds } = this.params;
     if (!reconnectDelaySeconds) return;
-    this.writeLog("reconnect after", reconnectDelaySeconds + "ms");
+    this.writeLog("reconnect after", `${reconnectDelaySeconds}ms`);
     this.reconnectTimer = setTimeout(() => this.connect(), reconnectDelaySeconds * 1000);
     this.readyState = WebSocketApiState.RECONNECTING;
   }

src/renderer/components/+apps-helm-charts/helm-charts.route.ts

@@ -3,7 +3,7 @@ import { buildURL } from "../../../common/utils/buildUrl";
 import { appsRoute } from "../+apps/apps.route";
 
 export const helmChartsRoute: RouteProps = {
-  path: appsRoute.path + "/charts/:repo?/:chartName?"
+  path: `${appsRoute.path}/charts/:repo?/:chartName?`
 };
 
 export interface IHelmChartsRouteParams {

src/renderer/components/+apps-releases/release.route.ts

@@ -3,7 +3,7 @@ import { buildURL } from "../../../common/utils/buildUrl";
 import { appsRoute } from "../+apps/apps.route";
 
 export const releaseRoute: RouteProps = {
-  path: appsRoute.path + "/releases/:namespace?/:name?"
+  path: `${appsRoute.path}/releases/:namespace?/:name?`
 };
 
 export interface IReleaseRouteParams {

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

@@ -25,7 +25,7 @@ export const ClusterMetrics = observer(() => {
 
   const datasets = [{
     id: metricType + metricNodeRole,
-    label: metricType.toUpperCase() + " usage",
+    label: `${metricType.toUpperCase()} usage`,
     borderColor: colors[metricType],
     data
   }];

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

@@ -73,10 +73,10 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        i18n._(t`Usage`) + `: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
+        `${i18n._(t`Usage`)}: ${cpuUsage ? cpuUsage.toFixed(2) : "N/A"}`,
-        i18n._(t`Requests`) + `: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
+        `${i18n._(t`Requests`)}: ${cpuRequests ? cpuRequests.toFixed(2) : "N/A"}`,
-        i18n._(t`Limits`) + `: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
+        `${i18n._(t`Limits`)}: ${cpuLimits ? cpuLimits.toFixed(2) : "N/A"}`,
-        i18n._(t`Capacity`) + `: ${cpuCapacity || "N/A"}`
+        `${i18n._(t`Capacity`)}: ${cpuCapacity || "N/A"}`
       ]
     };
     const memoryData: ChartData = {
@@ -116,10 +116,10 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        i18n._(t`Usage`) + `: ${bytesToUnits(memoryUsage)}`,
+        `${i18n._(t`Usage`)}: ${bytesToUnits(memoryUsage)}`,
-        i18n._(t`Requests`) + `: ${bytesToUnits(memoryRequests)}`,
+        `${i18n._(t`Requests`)}: ${bytesToUnits(memoryRequests)}`,
-        i18n._(t`Limits`) + `: ${bytesToUnits(memoryLimits)}`,
+        `${i18n._(t`Limits`)}: ${bytesToUnits(memoryLimits)}`,
-        i18n._(t`Capacity`) + `: ${bytesToUnits(memoryCapacity)}`,
+        `${i18n._(t`Capacity`)}: ${bytesToUnits(memoryCapacity)}`,
       ]
     };
     const podsData: ChartData = {
@@ -137,8 +137,8 @@ export const ClusterPieCharts = observer(() => {
         },
       ],
       labels: [
-        i18n._(t`Usage`) + `: ${podUsage || 0}`,
+        `${i18n._(t`Usage`)}: ${podUsage || 0}`,
-        i18n._(t`Capacity`) + `: ${podCapacity}`,
+        `${i18n._(t`Capacity`)}: ${podCapacity}`,
       ]
     };
     return (

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

@@ -46,7 +46,7 @@ function renderQuotas(quota: ResourceQuota): JSX.Element[] {
             max={max}
             value={current}
             tooltip={
-              <p><Trans>Set</Trans>: {value}. <Trans>Usage</Trans>: {usage + "%"}</p>
+              <p><Trans>Set</Trans>: {value}. <Trans>Usage</Trans>: {`${usage}%`}</p>
             }
           />
         </div>

src/renderer/components/+custom-resources/crd.route.ts

@@ -6,11 +6,11 @@ export const crdRoute: RouteProps = {
 };
 
 export const crdDefinitionsRoute: RouteProps = {
-  path: crdRoute.path + "/definitions"
+  path: `${crdRoute.path}/definitions`
 };
 
 export const crdResourcesRoute: RouteProps = {
-  path: crdRoute.path + "/:group/:name"
+  path: `${crdRoute.path}/:group/:name`
 };
 
 export interface ICRDListQuery {

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

@@ -303,7 +303,7 @@ export class Extensions extends React.Component {
   async unpackExtension({ fileName, tempFile, manifest: { name, version } }: InstallRequestValidated) {
     const displayName = extensionDisplayName(name, version);
     const extensionFolder = this.getExtensionDestFolder(name);
-    const unpackingTempFolder = path.join(path.dirname(tempFile), path.basename(tempFile) + "-unpacked");
+    const unpackingTempFolder = path.join(path.dirname(tempFile), `${path.basename(tempFile)}-unpacked`);
     const extensionId = path.join(extensionDiscovery.nodeModulesPath, name, "package.json");
 
     logger.info(`Unpacking extension ${displayName}`, { fileName, tempFile });

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

@@ -111,7 +111,7 @@ export class NodeDetails extends React.Component<Props> {
           <DrawerItem name={<Trans>Taints</Trans>} labelsOnly>
             {
               taints.map(({ key, effect, value }) => (
-                <Badge key={key} label={key + ": " + effect} tooltip={value}/>
+                <Badge key={key} label={`${key}: ${effect}`} tooltip={value}/>
               ))
             }
           </DrawerItem>

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

@@ -57,7 +57,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: `${_i18n._(t`CPU:`)} ${Math.ceil(usage * 100) / cores}\%, ${_i18n._(t`cores:`)} ${cores}`
         }}
       />
     );
@@ -74,7 +74,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: `${_i18n._(t`Memory:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
         }}
       />
     );
@@ -91,7 +91,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: `${_i18n._(t`Disk:`)} ${Math.ceil(usage * 100 / capacity)}%, ${bytesToUnits(usage, 3)}`
         }}
       />
     );

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

@@ -43,7 +43,7 @@ export class CronJobTriggerDialog extends Component<Props> {
 
   onOpen = async () => {
     const { cronjob } = this;
-    this.jobName = cronjob ? cronjob.getName() + "-manual-" + Math.random().toString(36).slice(2, 7) : "";
+    this.jobName = cronjob ? `${cronjob.getName()}-manual-${Math.random().toString(36).slice(2, 7)}` : "";
     this.jobName = this.jobName.slice(0, 63);
     this.ready = true;
   };

src/renderer/components/+workloads-overview/overview-workload-status.tsx

@@ -55,7 +55,7 @@ export class OverviewWorkloadStatus extends React.Component<Props> {
         if (val !== 0) {
           dataset.data.push(val);
           dataset.backgroundColor.push(this.getStatusColor(key));
-          chartData.labels.push(capitalize(key) + ": " + val);
+          chartData.labels.push(`${capitalize(key)}: ${val}`);
         }
       });
       chartData.datasets[0] = dataset;

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

@@ -39,7 +39,7 @@ export class PodContainerPort extends React.Component<Props> {
   render() {
     const { port } = this.props;
     const { name, containerPort, protocol } = port;
-    const text = (name ? name + ": " : "")+`${containerPort}/${protocol}`;
+    const text = `${name ? `${name}: ` : ""}${containerPort}/${protocol}`;
     return (
       <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
         <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>

src/renderer/components/app.tsx

@@ -138,12 +138,12 @@ export class App extends React.Component {
       const tabRoutes = this.getTabLayoutRoutes(menu);
       if (tabRoutes.length > 0) {
         const pageComponent = () => <TabLayout tabs={tabRoutes} />;
-        return <Route key={"extension-tab-layout-route-" + index} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)} />;
+        return <Route key={`extension-tab-layout-route-${index}`} component={pageComponent} path={tabRoutes.map((tab) => tab.routePath)} />;
       } else {
         const page = clusterPageRegistry.getByPageMenuTarget(menu.target);
         if (page) {
           const pageComponent = () => <page.components.Page />;
-          return <Route key={"extension-tab-layout-route-" + index} path={page.routePath} exact={page.exact} component={pageComponent}/>;
+          return <Route key={`extension-tab-layout-route-${index}`} path={page.routePath} exact={page.exact} component={pageComponent}/>;
         }
       }
     });
@@ -153,7 +153,7 @@ export class App extends React.Component {
     return clusterPageRegistry.getItems().map((page, index) => {
       const menu = clusterPageMenuRegistry.getByPage(page);
       if (!menu) {
-        return <Route key={"extension-route-" + index} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
+        return <Route key={`extension-route-${index}`} path={page.routePath} exact={page.exact} component={page.components.Page}/>;
       }
     });
   }

src/renderer/components/chart/pie-chart.tsx

@@ -26,7 +26,7 @@ export class PieChart extends React.Component<Props> {
             const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
             const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100);
             if (isNaN(percent)) return "N/A";
-            return percent + "%";
+            return `${percent}%`;
           },
         },
         filter: ({ datasetIndex, index }, { datasets }) => {

src/renderer/components/chart/zebra-stripes.plugin.ts

@@ -46,10 +46,10 @@ export const ZebraStripes = {
     if (this.getStripesElem(chart)) return;
 
     cover.className = "zebra-cover";
-    styles.width = right - left + "px";
+    styles.width = `${right - left}px`;
-    styles.left = left + "px";
+    styles.left = `${left}px`;
-    styles.top = top + "px";
+    styles.top = `${top}px`;
-    styles.height = bottom - top + "px";
+    styles.height = `${bottom - top}px`;
     styles.backgroundImage = `
       repeating-linear-gradient(to right, ${stripeColor} 0px, ${stripeColor} ${stripeWidth}px,
       transparent ${stripeWidth}px, transparent ${stripeWidth * 2 + step}px)
@@ -89,7 +89,7 @@ export const ZebraStripes = {
     if (minutes > 0) {
       // Move position regarding to difference in time
       const cover = this.getStripesElem(chart);
-      cover.style.backgroundPositionX = -step * minutes + "px";
+      cover.style.backgroundPositionX = `${-step * minutes}px`;
     }
   }
 };

src/renderer/components/checkbox/checkbox.tsx

@@ -33,7 +33,7 @@ export class Checkbox extends React.PureComponent<CheckboxProps> {
       inline,
       checked: value,
       disabled: this.props.disabled,
-      ["theme-" + theme]: theme,
+      [`theme-${theme}`]: theme,
     });
     return (
       <label className={componentClass}>

src/renderer/components/cluster-icon/cluster-icon.tsx

@@ -70,7 +70,7 @@ export class ClusterIcon extends React.Component<Props> {
         {showErrors && eventCount > 0 && !isActive && (
           <Badge
             className={cssNames("events-count", errorClass)}
-            label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) + "k+" : eventCount}
+            label={eventCount >= 1000 ? `${Math.ceil(eventCount / 1000)}k+` : eventCount}
           />
         )}
         {children}

src/renderer/components/dock/pod-log-controls.tsx

@@ -39,7 +39,7 @@ export const PodLogControls = observer((props: Props) => {
 
   const downloadLogs = () => {
     const fileName = selectedContainer ? selectedContainer.name : pod.getName();
-    saveFileDialog(fileName + ".log", logs.join("\n"), "text/plain");
+    saveFileDialog(`${fileName}.log`, logs.join("\n"), "text/plain");
   };
 
   const onContainerChange = (option: SelectOption) => {
@@ -100,7 +100,7 @@ export const PodLogControls = observer((props: Props) => {
           material="av_timer"
           onClick={toggleTimestamps}
           className={cssNames("timestamps-icon", { active: showTimestamps })}
-          tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
+          tooltip={`${showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)} ${_i18n._(t`timestamps`)}`}
         />
         <Icon
           material="history"

src/renderer/components/editable-list/editable-list.tsx

@@ -56,7 +56,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
         <div className="el-contents">
           {
             items.map((item, index) => (
-              <div key={item + `${index}`} className="el-item Badge">
+              <div key={`${item}${index}`} className="el-item Badge">
                 <div>{renderItem(item, index)}</div>
                 <div className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />

src/renderer/components/icon/icon.tsx

@@ -89,7 +89,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (svg) {
-      const svgIconText = require("!!raw-loader!./" + svg + ".svg").default;
+      const svgIconText = require(`!!raw-loader!./${svg}.svg`).default;
       iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
 

src/renderer/components/input/input.tsx

@@ -104,7 +104,7 @@ export class Input extends React.Component<InputProps, State> {
     const lineHeight = parseFloat(window.getComputedStyle(textArea).lineHeight);
     const rowsCount = (this.getValue().match(/\n/g) || []).length + 1;
     const height = lineHeight * Math.min(Math.max(rowsCount, rows), maxRows);
-    textArea.style.height = height + "px";
+    textArea.style.height = `${height}px`;
   }
 
   private validationId: string;

src/renderer/components/layout/sidebar.tsx

@@ -115,7 +115,7 @@ export class Sidebar extends React.Component<Props> {
       }
       return (
         <SidebarNavItem
-          key={"registered-item-" + index}
+          key={`registered-item-${index}`}
           url={pageUrl}
           text={menuItem.title}
           icon={<menuItem.components.Icon/>}

src/renderer/components/line-progress/line-progress.tsx

@@ -29,7 +29,7 @@ export class LineProgress extends React.PureComponent<LineProgressProps> {
     }
     return (
       <div className={cssNames("LineProgress", className)} {...props}>
-        <div className="line" style={{ width: valuePercents + "%" }}></div>
+        <div className="line" style={{ width: `${valuePercents}%` }}></div>
         {children}
       </div>
     );

src/renderer/components/menu/menu.tsx

@@ -129,18 +129,18 @@ export class Menu extends React.Component<MenuProps, State> {
 
     // setup initial position
     const position: MenuPosition = { left: true, bottom: true };
-    this.elem.style.left = left + "px";
+    this.elem.style.left = `${left}px`;
-    this.elem.style.top = bottom + "px";
+    this.elem.style.top = `${bottom}px`;
 
     // correct position if menu doesn't fit to viewport
     const menuPos = this.elem.getBoundingClientRect();
     if (menuPos.right > window.innerWidth) {
-      this.elem.style.left = (right - this.elem.offsetWidth) + "px";
+      this.elem.style.left = `${right - this.elem.offsetWidth}px`;
       position.right = true;
       delete position.left;
     }
     if (menuPos.bottom > window.innerHeight) {
-      this.elem.style.top = (top - this.elem.offsetHeight) + "px";
+      this.elem.style.top = `${top - this.elem.offsetHeight}px`;
       position.top = true;
       delete position.bottom;
     }

src/renderer/components/tooltip/tooltip.tsx

@@ -133,8 +133,8 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   protected setPosition(pos: { left: number, top: number }) {
     const elemStyle = this.elem.style;
-    elemStyle.left = pos.left + "px";
+    elemStyle.left = `${pos.left}px`;
-    elemStyle.top = pos.top + "px";
+    elemStyle.top = `${pos.top}px`;
   }
 
   protected getPosition(position: TooltipPosition, tooltipBounds: DOMRect, targetBounds: DOMRect) {

src/renderer/utils/cssVar.ts

@@ -10,7 +10,7 @@ export function cssVar(elem: HTMLElement) {
       };
     },
     set(name: string, value: number | string) {
-      if (typeof value === "number") value = value + "px";
+      if (typeof value === "number") value = `${value}px`;
       elem.style.setProperty(name, value);
     }
   };