INFRA-2867 | make selected options sorted

src/Pages/Dashboard/SearchResultsTable.module.scss

@@ -69,8 +69,8 @@
   display: flex;
   align-items: center;
   .dot {
-    width: 7px;
-    height: 7px;
+    width: 5px;
+    height: 5px;
     background-color: white;
     border-radius: 50%;
     margin-right: 4px;

src/Pages/Dashboard/partials/SearchResultsTable.tsx

@@ -10,7 +10,7 @@ import { CLICK_STREAM_EVENT_FACTORY } from '@src/services/clickStream/constants/
 import { getSeverityColor } from '@src/Pages/Dashboard/constants';
 import { IncidentDashboard } from '@src/slices/dashboardSlice';
 import { Team } from '@src/Pages/Dashboard/type';
-import styles from '@src/Pages/Dashboard/partials/CreateIncident.module.scss';
+import styles from '../SearchResultsTable.module.scss';
 
 interface SearchResultTableProps {
   currentPageData: IncidentDashboard[];

src/Pages/Incidents/Dropdowns/DropDownHelper.tsx

@@ -7,25 +7,38 @@ export const getProduct = (initialProducts: Team[] | null) => {
   return initialProducts?.map(product => product?.label).join(', ') || '';
 };
 
-export const getTruncatedProduct = (initialProducts: Team[] | null) => {
+export const getTruncatedProduct = (
+  initialProducts: Team[] | null,
+  isUserParticipantList: boolean,
+) => {
   const product = getProduct(initialProducts);
-  const TRUNCATE_PRODUCT_LIMIT = 30;
+  const TRUNCATE_PRODUCT_LIMIT = 35;
   const truncatedProduct =
     product?.length > TRUNCATE_PRODUCT_LIMIT
       ? `${product?.slice(0, TRUNCATE_PRODUCT_LIMIT)}...`
       : product;
   const showMore = product?.length > TRUNCATE_PRODUCT_LIMIT ? true : false;
-  const remaining =
-    initialProducts?.length ?? 0 - truncatedProduct?.split(',')?.length;
+  const remaining = initialProducts
+    ? initialProducts?.length - truncatedProduct?.split(',')?.length
+    : 0;
   return (
     <div className={styles['product-text']}>
-      <Typography variant="p4">{truncatedProduct}</Typography>
-      {showMore && (
+      <Typography
+        variant="p4"
+        color={
+          isUserParticipantList
+            ? 'var(--navi-color-gray-c1)'
+            : 'var(--navi-color-gray-c3)'
+        }
+      >
+        {truncatedProduct}
+      </Typography>
+      {showMore && remaining > 0 ? (
         <Typography variant="p4" color="var(--navi-color-blue-base)">
           {' '}
           + {remaining} more
         </Typography>
-      )}
+      ) : null}
     </div>
   );
 };

src/Pages/Incidents/Dropdowns/index.tsx

@@ -21,7 +21,10 @@ import {
 import { IncidentPageState } from '@src/types';
 import useClickStream from '@src/services/clickStream';
 import { CLICK_STREAM_EVENT_FACTORY } from '@src/services/clickStream/constants/values';
-import AllDailogBox from './AllDailogBox';
+import {
+  selectAssignerResponderData,
+  selectProductListData,
+} from '@src/slices/createIncidentSlice';
 import ResolveForm from '../ResolveForm';
 import {
   generateOptions,
@@ -41,14 +44,12 @@ import {
   TeamType,
   ProductType,
 } from '../constants';
-import { getProduct, getTruncatedProduct } from './DropDownHelper';
-import {
-  selectAssignerResponderData,
-  selectProductListData,
-} from '@src/slices/createIncidentSlice';
-
 import styles from '../Incidents.module.scss';
 
+import { getProduct, getTruncatedProduct } from './DropDownHelper';
+import AllDailogBox from './AllDailogBox';
+import { getSortedOption } from './utils';
+
 const Dropdowns: FC = () => {
   const reduxDispatch = useDispatch();
   const { fireEvent } = useClickStream();
@@ -92,7 +93,8 @@ const Dropdowns: FC = () => {
     });
   }, [initialProducts]);
 
-  useEffect(() => {}, [incidentData]);
+  const sortedProductOptions = getSortedOption(productOptions, initialProducts);
+
   const { emailId: userEmail } =
     JSON.parse(localStorage.getItem('user-data') || '{}') || {};
   const participantsList = [
@@ -470,7 +472,7 @@ const Dropdowns: FC = () => {
                       : 'var(--navi-color-gray-c3)'
                   }
                 >
-                  {getTruncatedProduct(initialProducts)}
+                  {getTruncatedProduct(initialProducts, isUserParticipantList)}
                 </Typography>
               </Tooltip>
               <div>
@@ -482,7 +484,7 @@ const Dropdowns: FC = () => {
                 <SelectPicker
                   multiSelect={true}
                   onSelectionChange={handleProductSelectionChange}
-                  options={productOptions}
+                  options={sortedProductOptions}
                   selectedValues={state.selectedProducts?.map(
                     product => product?.value as SelectPickerValue,
                   )}

src/Pages/Incidents/Dropdowns/utils.ts

@@ -0,0 +1,20 @@
+import { Team } from '@src/Pages/Dashboard/type';
+
+export const getSortedOption = (
+  productOptions: Team[],
+  initialProducts: Team[] | null,
+) => {
+  const sortedProductOptions = productOptions?.toSorted((a, b) => {
+    const isSelectedLeft = initialProducts?.some(
+      (product: Team) => product?.value === a?.value,
+    );
+    const isSelectedRight = initialProducts?.some(
+      (product: Team) => product.value === b.value,
+    );
+    if (isSelectedLeft !== isSelectedRight) {
+      return isSelectedRight ? 1 : -1;
+    }
+    return a?.label?.localeCompare(b?.label) ?? 0;
+  });
+  return sortedProductOptions;
+};

src/types/index.d.ts

@@ -166,7 +166,7 @@ export interface IncidentLogPageState {
   openDialogDuplicate: boolean;
   openDialogResolve: boolean;
   openDialognotParticipants: boolean;
-  selectedOptions: SelectPickerOptionProps | SelectPickerOptionProps[] | null;
+  selectedOptions: SelectPickerOptionProps | SelectPickerOptionProps[];
 }
 
 export interface IncidentPageState {