[GEN-2291]: use all components from @odigos/ui-components (#2343)

Refactor: Moved files to `@odigos/ui-components`, and then used via import.
odigos-io · Feb 3, 2025 · 1ea4c3a · 1ea4c3a
1 parent b691cda
commit 1ea4c3a
Show file tree

Hide file tree

Showing 220 changed files with 811 additions and 6,267 deletions.
diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -1,10 +1,9 @@
 'use client';
-import './globals.css';
 import React from 'react';
 import { METADATA } from '@/utils';
 import { ApolloWrapper } from '@/lib';
-import { useDarkModeStore } from '@/store';
 import { ThemeProvider } from '@/styles';
+import { useDarkModeStore } from '@/store';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const { darkMode } = useDarkModeStore();
@@ -18,7 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <title>{METADATA.title}</title>
       </head>
       <ApolloWrapper>
-        <ThemeProvider>
+        <ThemeProvider darkMode={darkMode}>
           <body
             suppressHydrationWarning={true}
             style={{

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
@@ -3,8 +3,7 @@ import { useEffect } from 'react';
 import { useConfig } from '@/hooks';
 import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
-import { CenterThis } from '@odigos/ui-components';
-import { FadeLoader } from '@/reuseable-components';
+import { CenterThis, FadeLoader } from '@odigos/ui-components';
 
 export default function App() {
   const router = useRouter();
@@ -24,7 +23,7 @@ export default function App() {
 
   return (
     <CenterThis style={{ height: '100%' }}>
-      <FadeLoader style={{ scale: 2 }} />
+      <FadeLoader scale={2} />
     </CenterThis>
   );
 }
diff --git a/frontend/webapp/components/common/buttons/index.ts b/frontend/webapp/components/common/buttons/index.ts
@@ -1,2 +1 @@
-export * from './toggle-code-component';
-export * from './toggle-dark-mode';
+export * from './selection-button';
diff --git a/...ponents/button/selection-button/index.tsx → ...common/buttons/selection-button/index.tsx b/...ponents/button/selection-button/index.tsx → ...common/buttons/selection-button/index.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
-import { Button } from '..';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { Theme, Types } from '@odigos/ui-components';
-import { Badge, Text } from '@/reuseable-components';
+import { Badge, Button, type SVG, Text, Theme } from '@odigos/ui-components';
 
 interface Props {
   label: string;
   onClick: () => void;
-  icon?: Types.SVG;
+  icon?: SVG;
   iconSrc?: string;
   badgeLabel?: string | number;
   badgeFilled?: boolean;

diff --git a/frontend/webapp/components/common/buttons/toggle-code-component/index.tsx b/frontend/webapp/components/common/buttons/toggle-code-component/index.tsx
diff --git a/frontend/webapp/components/common/buttons/toggle-dark-mode/index.tsx b/frontend/webapp/components/common/buttons/toggle-dark-mode/index.tsx
diff --git a/frontend/webapp/components/common/dropdowns/error-dropdown/index.tsx b/frontend/webapp/components/common/dropdowns/error-dropdown/index.tsx
@@ -1,14 +1,13 @@
 import React, { useMemo } from 'react';
 import { useSourceCRUD } from '@/hooks';
-import { DropdownOption } from '@/types';
 import { BACKEND_BOOLEAN } from '@/utils';
-import { Dropdown } from '@/reuseable-components';
+import { Dropdown, type DropdownProps } from '@odigos/ui-components';
 
 interface Props {
   title?: string;
-  value?: DropdownOption[];
-  onSelect: (val: DropdownOption) => void;
-  onDeselect: (val: DropdownOption) => void;
+  value?: DropdownProps['options'];
+  onSelect: (val: DropdownProps['options'][0]) => void;
+  onDeselect: (val: DropdownProps['options'][0]) => void;
   isMulti?: boolean;
   required?: boolean;
   showSearch?: boolean;
@@ -18,7 +17,7 @@ export const ErrorDropdown: React.FC<Props> = ({ title = 'Error Message', value,
   const { sources } = useSourceCRUD();
 
   const options = useMemo(() => {
-    const payload: DropdownOption[] = [];
+    const payload: DropdownProps['options'] = [];
 
     sources.forEach(({ conditions = [] }) => {
       conditions.forEach(({ status, message }) => {

diff --git a/frontend/webapp/components/common/dropdowns/language-dropdown/index.tsx b/frontend/webapp/components/common/dropdowns/language-dropdown/index.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
 import { useSourceCRUD } from '@/hooks';
-import { DropdownOption } from '@/types';
-import { Dropdown } from '@/reuseable-components';
+import { Dropdown, type DropdownProps } from '@odigos/ui-components';
 
 interface Props {
   title?: string;
-  value?: DropdownOption[];
-  onSelect: (val: DropdownOption) => void;
-  onDeselect: (val: DropdownOption) => void;
+  value?: DropdownProps['options'];
+  onSelect: (val: DropdownProps['options'][0]) => void;
+  onDeselect: (val: DropdownProps['options'][0]) => void;
   isMulti?: boolean;
   required?: boolean;
   showSearch?: boolean;
@@ -17,7 +16,7 @@ export const LanguageDropdown: React.FC<Props> = ({ title = 'Programming Languag
   const { sources } = useSourceCRUD();
 
   const options = useMemo(() => {
-    const payload: DropdownOption[] = [];
+    const payload: DropdownProps['options'] = [];
 
     sources.forEach(({ containers }) => {
       containers?.forEach(({ language }) => {

diff --git a/frontend/webapp/components/common/dropdowns/monitor-dropdown/index.tsx b/frontend/webapp/components/common/dropdowns/monitor-dropdown/index.tsx
@@ -1,26 +1,22 @@
 import React, { useMemo } from 'react';
-import { MONITORS_OPTIONS } from '@/utils';
-import type { DropdownOption } from '@/types';
-import { Dropdown } from '@/reuseable-components';
+import { Dropdown, MONITORS_OPTIONS, type DropdownProps } from '@odigos/ui-components';
 
 interface Props {
   title?: string;
-  value?: DropdownOption[];
-  onSelect: (val: DropdownOption) => void;
-  onDeselect: (val: DropdownOption) => void;
+  value?: DropdownProps['options'];
+  onSelect: (val: DropdownProps['options'][0]) => void;
+  onDeselect: (val: DropdownProps['options'][0]) => void;
   isMulti?: boolean;
   required?: boolean;
   showSearch?: boolean;
 }
 
 export const MonitorDropdown: React.FC<Props> = ({ title = 'Monitors', value, onSelect, onDeselect, ...props }) => {
   const options = useMemo(() => {
-    const payload: DropdownOption[] = [];
+    const payload: DropdownProps['options'] = [];
 
     MONITORS_OPTIONS.forEach(({ id, value }) => {
-      if (!payload.find((opt) => opt.id === id)) {
-        payload.push({ id, value });
-      }
+      if (!payload.find((opt) => opt.id === id)) payload.push({ id, value });
     });
 
     return payload;

diff --git a/frontend/webapp/components/common/dropdowns/namespace-dropdown/index.tsx b/frontend/webapp/components/common/dropdowns/namespace-dropdown/index.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
 import { useNamespace } from '@/hooks';
-import type { DropdownOption } from '@/types';
-import { Dropdown } from '@/reuseable-components';
+import { Dropdown, type DropdownProps } from '@odigos/ui-components';
 
 interface Props {
   title?: string;
-  value?: DropdownOption;
-  onSelect: (val: DropdownOption) => void;
-  onDeselect: (val: DropdownOption) => void;
+  value?: DropdownProps['options'][0];
+  onSelect: (val: DropdownProps['options'][0]) => void;
+  onDeselect: (val: DropdownProps['options'][0]) => void;
   isMulti?: boolean;
   required?: boolean;
   showSearch?: boolean;
@@ -17,7 +16,7 @@ export const NamespaceDropdown: React.FC<Props> = ({ title = 'Namespace', value,
   const { allNamespaces } = useNamespace();
 
   const options = useMemo(() => {
-    const payload: DropdownOption[] = [];
+    const payload: DropdownProps['options'] = [];
 
     allNamespaces?.forEach(({ name: id }) => {
       if (!payload.find((opt) => opt.id === id)) {

diff --git a/frontend/webapp/components/common/dropdowns/type-dropdown/index.tsx b/frontend/webapp/components/common/dropdowns/type-dropdown/index.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
 import { useSourceCRUD } from '@/hooks';
-import type { DropdownOption } from '@/types';
-import { Dropdown } from '@/reuseable-components';
+import { Dropdown, type DropdownProps } from '@odigos/ui-components';
 
 interface Props {
   title?: string;
-  value?: DropdownOption[];
-  onSelect: (val: DropdownOption) => void;
-  onDeselect: (val: DropdownOption) => void;
+  value?: DropdownProps['options'];
+  onSelect: (val: DropdownProps['options'][0]) => void;
+  onDeselect: (val: DropdownProps['options'][0]) => void;
   isMulti?: boolean;
   required?: boolean;
   showSearch?: boolean;
@@ -17,7 +16,7 @@ export const TypeDropdown: React.FC<Props> = ({ title = 'Type', value, onSelect,
   const { sources } = useSourceCRUD();
 
   const options = useMemo(() => {
-    const payload: DropdownOption[] = [];
+    const payload: DropdownProps['options'] = [];
 
     sources.forEach(({ kind: id }) => {
       if (!payload.find((opt) => opt.id === id)) {

diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
@@ -1,6 +1,5 @@
 export * from './common';
 export * from './main';
-export * from './modals';
 export * from './notification';
 export * from './overview';
 export * from './setup';
diff --git a/frontend/webapp/components/main/header/cp-title/index.tsx b/frontend/webapp/components/main/header/cp-title/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import { PlatformTypes } from '@/types';
-import { Text } from '@/reuseable-components';
-import { K8sLogo } from '@odigos/ui-components';
 import styled, { useTheme } from 'styled-components';
+import { K8sLogo, PLATFORM_TYPE, Text } from '@odigos/ui-components';
 
 interface Props {
-  type: PlatformTypes;
+  type: PLATFORM_TYPE;
 }
 
 const Container = styled.div`
@@ -35,7 +33,7 @@ const LogoWrap = styled.div`
 export const PlatformTitle: React.FC<Props> = ({ type }) => {
   const theme = useTheme();
 
-  if (type === PlatformTypes.K8S) {
+  if (type === PLATFORM_TYPE.K8S) {
     return (
       <Container>
         <LogoWrap>