[Security Solution][Response Ops] Alert Table column metadata does no…

…t have the columns data type (elastic#157653)

## Summary

Handles : elastic#157463 

- `@timestamp` Sorting is working functionally instead of `A-Z` it
should be `Old - New`

|Before|After|
|---|---|

|![image](https://github.com/elastic/kibana/assets/59917825/6c5a4c64-cd74-4421-af16-f6172bfc7fc5)|<video
src="https://github.com/elastic/kibana/assets/7485038/15ac8a52-eece-4892-8c32-09f19e18e870"
/>|

Image-After
<img width="611" alt="image"
src="https://github.com/elastic/kibana/assets/7485038/b9f62366-3067-4a74-b7be-74fb8f94d2b8">

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/hooks/use_columns/use_columns.ts

@@ -10,7 +10,7 @@ import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import { BrowserField, BrowserFields } from '@kbn/rule-registry-plugin/common';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AlertConsumers } from '@kbn/rule-data-utils';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { AlertsTableStorage } from '../../alerts_table_state';
 import { toggleColumn } from './toggle_column';
 import { useFetchBrowserFieldCapabilities } from '../use_fetch_browser_fields_capabilities';
@@ -151,7 +151,15 @@ export const useColumns = ({
     initialBrowserFields,
   });
 
-  const [columns, setColumns] = useState<EuiDataGridColumn[]>(storageAlertsTable.current.columns);
+  const [columns, setColumns] = useState<EuiDataGridColumn[]>(() => {
+    let cols = storageAlertsTable.current.columns;
+    // before restoring from storage, enrich the column data
+    if (initialBrowserFields && defaultColumns) {
+      cols = populateColumns(cols, initialBrowserFields, defaultColumns);
+    }
+    return cols;
+  });
+
   const [isColumnsPopulated, setColumnsPopulated] = useState<boolean>(false);
 
   const defaultColumnsRef = useRef<typeof defaultColumns>(defaultColumns);
@@ -162,16 +170,18 @@ export const useColumns = ({
   );
 
   useEffect(() => {
-    // if defaultColumns have changed, populate again
+    // if defaultColumns have changed,
+    // get the latest columns provided by client and
     if (didDefaultColumnChange) {
       defaultColumnsRef.current = defaultColumns;
+      setColumnsPopulated(false);
       setColumns(storageAlertsTable.current.columns);
       return;
     }
   }, [didDefaultColumnChange, storageAlertsTable, defaultColumns]);
 
   useEffect(() => {
-    if (isBrowserFieldDataLoading !== false || isColumnsPopulated) return;
+    if (isEmpty(browserFields) || isColumnsPopulated) return;
 
     const populatedColumns = populateColumns(columns, browserFields, defaultColumns);