feat(projectHistoryLogs): fetch filter options from backend TASK-1403 (…

…#5401)

### 📣 Summary
The filter options for activity logs now only display the existing
options for the project


### 📖 Description
- Instead of using a hardcoded list of actions to display the filter
data, now we're fetching the available action list from the API.
- The returned actions are still translated and sorted in the frontend


### 👀 Preview steps
1. ℹ️ have account and a project
2. ℹ️ have activity to be logged in the project
3. navigate to project settings > activities
4. 🟢 notice that in the filter selection box only the
existing-in-project activity actions are available for filtering

---------

Co-authored-by: rgraber <[email protected]>

jsapp/js/api.endpoints.ts

@@ -1,5 +1,6 @@
 export const endpoints = {
   ASSET_HISTORY: '/api/v2/assets/:asset_uid/history/',
+  ASSET_HISTORY_ACTIONS: '/api/v2/assets/:asset_uid/history/actions',
   ASSET_URL: '/api/v2/assets/:uid/',
   ORG_ASSETS_URL: '/api/v2/organizations/:organization_id/assets/',
   ME_URL: '/me/',

jsapp/js/components/activity/activityLogs.query.ts

@@ -1,10 +1,11 @@
 import {keepPreviousData, useQuery} from '@tanstack/react-query';
-import type {FailResponse, PaginatedResponse} from 'js/dataInterface';
-import {
-  AUDIT_ACTION_TYPES,
-  AuditActions,
-  type ActivityLogsItem,
-} from './activity.constants';
+import type {
+  FailResponse,
+  LabelValuePair,
+  PaginatedResponse,
+} from 'js/dataInterface';
+import {AUDIT_ACTION_TYPES} from './activity.constants';
+import type {AuditActions, ActivityLogsItem} from './activity.constants';
 import {QueryKeys} from 'js/query/queryKeys';
 import {fetchGet} from 'jsapp/js/api';
 import {endpoints} from 'jsapp/js/api.endpoints';
@@ -53,8 +54,21 @@ const getActivityLogs = async ({
  * Items are sorted by an specific order defined in the AUDIT_ACTION_TYPES.
  *
  */
-const getFilterOptions = async () =>
-  (Object.keys(AuditActions) as Array<keyof typeof AuditActions>)
+const getFilterOptions = async (
+  assetUid: string
+): Promise<LabelValuePair[]> => {
+  const endpointUrl = endpoints.ASSET_HISTORY_ACTIONS.replace(
+    ':asset_uid',
+    assetUid
+  );
+
+  const filterOptions = await fetchGet<{
+    actions: Array<keyof typeof AuditActions>;
+  }>(endpointUrl, {
+    errorMessageDisplay: t('There was an error getting the filter options.'),
+  });
+
+  return filterOptions.actions
     .map((key) => AUDIT_ACTION_TYPES[key])
     .sort((a, b) => a.order - b.order)
     .map((auditAction) => {
@@ -63,6 +77,7 @@ const getFilterOptions = async () =>
         value: auditAction.name,
       };
     });
+};
 
 /**
  * Starts the exporting process of the activity logs.
@@ -111,10 +126,10 @@ export const useActivityLogsQuery = ({
 /**
  * This is a hook to fetch the filter options for the activity logs.
  */
-export const useActivityLogsFilterOptionsQuery = () =>
+export const useActivityLogsFilterOptionsQuery = (assetUid: string) =>
   useQuery({
-    queryKey: [QueryKeys.activityLogsFilter],
-    queryFn: () => getFilterOptions(),
+    queryKey: [QueryKeys.activityLogsFilter, assetUid],
+    queryFn: () => getFilterOptions(assetUid),
   });
 
 /**

jsapp/js/components/activity/formActivity.tsx

@@ -25,8 +25,6 @@ import {FeatureFlag, useFeatureFlag} from 'jsapp/js/featureFlags';
  * of actions that users did on the project.
  */
 export default function FormActivity() {
-  const {data: filterOptions} = useActivityLogsFilterOptionsQuery();
-
   const exportActivityLogsEnabled = useFeatureFlag(
     FeatureFlag.exportActivityLogsEnabled
   );
@@ -42,6 +40,10 @@ export default function FormActivity() {
     actionFilter: selectedFilterOption?.value || '',
   };
 
+  const {data: filterOptions} = useActivityLogsFilterOptionsQuery(
+    uid as string
+  );
+
   const handleFilterChange = (value: string | null) => {
     setSelectedFilterOption(
       filterOptions?.find((option) => option.value === value) || null