fix(ui): Update dependencies and add missing icons (#4699)

platform/ui-next/src/components/Icons/Icons.tsx

@@ -184,7 +184,8 @@ import LoadingOHIFMark from './Sources/LoadingOHIFMark';
 import ArrowLeftBold from './Sources/ArrowLeftBold';
 import Pencil from './Sources/Pencil';
 import NotificationWarning from './Sources/NotificationWarning';
-//
+import ArrowRight from './Sources/ArrowRight';
+import ChevronLeft from './Sources/ChevronLeft';
 //
 //
 type IconProps = React.HTMLAttributes<SVGElement>;
@@ -481,6 +482,23 @@ export const Icons = {
   ViewportViews,
   ChevronClosed,
   ChevronOpen,
+  ChevronRight: (props: IconProps) => {
+    return (
+      <ChevronLeft
+        {...props}
+        className={`${props.className || ''} rotate-180`.trim()}
+      />
+    );
+  },
+  ChevronLeft,
+  ChevronDown: (props: IconProps) => {
+    return (
+      <ChevronLeft
+        {...props}
+        className={`${props.className || ''} -rotate-90`.trim()}
+      />
+    );
+  },
   Alert,
   AlertOutline,
   NotificationInfo,
@@ -495,20 +513,13 @@ export const Icons = {
   Link,
   LoadingOHIFMark,
   ArrowLeft: ChevronClosed,
-  ArrowRight: (props: IconProps) => {
-    return (
-      <ChevronClosed
-        {...props}
-        className="rotate-180"
-      />
-    );
-  },
+  ArrowRight,
   ArrowLeftBold,
   ArrowRightBold: (props: IconProps) => {
     return (
       <ArrowLeftBold
         {...props}
-        className="rotate-180"
+        className={`${props.className || ''} rotate-180`.trim()}
       />
     );
   },
@@ -516,7 +527,7 @@ export const Icons = {
     return (
       <ChevronOpen
         {...props}
-        className="rotate-180"
+        className={`${props.className || ''} -rotate-90`.trim()}
       />
     );
   },
@@ -675,6 +686,9 @@ export const Icons = {
   pencil: (props: IconProps) => Pencil(props),
   'icon-list-view': (props: IconProps) => ListView(props),
   'chevron-menu': 'chevron-down',
+  'icon-status-alert': (props: IconProps) => Alert(props),
+  'info-link': (props: IconProps) => InfoLink(props),
+  'launch-info': (props: IconProps) => LaunchInfo(props),
   clipboard: (props: IconProps) => Clipboard(props),
 
   /** Adds an icon to the set of icons */

platform/ui-next/src/components/Icons/Sources/ArrowRight.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const ArrowLeftBold = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g fillRule="evenodd">
+      <path
+        fill="currentcolor"
+        fillRule="nonzero"
+        d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"
+      />
+      <path
+        fill="currentcolor"
+        fillRule="nonzero"
+        d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"
+      />
+    </g>
+  </svg>
+);
+
+export default ArrowLeftBold;

platform/ui-next/src/components/Icons/Sources/ChevronLeft.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const ChevronLeft = (props: IconProps) => (
+  <svg
+    width="7"
+    height="12"
+    viewBox="0 0 7 12"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g
+      fill="none"
+      fillRule="evenodd"
+    >
+      <path d="M0 0h7v12H0z" />
+      <path
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.757 1.757 1.515 6l4.242 4.243"
+      />
+    </g>
+  </svg>
+);
+
+export default ChevronLeft;

platform/ui-next/src/components/Icons/Sources/LaunchInfo.tsx

@@ -6,6 +6,7 @@ export const LaunchInfo = (props: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     width="20"
     height="20"
+    {...props}
     viewBox="0 0 21 22"
   >
     <g fillRule="evenodd">

platform/ui-next/src/components/Icons/Sources/StatusTracking.tsx

@@ -3,48 +3,33 @@ import type { IconProps } from '../types';
 
 export const StatusTracking = (props: IconProps) => (
   <svg
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <title>status-tracking</title>
     <g
-      id="status-tracking"
-      stroke="none"
-      strokeWidth="1"
       fill="none"
       fillRule="evenodd"
     >
-      <g>
-        <rect
-          id="Rectangle"
-          x="0"
-          y="0"
-          width="24"
-          height="24"
-        ></rect>
-        <rect
-          id="Rectangle"
-          stroke="#5ACCE6"
-          fill="#5ACCE6"
-          x="4.5"
-          y="4.5"
-          width="15"
-          height="15"
-          rx="7.5"
-        ></rect>
-        <path
-          d="M15.388889,9 L11.7739644,14.5948033 C11.6112717,14.8456871 11.3630166,15.0025668 11.0931982,15.0249993 C10.8233798,15.0474318 10.5584004,14.9332222 10.3665704,14.7118131 L8.5,12.5449644"
-          id="Path"
-          stroke="#090C29"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        ></path>
-      </g>
+      <path d="M0 0h16v16H0z" />
+      <rect
+        stroke="#5ACCE6"
+        fill="#5ACCE6"
+        x=".5"
+        y=".5"
+        width="15"
+        height="15"
+        rx="7.5"
+      />
+      <path
+        d="m11.389 5-3.615 5.595a.91.91 0 0 1-.68.43.866.866 0 0 1-.727-.313L4.5 8.545"
+        stroke="#000"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </g>
   </svg>
 );