Address code review feedback: security, responsive design, and code deduplication

client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts

@@ -1,35 +1,52 @@
 import { useState, useCallback } from 'react';
+import { useNotifications } from '../../../../../../../../shared/hooks/use-notification';
 
 const useOpenAIIntegrationV1 = () => {
   const [apiKey, setApiKey] = useState<string>('');
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const { addNotification } = useNotifications();
 
   const handleConnect = useCallback(async () => {
     setLoading(true);
     try {
       // TODO: Implement the logic to connect to OpenAI
       setIsConnected(true);
-      setApiKey(apiKey);
+      addNotification({
+        message: 'Successfully connected to OpenAI',
+        type: 'success',
+      });
     } catch (error) {
       console.error(error);
+      addNotification({
+        message: 'Failed to connect to OpenAI. Please try again.',
+        type: 'error',
+      });
     } finally {
       setLoading(false);
     }
-  }, [apiKey]);
+  }, [addNotification]);
 
   const handleDisconnect = useCallback(async () => {
     setLoading(true);
     try {
       // TODO: Implement the logic to disconnect from OpenAI
       setIsConnected(false);
       setApiKey('');
+      addNotification({
+        message: 'Successfully disconnected from OpenAI',
+        type: 'success',
+      });
     } catch (error) {
       console.error(error);
+      addNotification({
+        message: 'Failed to disconnect from OpenAI. Please try again.',
+        type: 'error',
+      });
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [addNotification]);
 
   return {
     apiKey,

client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx

@@ -38,7 +38,7 @@ const OpenAI = () => {
             id="openai-api-key"
             name="apiKey"
             type={isConnected ? 'text' : 'password'}
-            value={isConnected ? '*'.repeat(apiKey.length) : apiKey}
+            value={isConnected ? '••••••••••••••••' : apiKey}
             placeholder={
               isConnected
                 ? 'Your API key is connected and encrypted'
@@ -49,7 +49,7 @@ const OpenAI = () => {
             autoComplete="off"
             autoFocus={!isConnected && !loading}
             sx={{
-              width: '50%',
+              width: { xs: '100%', md: '50%' },
               '& .MuiOutlinedInput-root': {
                 bgcolor: 'background.paper',
               },

client/src/modules/settings/modules/integrations/v1/index.tsx

@@ -1,22 +1,19 @@
-import { Box, ButtonBase, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import { Routes } from 'react-router-dom';
-import LockIcon from '@mui/icons-material/Lock';
 import { SETTINGS_SIDEBAR_WIDTH } from '../../../v1/constants';
 import useIntegrationsSettingsV1 from './hooks';
-import A2ZTypography from '../../../../../shared/components/atoms/typography';
-import { useCustomNavigate } from '../../../../../shared/hooks/use-custom-navigate';
 import { useDevice } from '../../../../../shared/hooks/use-device';
 import {
   ROUTES_SETTINGS_V1,
   ROUTES_V1,
 } from '../../../../app/routes/constants/routes';
 import IntegrationsHeader from './components/integrations-header';
 import { IntegrationSettingType } from '../../../v1/typings';
+import SidebarItem from '../../../v1/components/sidebar-item';
 
 const Integrations = () => {
   const theme = useTheme();
   const { isMobileOrTablet } = useDevice();
-  const navigate = useCustomNavigate();
   const { integrations, routes, integrationId, activeIntegration } =
     useIntegrationsSettingsV1();
 
@@ -90,138 +87,25 @@ const Integrations = () => {
         >
           {integrations.map(
             (integration: IntegrationSettingType, index: number) => {
-              const {
-                id,
-                integrationSlug,
-                name,
-                icon,
-                description,
-                locked = false,
-              } = integration;
+              const { id, integrationSlug, name, icon, description, locked } =
+                integration;
               const absolutePath = `${ROUTES_V1.SETTINGS}${ROUTES_SETTINGS_V1.INTEGRATIONS}/${integrationSlug}`;
               const isTabActive = integrationId === id;
+              const isLastItem = index === integrations.length - 1;
 
               return (
-                <ButtonBase<'div'>
+                <SidebarItem
                   key={id || index}
-                  component="div"
-                  sx={{
-                    width: '100%',
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'flex-start',
-                    alignItems: 'flex-start',
-                    rowGap: 0.25,
-                    borderBottom:
-                      index < integrations.length - 1
-                        ? `1px solid ${theme.palette.divider}`
-                        : 'none',
-                    bgcolor: isTabActive
-                      ? theme.palette.mode === 'dark'
-                        ? 'rgba(59, 130, 246, 0.1)'
-                        : 'rgba(240, 245, 240, 1)'
-                      : 'transparent',
-                    boxShadow: 'none',
-                    outline: 'none',
-                    transition: 'background-color 200ms ease-in-out',
-                    '&:hover': {
-                      bgcolor: isTabActive
-                        ? theme.palette.mode === 'dark'
-                          ? 'rgba(59, 130, 246, 0.15)'
-                          : 'rgba(240, 245, 240, 0.68)'
-                        : 'action.hover',
-                      boxShadow: 'none',
-                      outline: 'none',
-                    },
-                  }}
-                  disabled={locked}
-                  onClick={() => {
-                    if (locked) {
-                      return;
-                    }
-                    navigate({ pathname: absolutePath });
-                  }}
-                >
-                  <Box
-                    sx={{
-                      width: '100%',
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      columnGap: 1.5,
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        justifyContent: 'flex-start',
-                        alignItems: 'center',
-                        columnGap: 1.5,
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          position: 'relative',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          color: isTabActive
-                            ? 'primary.main'
-                            : 'text.secondary',
-                        }}
-                      >
-                        {icon}
-                        {locked && (
-                          <LockIcon
-                            sx={{
-                              ml: 'auto',
-                              height: 15,
-                              width: 15,
-                              bgcolor: 'background.default',
-                              p: 0.25,
-                              borderRadius: '50%',
-                              border: `1px solid ${theme.palette.divider}`,
-                              position: 'absolute',
-                              right: -4,
-                              top: -6,
-                              fontSize: 15,
-                              color: 'text.secondary',
-                            }}
-                          />
-                        )}
-                      </Box>
-                      <A2ZTypography
-                        text={name}
-                        variant="body1"
-                        props={{
-                          sx: {
-                            fontSize: 16,
-                            fontWeight: 600,
-                            color: isTabActive
-                              ? 'primary.main'
-                              : 'text.primary',
-                          },
-                          'data-testid': `integration-${name}`,
-                        }}
-                      />
-                    </Box>
-                  </Box>
-                  {description && (
-                    <A2ZTypography
-                      text={description}
-                      variant="body2"
-                      props={{
-                        sx: {
-                          fontSize: 14,
-                          fontWeight: 400,
-                          color: 'text.secondary',
-                          pl: 'calc(20px + 12px)',
-                        },
-                      }}
-                    />
-                  )}
-                </ButtonBase>
+                  id={id}
+                  name={name}
+                  description={description}
+                  icon={icon}
+                  path={absolutePath}
+                  locked={locked}
+                  isActive={isTabActive}
+                  isLastItem={isLastItem}
+                  testId={`integration-${name}`}
+                />
               );
             }
           )}

client/src/modules/settings/routes/index.tsx

@@ -34,7 +34,6 @@ export const settingsRoutes = ({
       path: ROUTES_SETTINGS_V1.INTEGRATIONS,
       name: 'Integrations',
       description: 'Manage your integrations',
-      locked: false,
     },
   ];
 
@@ -85,12 +84,10 @@ export const integrationsRoutes = ({
   const integrations: IntegrationSettingType[] = [
     {
       id: 'openai',
-      type: 'integration',
       integrationSlug: 'openai',
-      icon: <OpenAIIcon width={24} height={24} />,
+      icon: <OpenAIIcon width={20} height={20} />,
       name: 'OpenAI',
       description: 'Setup your OpenAI integration',
-      locked: false,
     },
   ];