From 4ecc5777b941bf0f91caeab948714fc23172b7d6 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Wed, 18 Dec 2024 13:49:05 +0000
Subject: [PATCH] fix: pr comments

---
 .../components/primitives/secret-input.tsx    |  3 +-
 .../components/create-integration-sidebar.tsx |  2 +-
 .../components/hooks/use-integration-list.ts  | 54 +++++++++++++------
 .../components/integration-credentials.tsx    |  4 +-
 .../integration-general-settings.tsx          |  2 +-
 5 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/apps/dashboard/src/components/primitives/secret-input.tsx b/apps/dashboard/src/components/primitives/secret-input.tsx
index 8794d7c5eda..f2c574cc292 100644
--- a/apps/dashboard/src/components/primitives/secret-input.tsx
+++ b/apps/dashboard/src/components/primitives/secret-input.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 import { Input } from './input';
 import { Button } from './button';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_OFF } from '../../utils/constants';
 
 interface SecretInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   register?: any;
@@ -16,7 +17,7 @@ export function SecretInput({ className, register, registerKey, registerOptions,
 
   return (
     <>
-      <Input type={revealed ? 'text' : 'password'} {...inputProps} />
+      <Input type={revealed ? 'text' : 'password'} {...AUTOCOMPLETE_PASSWORD_MANAGERS_OFF} {...inputProps} />
       <Button
         type="button"
         variant="ghost"
diff --git a/apps/dashboard/src/pages/integrations/components/create-integration-sidebar.tsx b/apps/dashboard/src/pages/integrations/components/create-integration-sidebar.tsx
index 83f800308f4..2071318037e 100644
--- a/apps/dashboard/src/pages/integrations/components/create-integration-sidebar.tsx
+++ b/apps/dashboard/src/pages/integrations/components/create-integration-sidebar.tsx
@@ -43,7 +43,7 @@ export function CreateIntegrationSidebar({ isOpened }: CreateIntegrationSidebarP
     onBack: handleBack,
   });
 
-  const { integrationsByChannel } = useIntegrationList(providers, searchQuery);
+  const { integrationsByChannel } = useIntegrationList(searchQuery);
   const provider = providers?.find((p) => p.id === (selectedIntegration || providerId));
   const {
     isPrimaryModalOpen,
diff --git a/apps/dashboard/src/pages/integrations/components/hooks/use-integration-list.ts b/apps/dashboard/src/pages/integrations/components/hooks/use-integration-list.ts
index c6885e4daed..e2c524ef611 100644
--- a/apps/dashboard/src/pages/integrations/components/hooks/use-integration-list.ts
+++ b/apps/dashboard/src/pages/integrations/components/hooks/use-integration-list.ts
@@ -1,31 +1,52 @@
 import { useMemo } from 'react';
-import { ChannelTypeEnum, IProviderConfig } from '@novu/shared';
+import { ChannelTypeEnum, ChatProviderIdEnum, IProviderConfig, PushProviderIdEnum } from '@novu/shared';
+import { providers, EmailProviderIdEnum, SmsProviderIdEnum } from '@novu/shared';
+import { ProvidersIdEnum } from '@novu/shared';
 
-export function useIntegrationList(providers: IProviderConfig[] | undefined, searchQuery: string = '') {
+export function useIntegrationList(searchQuery: string = '') {
   const filteredIntegrations = useMemo(() => {
     if (!providers) return [];
 
     const filtered = providers.filter(
       (provider: IProviderConfig) =>
         provider.displayName.toLowerCase().includes(searchQuery.toLowerCase()) &&
-        provider.id !== 'novu-email' &&
-        provider.id !== 'novu-sms'
+        provider.id !== EmailProviderIdEnum.Novu &&
+        provider.id !== SmsProviderIdEnum.Novu
     );
 
-    const popularityOrder: Record<ChannelTypeEnum, string[]> = {
+    const popularityOrder: Record<ChannelTypeEnum, ProvidersIdEnum[]> = {
       [ChannelTypeEnum.EMAIL]: [
-        'sendgrid',
-        'mailgun',
-        'postmark',
-        'mailjet',
-        'mandrill',
-        'ses',
-        'outlook365',
-        'custom-smtp',
+        EmailProviderIdEnum.SendGrid,
+        EmailProviderIdEnum.Mailgun,
+        EmailProviderIdEnum.Postmark,
+        EmailProviderIdEnum.Mailjet,
+        EmailProviderIdEnum.Mandrill,
+        EmailProviderIdEnum.SES,
+        EmailProviderIdEnum.Outlook365,
+        EmailProviderIdEnum.CustomSMTP,
+      ],
+      [ChannelTypeEnum.SMS]: [
+        SmsProviderIdEnum.Twilio,
+        SmsProviderIdEnum.Plivo,
+        SmsProviderIdEnum.SNS,
+        SmsProviderIdEnum.Nexmo,
+        SmsProviderIdEnum.Telnyx,
+        SmsProviderIdEnum.Sms77,
+        SmsProviderIdEnum.Infobip,
+        SmsProviderIdEnum.Gupshup,
+      ],
+      [ChannelTypeEnum.PUSH]: [
+        PushProviderIdEnum.FCM,
+        PushProviderIdEnum.EXPO,
+        PushProviderIdEnum.APNS,
+        PushProviderIdEnum.OneSignal,
+      ],
+      [ChannelTypeEnum.CHAT]: [
+        ChatProviderIdEnum.Slack,
+        ChatProviderIdEnum.Discord,
+        ChatProviderIdEnum.MsTeams,
+        ChatProviderIdEnum.Mattermost,
       ],
-      [ChannelTypeEnum.SMS]: ['twilio', 'plivo', 'sns', 'nexmo', 'telnyx', 'sms77', 'infobip', 'gupshup'],
-      [ChannelTypeEnum.PUSH]: ['fcm', 'expo', 'apns', 'one-signal'],
-      [ChannelTypeEnum.CHAT]: ['slack', 'discord', 'ms-teams', 'mattermost'],
       [ChannelTypeEnum.IN_APP]: [],
     };
 
@@ -49,6 +70,7 @@ export function useIntegrationList(providers: IProviderConfig[] | undefined, sea
     return Object.values(ChannelTypeEnum).reduce(
       (acc, channel) => {
         acc[channel] = filteredIntegrations.filter((provider: IProviderConfig) => provider.channel === channel);
+
         return acc;
       },
       {} as Record<ChannelTypeEnum, IProviderConfig[]>
diff --git a/apps/dashboard/src/pages/integrations/components/integration-credentials.tsx b/apps/dashboard/src/pages/integrations/components/integration-credentials.tsx
index 75a21b709a0..454324869ff 100644
--- a/apps/dashboard/src/pages/integrations/components/integration-credentials.tsx
+++ b/apps/dashboard/src/pages/integrations/components/integration-credentials.tsx
@@ -76,8 +76,8 @@ export function CredentialsSection({ provider, register, control, errors }: Cred
             </InputField>
           )}
           {credential.description && (
-            <div className="text-foreground-400 flex items-center gap-1 text-xs">
-              <Info className="h-3 w-3" />
+            <div className="text-foreground-400 flex gap-1 text-xs">
+              <Info className="relative top-[2px] h-3 w-3" />
               <span>{credential.description}</span>
             </div>
           )}
diff --git a/apps/dashboard/src/pages/integrations/components/integration-general-settings.tsx b/apps/dashboard/src/pages/integrations/components/integration-general-settings.tsx
index 72238446010..07478edd62e 100644
--- a/apps/dashboard/src/pages/integrations/components/integration-general-settings.tsx
+++ b/apps/dashboard/src/pages/integrations/components/integration-general-settings.tsx
@@ -37,7 +37,7 @@ export function GeneralSettings({
     <div className="border-neutral-alpha-200 bg-background text-foreground-600 mx-0 mt-0 flex flex-col gap-2 rounded-lg border p-3">
       <div className="flex items-center justify-between gap-2">
         <Label className="text-xs" htmlFor="active">
-          Enable Integration{' '}
+          Active Integration{' '}
           <HelpTooltipIndicator
             className="relative top-1"
             size="4"