Refactor cell-metadata and status icons into functional components

Signed-off-by: amaly <amaly@users.noreply.github.com>

Author: ada333

labextension/src/icons/statusRunning.tsx

@@ -15,34 +15,35 @@
 import * as React from 'react';
 // import { CSSProperties } from 'jss/css';
 
-export default class StatusRunning extends React.Component<{ style: any }> {
-  public render(): JSX.Element {
-    const { style } = this.props;
-    return (
-      <svg
-        width={style.width as string}
-        height={style.height as string}
-        viewBox="0 0 18 18"
+export default function StatusRunning({
+  style,
+}: {
+  style: React.CSSProperties;
+}): React.ReactNode {
+  return (
+    <svg
+      width={style.width as string}
+      height={style.height as string}
+      viewBox="0 0 18 18"
+    >
+      <g
+        transform="translate(-450, -307)"
+        fill={style.color as string}
+        fillRule="nonzero"
       >
-        <g
-          transform="translate(-450, -307)"
-          fill={style.color as string}
-          fillRule="nonzero"
-        >
-          <g transform="translate(450, 266)">
-            <g transform="translate(0, 41)">
-              <path
-                d="M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
+        <g transform="translate(450, 266)">
+          <g transform="translate(0, 41)">
+            <path
+              d="M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
                 C11.7614286,14 14,11.7614286 14,9 C14,8.40214643 13.8950716,7.8288007
                 13.702626,7.29737398 L15.2180703,5.78192967 C15.7177126,6.74539838
                 16,7.83973264 16,9 C16,12.866 12.866,16 9,16 C5.134,16 2,12.866 2,9 C2,5.134
                 5.134,2 9,2 C10.933,2 12.683,2.7835 13.94975,4.05025 L12.7677679,5.23223214
                 L9,9 L9,4 Z"
-              />
-            </g>
+            />
           </g>
         </g>
-      </svg>
-    );
-  }
+      </g>
+    </svg>
+  );
 }

labextension/src/icons/statusTerminated.tsx

@@ -14,33 +14,34 @@
 
 import * as React from 'react';
 // import { CSSProperties } from 'jss/css';
-export default class StatusTerminated extends React.Component<{ style: any }> {
-  public render(): JSX.Element {
-    const { style } = this.props;
-    return (
-      <svg
-        width={style.width as string}
-        height={style.height as string}
-        viewBox="0 0 18 18"
-      >
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-          <g>
-            <polygon points="0 0 18 0 18 18 0 18" />
-            <path
-              d="M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
+export default function StatusTerminated({
+  style,
+}: {
+  style: React.CSSProperties;
+}): React.ReactNode {
+  return (
+    <svg
+      width={style.width as string}
+      height={style.height as string}
+      viewBox="0 0 18 18"
+    >
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g>
+          <polygon points="0 0 18 0 18 18 0 18" />
+          <path
+            d="M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
               C13.14,16.5 16.5,13.14 16.5,9 C16.5,4.86 13.14,1.5 8.9925,1.5 Z M9,15 C5.685,15
               3,12.315 3,9 C3,5.685 5.685,3 9,3 C12.315,3 15,5.685 15,9 C15,12.315 12.315,15 9,15 Z"
-              fill={style.color as string}
-              fillRule="nonzero"
-            />
-            <polygon
-              fill={style.color as string}
-              fillRule="nonzero"
-              points="6 6 12 6 12 12 6 12"
-            />
-          </g>
+            fill={style.color as string}
+            fillRule="nonzero"
+          />
+          <polygon
+            fill={style.color as string}
+            fillRule="nonzero"
+            points="6 6 12 6 12 12 6 12"
+          />
         </g>
-      </svg>
-    );
-  }
+      </g>
+    </svg>
+  );
 }

labextension/src/widgets/LeftPanel.tsx

@@ -15,7 +15,7 @@
 import * as React from 'react';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import NotebookUtils from '../lib/NotebookUtils';
-import { InlineCellsMetadata } from './cell-metadata/InlineCellMetadata';
+import { InlineCellsMetadata } from './cell-metadata/InlineCellsMetadata';
 import { SplitDeployButton } from '../components/DeployButton';
 import { Kernel } from '@jupyterlab/services';
 import { ExperimentInput } from '../components/ExperimentInput';