Merge pull request #741 from cisagov/739-set-filtertags-to-be-in-a-co…

…nsistent-order-as-filterdrawer-components

Refactored FilterTags.tsx to sort filters labels in a predefined order (CRASM-931)

frontend/src/pages/Search/FilterTags.tsx

@@ -175,6 +175,23 @@ type FlatFilters = {
   type: 'all' | 'none' | 'any';
 }[];
 
+const filterOrder = [
+  'Region',
+  'Organization',
+  'IP',
+  'Name',
+  'Root Domain(s)',
+  'Port',
+  'CVE',
+  'Severity'
+];
+
+const sortFiltersByOrder = (filters: FlatFilters) => {
+  return filters.sort((a, b) => {
+    return filterOrder.indexOf(a.label) - filterOrder.indexOf(b.label);
+  });
+};
+
 export const FilterTags: React.FC<Props> = ({ filters, removeFilter }) => {
   const { userLevel } = useUserLevel();
 
@@ -188,7 +205,7 @@ export const FilterTags: React.FC<Props> = ({ filters, removeFilter }) => {
   }, [userLevel]);
 
   const filtersByColumn: FlatFilters = useMemo(() => {
-    return filters.reduce((acc, nextFilter) => {
+    const processedFilters = filters.reduce((acc, nextFilter) => {
       const fieldAccessors = FIELD_TO_LABEL_MAP[nextFilter.field] ?? null;
       const sortedValues = fieldAccessors
         ? fieldAccessors.filterValueAccssor(nextFilter.values)
@@ -211,6 +228,7 @@ export const FilterTags: React.FC<Props> = ({ filters, removeFilter }) => {
         }
       ];
     }, []);
+    return sortFiltersByOrder(processedFilters);
   }, [filters]);
 
   return (