[GEN-2169]: adjust title visibility for sources in overview (#2211)

This pull request includes several changes across different files to
improve the handling of UI elements and notifications. The most
important changes include adjustments to the title width in the
`overview-drawer`, enhancements to the `useSSE` hook for better
notification handling, and updates to the `DataTab` component to manage
title overflow and tooltips.

### UI Improvements:

*
[`frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx`](diffhunk://#diff-2410bbb07cf40a69a4bc6a34db093cdfcc2cb9d4b98b144a37a2c6a3e1a511ffL30-R30):
Reduced the maximum width of the `Title` component from 400px to 270px
to better fit the design.
*
[`frontend/webapp/reuseable-components/data-tab/index.tsx`](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006R24-R25):
Introduced a `MAX_TITLE_WIDTH` constant and updated the `Title`
component to use this constant. Added logic to handle title overflow by
displaying a tooltip when necessary.
[[1]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006R24-R25)
[[2]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L57-R68)
[[3]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006R111-R124)
[[4]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L139-R166)

### Notification Handling:

*
[`frontend/webapp/hooks/notification/useSSE.ts`](diffhunk://#diff-db9ebe0ce8cdabc0ede2f45de12661d55fb7aa50a5ecfc0787f5898c55b044d6L35-R36):
Modified the `useSSE` hook to refetch sources for both
`InstrumentationConfig` and `InstrumentationInstance` notification
types, improving the handling of these notifications.

### Codebase Enhancements:

*
[`frontend/webapp/reuseable-components/data-tab/index.tsx`](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L1-R5):
Added missing imports for `useEffect` and `useRef` to handle the new
title overflow logic.
*
[`frontend/webapp/reuseable-components/text/index.tsx`](diffhunk://#diff-7a8404854ee4398fbaa12fe211cc58436759a7b73b299d847fb52d770c86d9aaL1-R5):
Refactored the `Text` component to use `forwardRef` for better handling
of refs and updated the `TextProps` interface for type consistency.
[[1]](diffhunk://#diff-7a8404854ee4398fbaa12fe211cc58436759a7b73b299d847fb52d770c86d9aaL1-R5)
[[2]](diffhunk://#diff-7a8404854ee4398fbaa12fe211cc58436759a7b73b299d847fb52d770c86d9aaL34-R40)

frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx

@@ -27,7 +27,7 @@ const InputWrapper = styled(SectionItemsWrapper)`
 const Title = styled(Text)`
   font-size: 18px;
   line-height: 26px;
-  max-width: 400px;
+  max-width: 270px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

frontend/webapp/hooks/notification/useSSE.ts

@@ -32,9 +32,8 @@ export const useSSE = () => {
 
         addNotification(notification);
 
-        if (notification.crdType === 'InstrumentationConfig') {
-          // We handle update in CRUD hook, refetch only on create
-          if (['Added', 'Deleted'].includes(notification.title || '')) fetchSources(true);
+        if (['InstrumentationConfig', 'InstrumentationInstance'].includes(notification.crdType || '')) {
+          fetchSources(true);
         } else {
           refetchComputePlatform();
         }

frontend/webapp/hooks/tokens/useTokenCRUD.ts

@@ -38,10 +38,7 @@ export const useTokenCRUD = (params?: UseTokenCrudParams) => {
 
   const [updateToken, uState] = useMutation<{ updateApiToken: boolean }>(UPDATE_API_TOKEN, {
     onError: (error) => handleError(error.name || ACTION.UPDATE, error.cause?.message || error.message),
-    onCompleted: () => {
-      handleComplete(ACTION.UPDATE, 'API Token updated');
-      refetch();
-    },
+    onCompleted: () => handleComplete(ACTION.UPDATE, 'API Token updated'),
   });
 
   return {

frontend/webapp/reuseable-components/data-tab/index.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { SVG } from '@/assets';
 import { FlexColumn, FlexRow } from '@/styles';
 import styled, { css } from 'styled-components';
-import { ActiveStatus, Divider, ExtendIcon, IconButton, IconWrapped, MonitorsIcons, Text } from '@/reuseable-components';
+import { ActiveStatus, Divider, ExtendIcon, IconButton, IconWrapped, MonitorsIcons, Text, Tooltip } from '@/reuseable-components';
 
 interface Props {
   title: string;
@@ -21,6 +21,8 @@ interface Props {
   onClick?: () => void;
 }
 
+const MAX_TITLE_WIDTH = 160;
+
 const ControlledVisibility = styled.div`
   visibility: hidden;
 `;
@@ -54,11 +56,16 @@ const Container = styled.div<{ $withClick: boolean; $isError: Props['isError'] }
 `;
 
 const Title = styled(Text)`
-  max-width: 150px;
+  max-width: ${MAX_TITLE_WIDTH}px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 14px;
+  &::after {
+    // This is to prevent the browser "default tooltip" from appearing when the title is too long
+    content: '';
+    display: block;
+  }
 `;
 
 const SubTitleWrapper = styled.div`
@@ -101,6 +108,20 @@ export const DataTab: React.FC<Props> = ({
   ...props
 }) => {
   const [extend, setExtend] = useState(isExtended || false);
+  const [isTitleOverflowed, setIsTitleOverflowed] = useState(false);
+  const titleRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { current } = titleRef;
+
+    if (current) {
+      const { clientWidth } = current;
+      const marginUp = MAX_TITLE_WIDTH * 1.05; // add 5%
+      const marginDown = MAX_TITLE_WIDTH * 0.95; // subtract 5%
+
+      setIsTitleOverflowed(clientWidth < marginUp && clientWidth > marginDown);
+    }
+  }, [title]);
 
   const renderMonitors = useCallback(
     (withSeperator: boolean) => {
@@ -136,7 +157,13 @@ export const DataTab: React.FC<Props> = ({
         <IconWrapped icon={icon} src={iconSrc} isError={isError} />
 
         <FlexColumn $gap={4}>
-          <Title>{title}</Title>
+          {isTitleOverflowed ? (
+            <Tooltip text={title} withIcon={false}>
+              <Title ref={titleRef}>{title}</Title>
+            </Tooltip>
+          ) : (
+            <Title ref={titleRef}>{title}</Title>
+          )}
           <SubTitleWrapper>
             {subTitle && <SubTitle>{subTitle}</SubTitle>}
             {renderMonitors(!!subTitle)}

frontend/webapp/reuseable-components/text/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type DetailedHTMLProps, forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import styled from 'styled-components';
 
-interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  children: React.ReactNode;
+interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children: ReactNode;
   color?: string;
   size?: number;
   weight?: number;
@@ -31,12 +31,10 @@ const TextWrapper = styled.div<{
   font-family: ${({ theme, $family = 'primary' }) => theme.font_family[$family]};
 `;
 
-const Text: React.FC<TextProps> = ({ children, color, size, weight, align, family, opacity, decoration, ...props }) => {
+export const Text = forwardRef<HTMLDivElement, TextProps>(({ children, color, size, weight, align, family, opacity, decoration, ...props }, ref) => {
   return (
-    <TextWrapper $color={color} $size={size} $weight={weight} $align={align} $family={family} $opacity={opacity} $decoration={decoration} {...props}>
+    <TextWrapper ref={ref} $color={color} $size={size} $weight={weight} $align={align} $family={family} $opacity={opacity} $decoration={decoration} {...props}>
       {children}
     </TextWrapper>
   );
-};
-
-export { Text };
+});