Imad/switch wording to egress

src/components/modals/add-acl-modal/RessourcesForm.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { Switch, Button, notification } from 'antd';
 import { useForm, Controller } from 'react-hook-form';
 import {
   ComputerDesktopIcon,
   WrenchIcon,
   XMarkIcon,
   MagnifyingGlassIcon,
   ChevronDownIcon,
@@ -16,6 +16,7 @@
 import { extractErrorMsg } from '@/utils/ServiceUtils';
 import { Tag } from '@/models/Tags';
 import { NotificationInstance } from 'antd/es/notification/interface';
+import arrowBidirectional from '@/assets/arrow-bidirectional.svg';
 
 interface Item {
   id: string;
@@ -367,7 +368,7 @@
 
           <div className="flex flex-col items-center justify-center w-2/3 gap-2">
             <img
-              src="/arrow-bidirectional.svg"
+              src={arrowBidirectional}
               className="w-full px-4 py-2 text-sm border rounded-lg bg-bg-default border-stroke-default"
               alt="Bidirectional arrow"
             />

src/components/modals/add-acl-modal/UsersForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { notification, Switch, Button } from 'antd';
 import { useForm, Controller } from 'react-hook-form';
 import {
   UsersIcon,
@@ -21,6 +21,7 @@
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { Link } from 'react-router-dom';
 import { useServerLicense } from '@/utils/Utils';
+import arrowBidirectional from '@/assets/arrow-bidirectional.svg';
 
 interface Item {
   id: string;
@@ -545,7 +546,7 @@
 
           <div className="flex flex-col items-center justify-center w-2/3 gap-2">
             <img
-              src="/arrow-bidirectional.svg"
+              src={arrowBidirectional}
               className="w-full px-4 py-2 text-sm border rounded-lg bg-bg-default border-stroke-default"
               alt="Bidirectional arrow"
             />

src/components/modals/update-acl-modal/UpdateRessourcesForm.tsx

@@ -16,6 +16,7 @@ import { Network } from '@/models/Network';
 import { extractErrorMsg } from '@/utils/ServiceUtils';
 import { Tag } from '@/models/Tags';
 import { NotificationInstance } from 'antd/es/notification/interface';
+import arrowBidirectional from '@/assets/arrow-bidirectional.svg';
 
 interface Item {
   id: string;
@@ -377,7 +378,7 @@ const UpdateResourcesForm: React.FC<UpdateResourcesFormProps> = ({
 
           <div className="flex flex-col items-center justify-center w-2/3 gap-2">
             <img
-              src="/arrow-bidirectional.svg"
+              src={arrowBidirectional}
               className="w-full px-4 py-2 text-sm border rounded-lg bg-bg-default border-stroke-default"
               alt="Bidirectional arrow"
             />

src/components/modals/update-acl-modal/UpdateUsersForm.tsx

@@ -21,6 +21,7 @@ import { extractErrorMsg } from '@/utils/ServiceUtils';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { Link } from 'react-router-dom';
 import { useServerLicense } from '@/utils/Utils';
+import arrowBidirectional from '@/assets/arrow-bidirectional.svg';
 
 interface Item {
   id: string;
@@ -610,7 +611,7 @@ const UpdateUsersForm: React.FC<UpdateUsersFormProps> = ({
 
           <div className="flex flex-col items-center justify-center w-2/3 gap-2">
             <img
-              src="/arrow-bidirectional.svg"
+              src={arrowBidirectional}
               className="w-full px-4 py-2 text-sm border rounded-lg bg-bg-default border-stroke-default"
               alt="Bidirectional arrow"
             />

src/components/shadcn/MultiSelect.tsx

@@ -265,24 +265,26 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     {selectedValues.length === options.length && <CheckIcon className="inline w-4 h-4" />}
                   </div>
                 </CommandItem>
-                {options.map((option) => {
-                  const isSelected = selectedValues.includes(option.value);
-                  return (
-                    <CommandItem
-                      key={option.value}
-                      onSelect={() => toggleOption(option.value)}
-                      className="cursor-pointer"
-                    >
-                      <div className="flex justify-between" style={{ width: '100%' }}>
-                        <span>
-                          {option.icon && <option.icon className="inline w-4 h-4 mr-2 text-muted-foreground" />}
-                          <span className="mr-2">{option.label}</span>
-                        </span>
-                        {isSelected && <CheckIcon className="w-4 h-4" />}
-                      </div>
-                    </CommandItem>
-                  );
-                })}
+                <div className="h-40 overflow-y-auto">
+                  {options.map((option) => {
+                    const isSelected = selectedValues.includes(option.value);
+                    return (
+                      <CommandItem
+                        key={option.value}
+                        onSelect={() => toggleOption(option.value)}
+                        className="cursor-pointer"
+                      >
+                        <div className="flex justify-between w-full">
+                          <span>
+                            {option.icon && <option.icon className="inline w-4 h-4 mr-2 text-muted-foreground" />}
+                            <span className="mr-2">{option.label}</span>
+                          </span>
+                          {isSelected && <CheckIcon className="w-4 h-4" />}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                </div>{' '}
               </CommandGroup>
               <CommandSeparator />
               <CommandGroup>

src/pages/networks/NetworkDetailsPage.tsx

@@ -2450,7 +2450,7 @@ export default function NetworkDetailsPage(props: PageProps) {
                     },
                   },
                   {
-                    title: 'External Routes',
+                    title: 'Egress',
                     render(_, node) {
                       const extendedNode = getExtendedNode(node, store.hostsCommonDetails);
                       if (extendedNode.is_static && extendedNode.static_node) {

src/pages/networks/acl/ACLPage.tsx

@@ -7,7 +7,7 @@ import { AxiosError } from 'axios';
 import { ACLRule, DestinationTypeValue, SourceTypeValue } from '@/services/dtos/ACLDtos';
 import { ACLService } from '@/services/ACLService';
 import { extractErrorMsg } from '@/utils/ServiceUtils';
-import arrowBidirectional from '../../../../public/arrow-bidirectional.svg';
+import arrowBidirectional from '@/assets/arrow-bidirectional.svg';
 import UpdateACLModal from '@/components/modals/update-acl-modal/UpdateACLModal';
 import AddACLModal from '@/components/modals/add-acl-modal/AddACLModal';
 import { UsersService } from '@/services/UsersService';