refactor(docker/containers): migrate inspect view to react [EE-2190] (#11005)

app/react/components/JsonTree.module.css

@@ -1,30 +1,25 @@
 /* json-tree override */
-.json-tree,
-json-tree {
+.json-tree {
   font-size: 13px;
   color: var(--blue-5);
 }
 
-.json-tree .key,
-json-tree .key {
+.json-tree .key {
+  color: var(--text-json-tree-color);
+  padding-right: 4px;
+}
+
+.json-tree .chevronIcon {
   color: var(--text-json-tree-color);
 }
 
-json-tree .key {
-  padding-right: 5px;
-}
-
-.json-tree .branch-preview,
-json-tree .branch-preview {
+.json-tree .branch-preview {
   color: var(--text-json-tree-branch-preview-color);
   font-style: normal;
   font-size: 11px;
   opacity: 0.5;
 }
 
-.json-tree .leaf-value,
-json-tree .leaf-value {
+.json-tree .leaf-value {
   color: var(--text-json-tree-leaf-color);
 }
-
-/* !json-tree override */

app/react/components/JsonTree.tsx

@@ -3,7 +3,7 @@ import { JsonView, defaultStyles } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
 import clsx from 'clsx';
 
-import './JsonTree.css';
+import styles from './JsonTree.module.css';
 
 export function JsonTree({ style, ...props }: ComponentProps<typeof JsonView>) {
   const currentStyle = getCurrentStyle(style);
@@ -25,17 +25,20 @@ function getCurrentStyle(style: StyleProps | undefined): StyleProps {
 
   return {
     ...defaultStyles,
-    container: 'json-tree',
-    booleanValue: 'leaf-value',
-    nullValue: 'leaf-value',
-    otherValue: 'leaf-value',
-    numberValue: 'leaf-value',
-    stringValue: 'leaf-value',
-    undefinedValue: 'leaf-value',
-    label: 'key',
-    punctuation: 'leaf-value',
-    collapseIcon: clsx(defaultStyles.collapseIcon, 'key'),
-    expandIcon: clsx(defaultStyles.expandIcon, 'key'),
-    collapsedContent: clsx(defaultStyles.collapsedContent, 'branch-preview'),
+    container: styles.jsonTree,
+    booleanValue: styles.leafValue,
+    nullValue: styles.leafValue,
+    otherValue: styles.leafValue,
+    numberValue: styles.leafValue,
+    stringValue: styles.leafValue,
+    undefinedValue: styles.leafValue,
+    label: styles.key,
+    punctuation: styles.leafValue,
+    collapseIcon: clsx(defaultStyles.collapseIcon, styles.chevronIcon),
+    expandIcon: clsx(defaultStyles.expandIcon, styles.chevronIcon),
+    collapsedContent: clsx(
+      defaultStyles.collapsedContent,
+      styles.branchPreview
+    ),
   };
 }

app/react/components/form-components/ButtonSelector/ButtonSelector.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { PropsWithChildren, ReactNode } from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 import { AutomationTestingProps } from '@/types';
 
@@ -12,6 +12,7 @@ export interface Option<T> {
   value: T;
   label?: ReactNode;
   disabled?: boolean;
+  icon?: ComponentProps<typeof Button>['icon'];
 }
 
 interface Props<T> {
@@ -49,6 +50,7 @@ export function ButtonSelector<T extends string | number | boolean>({
           onChange={() => onChange(option.value)}
           disabled={disabled || option.disabled}
           readOnly={readOnly}
+          icon={option.icon}
         >
           {option.label || option.value.toString()}
         </OptionItem>
@@ -62,6 +64,7 @@ interface OptionItemProps {
   onChange(): void;
   disabled?: boolean;
   readOnly?: boolean;
+  icon?: ComponentProps<typeof Button>['icon'];
 }
 
 function OptionItem({
@@ -71,6 +74,7 @@ function OptionItem({
   disabled,
   readOnly,
   'data-cy': dataCy,
+  icon,
 }: PropsWithChildren<OptionItemProps> & AutomationTestingProps) {
   return (
     <Button
@@ -84,6 +88,7 @@ function OptionItem({
         '!static !z-auto'
       )}
       data-cy={dataCy}
+      icon={icon}
     >
       {children}
       <input