[GEN-1730]: add "describe odigos" to UI

frontend/webapp/components/describe-odigos/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import { IconButton } from '@/reuseable-components';
+import { DRAWER_OTHER_TYPES, useDrawerStore } from '@/store';
+
+export const DescribeOdigos = () => {
+  const { setSelectedItem } = useDrawerStore();
+  const handleClick = () => setSelectedItem({ type: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS, id: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS });
+
+  return (
+    <IconButton onClick={handleClick} withPing pingColor={theme.colors.majestic_blue}>
+      <Image src='/brand/odigos-icon.svg' alt='logo' width={16} height={16} />
+    </IconButton>
+  );
+};

frontend/webapp/components/index.ts

@@ -1,6 +1,7 @@
-export * from './setup';
-export * from './overview';
 export * from './common';
+export * from './describe-odigos';
 export * from './main';
 export * from './modals';
 export * from './notification';
+export * from './overview';
+export * from './setup';

frontend/webapp/components/main/header/index.tsx

@@ -6,7 +6,7 @@ import { PlatformTypes } from '@/types';
 import { PlatformTitle } from './cp-title';
 import { useConnectionStore } from '@/store';
 import { ConnectionStatus } from '@/reuseable-components';
-import { NotificationManager } from '@/components/notification';
+import { DescribeOdigos, NotificationManager } from '@/components';
 
 interface MainHeaderProps {}
 
@@ -42,6 +42,7 @@ export const MainHeader: React.FC<MainHeaderProps> = () => {
 
       <AlignRight>
         <NotificationManager />
+        <DescribeOdigos />
       </AlignRight>
     </HeaderContainer>
   );

frontend/webapp/components/notification/notification-manager.tsx

@@ -6,32 +6,8 @@ import { useNotificationStore } from '@/store';
 import { ACTION, getStatusIcon } from '@/utils';
 import { useOnClickOutside, useTimeAgo } from '@/hooks';
 import theme, { hexPercentValues } from '@/styles/theme';
-import { NoDataFound, Text } from '@/reuseable-components';
 import type { Notification, NotificationType } from '@/types';
-
-const BellIcon = styled.div`
-  position: relative;
-  width: 36px;
-  height: 36px;
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.white_opacity['008']};
-  }
-`;
-
-const LiveBadge = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 6px;
-  height: 6px;
-  border-radius: 100%;
-  background-color: ${({ theme }) => theme.colors.orange_og};
-`;
+import { IconButton, NoDataFound, Text } from '@/reuseable-components';
 
 const RelativeContainer = styled.div`
   position: relative;
@@ -106,10 +82,9 @@ export const NotificationManager = () => {
 
   return (
     <RelativeContainer ref={containerRef}>
-      <BellIcon onClick={toggleOpen}>
-        {!!unseenCount && <LiveBadge />}
+      <IconButton onClick={toggleOpen} withPing={!!unseenCount} pingColor={theme.colors.orange_og}>
         <Image src='/icons/common/notification.svg' alt='logo' width={16} height={16} />
-      </BellIcon>
+      </IconButton>
 
       {isOpen && (
         <AbsoluteContainer>

frontend/webapp/components/overview/all-drawers/describe-drawer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useDescribeOdigos } from '@/hooks';
+import { DATA_CARDS, safeJsonStringify } from '@/utils';
+import { DataCard, DataCardFieldTypes } from '@/reuseable-components';
+import OverviewDrawer from '@/containers/main/overview/overview-drawer';
+
+interface Props {}
+
+const DataContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const DescribeDrawer: React.FC<Props> = () => {
+  const { data: describe } = useDescribeOdigos();
+
+  return (
+    <OverviewDrawer title={DATA_CARDS.DESCRIBE_ODIGOS} titleTooltip='' imageUri='/brand/odigos-icon.svg'>
+      <DataContainer>
+        <DataCard
+          title=''
+          data={[
+            {
+              type: DataCardFieldTypes.CODE,
+              value: JSON.stringify({ language: 'json', code: safeJsonStringify(describe) }),
+            },
+          ]}
+        />
+      </DataContainer>
+    </OverviewDrawer>
+  );
+};

frontend/webapp/components/overview/all-drawers/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { useDrawerStore } from '@/store';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { DescribeDrawer } from './describe-drawer';
+import { DRAWER_OTHER_TYPES, useDrawerStore } from '@/store';
 import { ActionDrawer, DestinationDrawer, RuleDrawer, SourceDrawer } from '@/containers';
 
 const AllDrawers = () => {
   const selected = useDrawerStore(({ selectedItem }) => selectedItem);
 
-  if (!selected?.item) return null;
+  if (!selected?.type) return null;
 
   switch (selected.type) {
     case OVERVIEW_ENTITY_TYPES.RULE:
@@ -21,6 +22,9 @@ const AllDrawers = () => {
     case OVERVIEW_ENTITY_TYPES.DESTINATION:
       return <DestinationDrawer />;
 
+    case DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS:
+      return <DescribeDrawer />;
+
     default:
       return <></>;
   }

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

@@ -66,9 +66,9 @@ export interface DrawerHeaderRef {
 interface DrawerHeaderProps {
   title: string;
   titleTooltip?: string;
-  imageUri: string;
-  isEdit: boolean;
-  onEdit: () => void;
+  imageUri?: string;
+  isEdit?: boolean;
+  onEdit?: () => void;
   onClose: () => void;
 }
 
@@ -87,9 +87,12 @@ const DrawerHeader = forwardRef<DrawerHeaderRef, DrawerHeaderProps>(({ title, ti
   return (
     <HeaderContainer>
       <SectionItemsWrapper>
-        <DrawerItemImageWrapper>
-          <Image src={imageUri} alt='Drawer Item' width={16} height={16} />
-        </DrawerItemImageWrapper>
+        {!!imageUri && (
+          <DrawerItemImageWrapper>
+            <Image src={imageUri} alt='Drawer Item' width={16} height={16} />
+          </DrawerItemImageWrapper>
+        )}
+
         {!isEdit && (
           <Tooltip text={titleTooltip} withIcon>
             <Title>{title}</Title>
@@ -105,12 +108,13 @@ const DrawerHeader = forwardRef<DrawerHeaderRef, DrawerHeaderProps>(({ title, ti
       )}
 
       <SectionItemsWrapper $gap={8}>
-        {!isEdit && (
+        {!isEdit && !!onEdit && (
           <EditButton data-id='drawer-edit' variant='tertiary' onClick={onEdit}>
             <Image src='/icons/common/edit.svg' alt='Edit' width={16} height={16} />
             <ButtonText>Edit</ButtonText>
           </EditButton>
         )}
+
         <CloseButton data-id='drawer-close' variant='secondary' onClick={onClose}>
           <Image src='/icons/common/x.svg' alt='Close' width={12} height={12} />
         </CloseButton>

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

@@ -14,12 +14,12 @@ interface Props {
   title: string;
   titleTooltip?: string;
   imageUri: string;
-  isEdit: boolean;
-  isFormDirty: boolean;
-  onEdit: (bool?: boolean) => void;
-  onSave: (newTitle: string) => void;
-  onDelete: () => void;
-  onCancel: () => void;
+  isEdit?: boolean;
+  isFormDirty?: boolean;
+  onEdit?: (bool?: boolean) => void;
+  onSave?: (newTitle: string) => void;
+  onDelete?: () => void;
+  onCancel?: () => void;
 }
 
 const DrawerContent = styled.div`
@@ -34,7 +34,7 @@ const ContentArea = styled.div`
   overflow-y: auto;
 `;
 
-const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title, titleTooltip, imageUri, isEdit, isFormDirty, onEdit, onSave, onDelete, onCancel }) => {
+const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title, titleTooltip, imageUri, isEdit = false, isFormDirty = false, onEdit, onSave, onDelete, onCancel }) => {
   const { selectedItem, setSelectedItem } = useDrawerStore();
 
   useKeyDown({ key: 'Enter', active: !!selectedItem }, () => (isEdit ? clickSave() : closeDrawer()));
@@ -52,7 +52,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
 
   const closeDrawer = () => {
     setSelectedItem(null);
-    onEdit(false);
+    if (onEdit) onEdit(false);
     setIsDeleteModalOpen(false);
     setIsCancelModalOpen(false);
   };
@@ -64,7 +64,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
 
   const handleCancel = () => {
     titleRef.current?.clearTitle();
-    onCancel();
+    if (onCancel) onCancel();
     closeWarningModals();
   };
 
@@ -78,7 +78,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
   };
 
   const handleDelete = () => {
-    onDelete();
+    if (onDelete) onDelete();
     closeWarningModals();
   };
 
@@ -87,7 +87,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
   };
 
   const clickSave = () => {
-    onSave(titleRef.current?.getTitle() || '');
+    if (onSave) onSave(titleRef.current?.getTitle() || '');
   };
 
   const isLastItem = () => {
@@ -103,7 +103,15 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
     <>
       <Drawer isOpen onClose={isEdit ? clickCancel : closeDrawer} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen && !isCancelModalOpen}>
         <DrawerContent>
-          <DrawerHeader ref={titleRef} title={title} titleTooltip={titleTooltip} imageUri={imageUri} isEdit={isEdit} onEdit={() => onEdit(true)} onClose={isEdit ? clickCancel : closeDrawer} />
+          <DrawerHeader
+            ref={titleRef}
+            title={title}
+            titleTooltip={titleTooltip}
+            imageUri={imageUri}
+            isEdit={isEdit}
+            onEdit={onEdit ? () => onEdit(true) : undefined}
+            onClose={isEdit ? clickCancel : closeDrawer}
+          />
           <ContentArea>{children}</ContentArea>
           <DrawerFooter isOpen={isEdit} onSave={clickSave} onCancel={clickCancel} onDelete={clickDelete} deleteLabel={isSource ? 'Uninstrument' : undefined} />
         </DrawerContent>
@@ -113,7 +121,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({ children, title,
         isOpen={isDeleteModalOpen}
         noOverlay
         name={`${selectedItem?.type}${title ? ` (${title})` : ''}`}
-        type={selectedItem?.type}
+        type={selectedItem?.type as OVERVIEW_ENTITY_TYPES}
         isLastItem={isLastItem()}
         onApprove={handleDelete}
         onDeny={closeWarningModals}