feat: Improve selected columns storage mechanism (#5002)

Co-authored-by: Cursor Agent <[email protected]>

Author: talboren

keep-ui/app/(keep)/alerts/[id]/ui/alert-table-tab-panel-server-side.tsx

@@ -93,6 +93,7 @@ export default function AlertTableTabPanelServerSide({
       setDismissedModalAlert={setDismissModalAlert}
       isAsyncLoading={isAsyncLoading}
       presetName={preset.name}
+      presetId={preset.id}
       presetTabs={presetTabs}
       mutateAlerts={mutateAlerts}
       setRunWorkflowModalAlert={setRunWorkflowModalAlert}

keep-ui/app/(keep)/alerts/[id]/ui/alerts.tsx

@@ -26,7 +26,7 @@ import {
 
 const defaultPresets: Preset[] = [
   {
-    id: "feed",
+    id: "11111111-1111-1111-1111-111111111111", // FEED_PRESET_ID
     name: "feed",
     options: [],
     is_private: false,

keep-ui/app/(keep)/providers/page.client.tsx

@@ -41,6 +41,11 @@ export const useFetchProviders = () => {
   );
 
   useEffect(() => {
+    // Check if we're in a browser environment before accessing localStorage
+    if (typeof window === "undefined" || typeof localStorage === "undefined") {
+      return;
+    }
+    
     const toastShown = localStorage.getItem(toastShownKey);
 
     if (isLocalhost && !toastShown) {

keep-ui/components/ui/useTimeframeState.ts

@@ -99,6 +99,11 @@ export function useTimeframeState({
 
   useEffect(() => {
     return () => {
+      // Check if we're in a browser environment before accessing window
+      if (typeof window === "undefined") {
+        return;
+      }
+      
       const newParams = new URLSearchParams(window.location.search);
       deleteTimeframeParams(newParams);
       const queryString = newParams.toString();

keep-ui/entities/presets/model/constants.ts

@@ -1,3 +1,11 @@
 export const STATIC_PRESETS_NAMES = ["feed"];
 export const LOCAL_PRESETS_KEY = "presets-order";
 export const LOCAL_STATIC_PRESETS_KEY = "static-presets-order";
+
+// Static preset IDs used to identify non-backend presets
+export const STATIC_PRESET_IDS = [
+  "11111111-1111-1111-1111-111111111111", // Feed preset
+  "22222222-2222-2222-2222-222222222222", // Deleted preset
+  "33333333-3333-3333-3333-333333333333", // Correlated preset
+  "44444444-4444-4444-4444-444444444444", // Without correlation preset
+];

keep-ui/entities/presets/model/index.ts

@@ -3,3 +3,5 @@ export * from "./constants";
 export { usePresetActions } from "./usePresetActions";
 export { usePresetPolling } from "./usePresetPolling";
 export { usePresets } from "./usePresets";
+export { usePresetColumnConfig } from "./usePresetColumnConfig";
+export { usePresetColumnState } from "./usePresetColumnState";

keep-ui/entities/presets/model/types.ts

@@ -1,15 +1,23 @@
 // TODO: move to entities/alerts/models
 
 interface Option {
-  readonly label: string;
-  readonly value: string;
+  label: string;
+  value: string;
 }
 
 export interface Tag {
-  id: string;
+  id?: string;
   name: string;
 }
 
+export interface ColumnConfiguration {
+  column_visibility: Record<string, boolean>;
+  column_order: string[];
+  column_rename_mapping: Record<string, string>;
+  column_time_formats: Record<string, string>;
+  column_list_formats: Record<string, string>;
+}
+
 export interface Preset {
   id: string;
   name: string;

keep-ui/entities/presets/model/usePresetColumnConfig.ts

@@ -0,0 +1,108 @@
+import useSWR, { SWRConfiguration } from "swr";
+import { useApi } from "@/shared/lib/hooks/useApi";
+import { useCallback } from "react";
+import { showErrorToast, showSuccessToast } from "@/shared/ui";
+import { ColumnConfiguration } from "./types";
+import { useRevalidateMultiple } from "@/shared/lib/state-utils";
+
+type UsePresetColumnConfigOptions = {
+  presetId?: string;
+  enabled?: boolean; // Flag to control whether to fetch
+} & SWRConfiguration;
+
+const DEFAULT_COLUMN_CONFIG: ColumnConfiguration = {
+  column_visibility: {},
+  column_order: [],
+  column_rename_mapping: {},
+  column_time_formats: {},
+  column_list_formats: {},
+};
+
+export const usePresetColumnConfig = ({
+  presetId,
+  enabled = true,
+  ...options
+}: UsePresetColumnConfigOptions = {}) => {
+  const api = useApi();
+  const revalidateMultiple = useRevalidateMultiple();
+
+  const {
+    data: columnConfig = DEFAULT_COLUMN_CONFIG,
+    isLoading,
+    error,
+    mutate,
+  } = useSWR<ColumnConfiguration>(
+    // Only make API call if enabled, API is ready AND presetId is provided
+    enabled && api?.isReady?.() && presetId
+      ? `/preset/${presetId}/column-config`
+      : null,
+    async (url) => {
+      try {
+        const result = await api.get(url);
+        return result || DEFAULT_COLUMN_CONFIG;
+      } catch (error: any) {
+        // If the column config endpoint fails (e.g., 404), return default config
+        // This prevents the page from failing to load
+        console.warn(
+          `Failed to fetch column config for preset ${presetId}:`,
+          error
+        );
+        // Don't throw the error, just return default config
+        return DEFAULT_COLUMN_CONFIG;
+      }
+    },
+    {
+      fallbackData: DEFAULT_COLUMN_CONFIG,
+      // Disable error retries to prevent blocking the page
+      shouldRetryOnError: false,
+      revalidateOnFocus: false,
+      // Return default config on error
+      onError: (error) => {
+        console.warn("Column config fetch error:", error);
+      },
+      ...options,
+    }
+  );
+
+  const updateColumnConfig = useCallback(
+    async (config: Partial<ColumnConfiguration>) => {
+      if (!presetId) {
+        showErrorToast("No preset ID provided");
+        return;
+      }
+
+      if (!api?.isReady?.()) {
+        console.warn("API not ready, cannot update column config");
+        return;
+      }
+
+      try {
+        const response = await api.put(
+          `/preset/${presetId}/column-config`,
+          config
+        );
+        showSuccessToast("Column configuration saved!");
+        mutate();
+        // Also revalidate preset list to update any cached data
+        revalidateMultiple(["/preset", "/preset?"]);
+        return response;
+      } catch (error) {
+        showErrorToast(error, "Failed to save column configuration");
+        throw error;
+      }
+    },
+    [api, presetId, mutate, revalidateMultiple]
+  );
+
+  return {
+    columnConfig,
+    isLoading,
+    error,
+    updateColumnConfig,
+    mutate,
+  };
+};
+
+export type UsePresetColumnConfigValue = ReturnType<
+  typeof usePresetColumnConfig
+>;