chore: update frontend dependencies (#2195)

This pull request includes several updates to the `frontend/webapp` project, focusing on dependency updates, type improvements, and refactoring of reusable components. The most important changes include updating dependencies in `package.json`, improving type definitions for React components, and refactoring the monitoring checkboxes component. ### Dependency Updates: * [`frontend/webapp/package.json`](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L14-R37): Updated multiple dependencies, including `@apollo/client`, `graphql`, `next`, `react`, and `typescript` to their latest versions. ### Type Improvements: * [`frontend/webapp/hooks/common/useOnClickOutside.ts`](diffhunk://#diff-10b0c59a5713cf46c8babbd395cf003553a8f54b757b1593968ebb32e0774c73L3-R3): Updated the `ref` parameter type in the `useOnClickOutside` hook to `React.RefObject<HTMLElement | null>`. * [`frontend/webapp/reuseable-components/badge/index.tsx`](diffhunk://#diff-5b2e817e2d630b757f44f84f327c95dc303dbbb5924fccb29c0055da353bd126R1-R5): Changed the `label` prop type from `JSX.Element` to `React.ReactNode`. * [`frontend/webapp/reuseable-components/data-tab/index.tsx`](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L19-R20): Updated the `renderExtended` and `renderActions` prop types from `JSX.Element` to `React.ReactNode`. * [`frontend/webapp/reuseable-components/fade-loader/index.tsx`](diffhunk://#diff-9c241dfa787c4d925e8e5ad0f74db81dd5dd4c0fb628f68ba66da4daf7cca634L40-R35): Updated the return type of the `FadeLoader` function from `JSX.Element | null` to `React.ReactNode | null`. ### Refactoring: * [`frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx`](diffhunk://#diff-b548a18fe8dc75a96aa84df48e9f1360b626d6d5640abdc1e925b5839630bde5L4-R4): Refactored the monitoring checkboxes component to use `MONITORS_OPTIONS` and updated the logic to handle the new structure of monitoring options. [[1]](diffhunk://#diff-b548a18fe8dc75a96aa84df48e9f1360b626d6d5640abdc1e925b5839630bde5L4-R4) [[2]](diffhunk://#diff-b548a18fe8dc75a96aa84df48e9f1360b626d6d5640abdc1e925b5839630bde5L29-R29) [[3]](diffhunk://#diff-b548a18fe8dc75a96aa84df48e9f1360b626d6d5640abdc1e925b5839630bde5L47-R49) [[4]](diffhunk://#diff-b548a18fe8dc75a96aa84df48e9f1360b626d6d5640abdc1e925b5839630bde5L82-R87) * [`frontend/webapp/utils/constants/monitors.tsx`](diffhunk://#diff-2d10cf3afe0daae8da71ac62534459526be574fcf9d6e0aea186730f33df3877L2-R22): Refactored the monitoring options constants to simplify the structure and remove unused properties.
odigos-io · Jan 12, 2025 · 24e94ba · 24e94ba
1 parent 2ac3bc1
commit 24e94ba
Show file tree

Hide file tree

Showing 10 changed files with 1,013 additions and 3,082 deletions.
diff --git a/frontend/webapp/components/overview/all-drawers/cli-drawer.tsx b/frontend/webapp/components/overview/all-drawers/cli-drawer.tsx
@@ -51,25 +51,23 @@ export const CliDrawer: React.FC<Props> = () => {
                     { columnKey: 'token', value: `${new Array(15).fill('•').join('')}` },
                     {
                       columnKey: 'actions',
-                      component: () => (
-                        <FlexRow $gap={0}>
-                          <IconButton size={32} onClick={() => clickCopy(token, idx)}>
-                            {isCopied && copiedIndex === idx ? getStatusIcon(NOTIFICATION_TYPE.SUCCESS)({}) : <CopyIcon />}
-                          </IconButton>
+                      component: () => {
+                        const SuccessIcon = getStatusIcon(NOTIFICATION_TYPE.SUCCESS);
 
-                          {/* <Divider orientation='vertical' length='12px' />
+                        return (
+                          <FlexRow $gap={0}>
+                            <IconButton size={32} onClick={() => clickCopy(token, idx)}>
+                              {isCopied && copiedIndex === idx ? <SuccessIcon /> : <CopyIcon />}
+                            </IconButton>
 
-                          <IconButton size={32} onClick={() => {}}>
-                            <EditIcon />
-                          </IconButton> */}
+                            {/* <Divider orientation='vertical' length='12px' />
 
-                          {/* <Divider orientation='vertical' length='12px' />
-
-                          <IconButton size={32} onClick={() => {}}>
-                            <TrashIcon />
-                          </IconButton> */}
-                        </FlexRow>
-                      ),
+                            <IconButton size={32} onClick={() => {}}>
+                              <EditIcon />
+                            </IconButton> */}
+                          </FlexRow>
+                        );
+                      },
                     },
                   ]),
                 },

diff --git a/frontend/webapp/hooks/common/useOnClickOutside.ts b/frontend/webapp/hooks/common/useOnClickOutside.ts
@@ -1,9 +1,6 @@
 import { useEffect } from 'react';
 
-export function useOnClickOutside(
-  ref: React.RefObject<HTMLElement>,
-  handler: () => void
-) {
+export function useOnClickOutside(ref: React.RefObject<HTMLElement | null>, handler: () => void) {
   useEffect(() => {
     const listener = (event: MouseEvent | TouchEvent) => {
       // Do nothing if clicking ref's element or descendent elements

diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
@@ -11,30 +11,29 @@
     "cy:open": "cypress open --e2e -b electron"
   },
   "dependencies": {
-    "@apollo/client": "^3.11.10",
-    "@apollo/experimental-nextjs-app-support": "^0.11.6",
-    "@keyval-dev/design-system": "^2.3.3",
-    "@xyflow/react": "^12.3.5",
-    "graphql": "^16.9.0",
+    "@apollo/client": "^3.12.5",
+    "@apollo/experimental-nextjs-app-support": "^0.11.7",
+    "@xyflow/react": "^12.3.6",
+    "graphql": "^16.10.0",
     "javascript-time-ago": "^2.5.11",
-    "next": "15.0.3",
+    "next": "15.1.4",
     "prism-react-renderer": "^2.4.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-flow-renderer": "^10.3.17",
-    "styled-components": "^6.1.13",
-    "zustand": "^5.0.1"
+    "styled-components": "^6.1.14",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@types/node": "22.9.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/node": "22.10.5",
+    "@types/react": "19.0.4",
+    "@types/react-dom": "19.0.2",
     "autoprefixer": "^10.4.20",
     "babel-plugin-styled-components": "^2.1.4",
-    "cypress": "^13.16.1",
-    "eslint": "9.15.0",
-    "eslint-config-next": "15.0.3",
+    "cypress": "^13.17.0",
+    "eslint": "9.18.0",
+    "eslint-config-next": "15.1.4",
     "postcss": "^8.4.49",
-    "typescript": "5.6.3"
+    "typescript": "5.7.3"
   }
 }
diff --git a/frontend/webapp/reuseable-components/badge/index.tsx b/frontend/webapp/reuseable-components/badge/index.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
-  label: string | number | JSX.Element;
+  label: string | number | React.ReactNode;
   filled?: boolean;
 }
 

diff --git a/frontend/webapp/reuseable-components/data-tab/index.tsx b/frontend/webapp/reuseable-components/data-tab/index.tsx
@@ -16,8 +16,8 @@ interface Props {
   isError?: boolean;
   withExtend?: boolean;
   isExtended?: boolean;
-  renderExtended?: () => JSX.Element;
-  renderActions?: () => JSX.Element;
+  renderExtended?: () => React.ReactNode;
+  renderActions?: () => React.ReactNode;
   onClick?: () => void;
 }
 

diff --git a/frontend/webapp/reuseable-components/fade-loader/index.tsx b/frontend/webapp/reuseable-components/fade-loader/index.tsx
@@ -6,8 +6,7 @@ import theme from '@/styles/theme';
 
 export type LengthType = number | string;
 
-interface CommonProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+interface CommonProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
   color?: string;
   loading?: boolean;
   cssOverride?: CSSProperties;
@@ -21,11 +20,7 @@ interface LoaderHeightWidthRadiusProps extends CommonProps {
   margin?: LengthType;
 }
 
-const fade = createAnimation(
-  'FadeLoader',
-  '50% {opacity: 0.3} 100% {opacity: 1}',
-  'fade'
-);
+const fade = createAnimation('FadeLoader', '50% {opacity: 0.3} 100% {opacity: 1}', 'fade');
 
 function FadeLoader({
   loading = true,
@@ -37,7 +32,7 @@ function FadeLoader({
   radius = 2,
   margin = 2,
   ...additionalprops
-}: LoaderHeightWidthRadiusProps): JSX.Element | null {
+}: LoaderHeightWidthRadiusProps): React.ReactNode | null {
   const { value } = parseLengthAndUnit(margin);
   const radiusValue = value + 4.2;
   const quarter = radiusValue / 2 + radiusValue / 5.5;
@@ -63,9 +58,7 @@ function FadeLoader({
       borderRadius: cssValue(radius),
       transition: '2s',
       animationFillMode: 'both',
-      animation: `${fade} ${1.2 / speedMultiplier}s ${
-        i * 0.12
-      }s infinite ease-in-out`,
+      animation: `${fade} ${1.2 / speedMultiplier}s ${i * 0.12}s infinite ease-in-out`,
     };
   };
 

diff --git a/frontend/webapp/reuseable-components/interactive-table/index.tsx b/frontend/webapp/reuseable-components/interactive-table/index.tsx
@@ -13,7 +13,7 @@ interface RowCell {
   columnKey: string; // used to bind the row cell to the column
   icon?: SVG;
   value?: string;
-  component?: () => JSX.Element;
+  component?: () => React.ReactNode;
 }
 
 interface Props {

diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Checkbox, FieldError, FieldLabel } from '@/reuseable-components';
-import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
+import { MONITORS_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
 
 interface Props {
   isVertical?: boolean;
@@ -26,7 +26,7 @@ const ListContainer = styled.div<{ $isVertical?: Props['isVertical']; $hasError:
     `}
 `;
 
-const monitors = MONITORING_OPTIONS;
+const monitors = MONITORS_OPTIONS;
 
 const isAllowed = (type: SignalLowercase, allowedSignals: Props['allowedSignals']) => {
   return !allowedSignals?.length || !!allowedSignals?.find((str) => str === type.toUpperCase());
@@ -44,9 +44,9 @@ export const MonitoringCheckboxes: React.FC<Props> = ({ isVertical, title = 'Mon
     const payload: SignalUppercase[] = selectedSignals;
 
     if (!payload.length) {
-      monitors.forEach(({ type }) => {
-        if (isAllowed(type, allowedSignals)) {
-          payload.push(type.toUpperCase() as SignalUppercase);
+      monitors.forEach(({ id }) => {
+        if (isAllowed(id, allowedSignals)) {
+          payload.push(id.toUpperCase() as SignalUppercase);
         }
       });
     }
@@ -79,12 +79,12 @@ export const MonitoringCheckboxes: React.FC<Props> = ({ isVertical, title = 'Mon
 
       <ListContainer $isVertical={isVertical} $hasError={!!errorMessage}>
         {monitors.map((monitor) => {
-          const allowed = isAllowed(monitor.type, allowedSignals);
-          const selected = isSelected(monitor.type, selectedSignals);
+          const allowed = isAllowed(monitor.id, allowedSignals);
+          const selected = isSelected(monitor.id, selectedSignals);
 
           if (!allowed) return null;
 
-          return <Checkbox key={monitor.id} title={monitor.title} disabled={!allowed || (isLastSelection && selected)} value={selected} onChange={(value) => handleChange(monitor.type, value)} />;
+          return <Checkbox key={monitor.id} title={monitor.value} disabled={!allowed || (isLastSelection && selected)} value={selected} onChange={(value) => handleChange(monitor.id, value)} />;
         })}
       </ListContainer>
 

diff --git a/frontend/webapp/utils/constants/monitors.tsx b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,64 +1,24 @@
 import { SETUP } from '@/utils/constants';
-import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
 
 export type SignalUppercase = 'TRACES' | 'METRICS' | 'LOGS';
 export type SignalLowercase = 'traces' | 'metrics' | 'logs';
 
 export type MonitoringOption = {
-  id: number;
-  type: SignalLowercase;
-  title: string;
-  tapped: boolean;
-  icons: {
-    notFocus: () => JSX.Element;
-    focus: () => JSX.Element;
-  };
+  id: SignalLowercase;
+  value: string;
 };
 
-export const MONITORING_OPTIONS: MonitoringOption[] = [
-  {
-    id: 1,
-    icons: {
-      notFocus: () => <LogsIcon />,
-      focus: () => <LogsFocusIcon />,
-    },
-    title: SETUP.MONITORS.LOGS,
-    type: 'logs',
-    tapped: true,
-  },
-  {
-    id: 2,
-    icons: {
-      notFocus: () => <MetricsIcon />,
-      focus: () => <MetricsFocusIcon />,
-    },
-    title: SETUP.MONITORS.METRICS,
-    type: 'metrics',
-    tapped: true,
-  },
-  {
-    id: 3,
-    icons: {
-      notFocus: () => <TraceIcon />,
-      focus: () => <TraceFocusIcon />,
-    },
-    title: SETUP.MONITORS.TRACES,
-    type: 'traces',
-    tapped: true,
-  },
-];
-
-export const MONITORS_OPTIONS = [
+export const MONITORS_OPTIONS: MonitoringOption[] = [
   {
     id: 'logs',
-    value: 'Logs',
+    value: SETUP.MONITORS.LOGS,
   },
   {
     id: 'metrics',
-    value: 'Metrics',
+    value: SETUP.MONITORS.METRICS,
   },
   {
     id: 'traces',
-    value: 'Traces',
+    value: SETUP.MONITORS.TRACES,
   },
 ];