Fix translation in widgets.tsx

Author: davidbrochart

packages/labextension/src/widget.tsx

@@ -146,91 +146,92 @@ const KernelUsage = (props: {
       return !usage.hostname ? (
         <>
           <h3 className="jp-KernelUsage-section-separator">
-            props.trans.__('Kernel usage details are not available')
+            {props.trans.__('Kernel usage details are not available')}
           </h3>
           <div className="jp-KernelUsage-section-separator">
-            props.trans.__('Please check with your system administrator that you
-            running IPyKernel version 6.10.0 or above.')
+            {props.trans.__(
+              'Please check with your system administrator that you running IPyKernel version 6.10.0 or above.'
+            )}
           </div>
         </>
       ) : (
         <>
           <h3 className="jp-KernelUsage-section-separator">
-            props.trans.__('Kernel usage')
+            {props.trans.__('Kernel usage')}
           </h3>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Kernel Host'): {usage.hostname}
+            {props.trans.__('Kernel Host')}: {usage.hostname}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Notebook'): {path}
+            {props.trans.__('Notebook')}: {path}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Kernel ID'): {kernelId}
+            {props.trans.__('Kernel ID')}: {kernelId}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Timestamp'): {usage.timestamp?.toLocaleString()}
+            {props.trans.__('Timestamp')}: {usage.timestamp?.toLocaleString()}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Process ID'): {usage.pid}
+            {props.trans.__('Process ID')}: {usage.pid}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('CPU'): {usage.kernel_cpu}% used
+            {props.trans.__('CPU')}: {usage.kernel_cpu}% used
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Memory'): {formatForDisplay(usage.kernel_memory)}
+            {props.trans.__('Memory')}: {formatForDisplay(usage.kernel_memory)}
           </div>
           <hr className="jp-KernelUsage-section-separator"></hr>
           <h4 className="jp-KernelUsage-section-separator">
-            props.trans.__('Host CPU')
+            {props.trans.__('Host CPU')}
           </h4>
           {usage.host_cpu_percent && (
             <div className="jp-KernelUsage-separator">
-              {usage.host_cpu_percent.toFixed(1)}% props.trans.__('used on'){' '}
+              {usage.host_cpu_percent.toFixed(1)}% {props.trans.__('used on')}{' '}
               {usage.cpu_count} CPUs
             </div>
           )}
           <h4 className="jp-KernelUsage-section-separator">
-            props.trans.__('Host Virtual Memory')
+            {props.trans.__('Host Virtual Memory')}
           </h4>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Active'):{' '}
+            {props.trans.__('Active')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.active)}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Available'):{' '}
+            {props.trans.__('Available')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.available)}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Free'):{' '}
+            {props.trans.__('Free')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.free)}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Inactive'):{' '}
+            {props.trans.__('Inactive')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.inactive)}
           </div>
           {usage.host_virtual_memory.percent && (
             <div className="jp-KernelUsage-separator">
-              props.trans.__('Percent used'):{' '}
+              {props.trans.__('Percent used')}:{' '}
               {usage.host_virtual_memory.percent.toFixed(1)}%
             </div>
           )}
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Total'):{' '}
+            {props.trans.__('Total')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.total)}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Used'):{' '}
+            {props.trans.__('Used')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.used)}
           </div>
           <div className="jp-KernelUsage-separator">
-            props.trans.__('Wired'):{' '}
+            {props.trans.__('Wired')}:{' '}
             {formatForDisplay(usage.host_virtual_memory.wired)}
           </div>
         </>
       );
     }
   }
-  return <h3>props.trans.__('Kernel usage is not available')</h3>;
+  return <h3>{props.trans.__('Kernel usage is not available')}</h3>;
 };
 
 export class KernelUsageWidget extends ReactWidget {

yarn.lock

@@ -479,22 +479,6 @@
     "@lumino/widgets" "^1.33.0"
     react "^17.0.1"
 
-"@jupyterlab/launcher@^3.5.1":
-  version "3.5.1"
-  resolved "https://registry.npmjs.org/@jupyterlab/launcher/-/launcher-3.5.1.tgz"
-  integrity sha512-+zE5xnplPa5rk9fVyzWH3o/0x+iNutJ56BSfEnm9MVWIN01Rf30dOf0pWZzazUPtRescSUQM239EVwY/yXu8lw==
-  dependencies:
-    "@jupyterlab/apputils" "^3.5.1"
-    "@jupyterlab/translation" "^3.5.1"
-    "@jupyterlab/ui-components" "^3.5.1"
-    "@lumino/algorithm" "^1.9.0"
-    "@lumino/commands" "^1.19.0"
-    "@lumino/coreutils" "^1.11.0"
-    "@lumino/disposable" "^1.10.0"
-    "@lumino/properties" "^1.8.0"
-    "@lumino/widgets" "^1.33.0"
-    react "^17.0.1"
-
 "@jupyterlab/nbformat@^3.5.1":
   version "3.5.1"
   resolved "https://registry.npmjs.org/@jupyterlab/nbformat/-/nbformat-3.5.1.tgz"