UI - use new db user settings to persist user's host table column preferences

changes/23971-persist-hosts-column-settings-across-sessions

@@ -0,0 +1,2 @@
+- Implement user-level settings, use them to persist a user's selection of which columns to display
+  on the hosts table.

frontend/components/App/App.tsx

@@ -77,6 +77,7 @@
     isOnlyObserver,
     isAnyTeamMaintainerOrTeamAdmin,
     setAvailableTeams,
+    setUserSettings,
     setCurrentUser,
     setConfig,
     setEnrollSecret,
@@ -165,9 +166,10 @@
 
   const fetchCurrentUser = async () => {
     try {
-      const { user, available_teams } = await usersAPI.me();
+      const { user, available_teams, settings } = await usersAPI.me();
       setCurrentUser(user);
       setAvailableTeams(user, available_teams);
+      setUserSettings(settings);
       fetchConfig();
     } catch (error) {
       if (
@@ -196,7 +198,7 @@
     if (authToken() && !location?.pathname.includes("/device/")) {
       fetchCurrentUser();
     }
   }, [location?.pathname]);
 
   // Updates title that shows up on browser tabs
   useEffect(() => {
@@ -222,7 +224,7 @@
       !isAnyTeamMaintainerOrTeamAdmin &&
       !location?.pathname.includes("/device/");
 
     const getEnrollSecret = async () => {
       try {
         const { spec } = await configAPI.loadEnrollSecret();
         setEnrollSecret(spec.secrets);
@@ -239,7 +241,7 @@
 
   // "any" is used on purpose. We are using Axios but this
   // function expects a native React Error type, which is incompatible.
   const renderErrorOverlay = ({ error }: any) => {
     // @ts-ignore
     console.error(error);
 

frontend/context/app.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useReducer, useMemo, ReactNode } from "react";
 
-import { IConfig } from "interfaces/config";
+import { IConfig, IUserSettings } from "interfaces/config";
 import { IEnrollSecret } from "interfaces/enroll_secret";
 import {
   APP_CONTEXT_ALL_TEAMS_SUMMARY,
@@ -15,6 +15,7 @@ import { hasLicenseExpired, willExpireWithinXDays } from "utilities/helpers";
 
 enum ACTIONS {
   SET_AVAILABLE_TEAMS = "SET_AVAILABLE_TEAMS",
+  SET_USER_SETTINGS = "SET_USER_SETTINGS",
   SET_CURRENT_USER = "SET_CURRENT_USER",
   SET_CURRENT_TEAM = "SET_CURRENT_TEAM",
   SET_CONFIG = "SET_CONFIG",
@@ -36,6 +37,11 @@ interface ISetAvailableTeamsAction {
   availableTeams: ITeamSummary[];
 }
 
+interface ISetUserSettingsAction {
+  type: ACTIONS.SET_USER_SETTINGS;
+  userSettings: IUserSettings;
+}
+
 interface ISetConfigAction {
   type: ACTIONS.SET_CONFIG;
   config: IConfig;
@@ -105,6 +111,7 @@ interface ISetFilteredPoliciesPathAction {
 }
 type IAction =
   | ISetAvailableTeamsAction
+  | ISetUserSettingsAction
   | ISetConfigAction
   | ISetCurrentTeamAction
   | ISetCurrentUserAction
@@ -125,6 +132,7 @@ type Props = {
 
 type InitialStateType = {
   availableTeams?: ITeamSummary[];
+  userSettings?: IUserSettings;
   config: IConfig | null;
   currentUser: IUser | null;
   currentTeam?: ITeamSummary;
@@ -171,6 +179,7 @@ type InitialStateType = {
     user: IUser | null,
     availableTeams: ITeamSummary[]
   ) => void;
+  setUserSettings: (userSettings: IUserSettings) => void;
   setCurrentUser: (user: IUser) => void;
   setCurrentTeam: (team?: ITeamSummary) => void;
   setConfig: (config: IConfig) => void;
@@ -190,6 +199,7 @@ export type IAppContext = InitialStateType;
 
 export const initialState = {
   availableTeams: undefined,
+  userSettings: undefined,
   config: null,
   currentUser: null,
   currentTeam: undefined,
@@ -227,6 +237,7 @@ export const initialState = {
   willApplePnsExpire: false,
   willVppExpire: false,
   setAvailableTeams: () => null,
+  setUserSettings: () => null,
   setCurrentUser: () => null,
   setCurrentTeam: () => null,
   setConfig: () => null,
@@ -296,6 +307,13 @@ const setPermissions = (
 
 const reducer = (state: InitialStateType, action: IAction) => {
   switch (action.type) {
+    case ACTIONS.SET_USER_SETTINGS: {
+      const { userSettings } = action;
+      return {
+        ...state,
+        userSettings,
+      };
+    }
     case ACTIONS.SET_AVAILABLE_TEAMS: {
       const { user, availableTeams } = action;
 
@@ -436,6 +454,7 @@ const AppProvider = ({ children }: Props): JSX.Element => {
   const value = useMemo(
     () => ({
       availableTeams: state.availableTeams,
+      userSettings: state.userSettings,
       config: state.config,
       currentUser: state.currentUser,
       currentTeam: state.currentTeam,
@@ -487,6 +506,9 @@ const AppProvider = ({ children }: Props): JSX.Element => {
           availableTeams,
         });
       },
+      setUserSettings: (userSettings: IUserSettings) => {
+        dispatch({ type: ACTIONS.SET_USER_SETTINGS, userSettings });
+      },
       setCurrentUser: (currentUser: IUser) => {
         dispatch({ type: ACTIONS.SET_CURRENT_USER, currentUser });
       },
@@ -546,6 +568,7 @@ const AppProvider = ({ children }: Props): JSX.Element => {
       state.abmExpiry,
       state.apnsExpiry,
       state.availableTeams,
+      state.userSettings,
       state.config,
       state.currentTeam,
       state.currentUser,

frontend/interfaces/config.ts

@@ -222,3 +222,7 @@ export type IAutomationsConfig = Pick<
 >;
 
 export const CONFIG_DEFAULT_RECENT_VULNERABILITY_MAX_AGE_IN_DAYS = 30;
+
+export interface IUserSettings {
+  hidden_host_columns: string[];
+}

frontend/interfaces/user.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import teamInterface, { ITeam } from "./team";
+import { IUserSettings } from "./config";
 
 export default PropTypes.shape({
   created_at: PropTypes.string,
@@ -110,6 +111,7 @@ export interface IUpdateUserFormData {
   sso_enabled?: boolean;
   mfa_enabled?: boolean;
   teams?: ITeam[];
+  settings?: IUserSettings;
 }
 
 export interface ICreateUserWithInvitationFormData {

frontend/pages/RegistrationPage/RegistrationPage.tsx

@@ -30,9 +30,12 @@ interface IRegistrationPageProps {
 const baseClass = "registration-page";
 
 const RegistrationPage = ({ router }: IRegistrationPageProps) => {
-  const { currentUser, setCurrentUser, setAvailableTeams } = useContext(
-    AppContext
-  );
+  const {
+    currentUser,
+    setCurrentUser,
+    setAvailableTeams,
+    setUserSettings,
+  } = useContext(AppContext);
   const [page, setPage] = useState(1);
   const [pageProgress, setPageProgress] = useState(1);
   const [showSetupError, setShowSetupError] = useState(false);
@@ -58,9 +61,10 @@ const RegistrationPage = ({ router }: IRegistrationPageProps) => {
       const { token } = await usersAPI.setup(formData);
       local.setItem("auth_token", token);
 
-      const { user, available_teams } = await usersAPI.me();
+      const { user, available_teams, settings } = await usersAPI.me();
       setCurrentUser(user);
       setAvailableTeams(user, available_teams);
+      setUserSettings(settings);
       router.push(DASHBOARD);
       window.location.reload();
     } catch (error) {

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -97,6 +97,7 @@ const TeamDetailsWrapper = ({
     isGlobalAdmin,
     isPremiumTier,
     setAvailableTeams,
+    setUserSettings,
     setCurrentUser,
   } = useContext(AppContext);
 
@@ -140,9 +141,10 @@ const TeamDetailsWrapper = ({
 
   const { refetch: refetchMe } = useQuery(["me"], () => usersAPI.me(), {
     enabled: false,
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
+    onSuccess: ({ user, available_teams, settings }: IGetMeResponse) => {
       setCurrentUser(user);
       setAvailableTeams(user, available_teams);
+      setUserSettings(settings);
     },
   });
 

frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx

@@ -35,6 +35,7 @@ const TeamManagementPage = (): JSX.Element => {
     setCurrentTeam,
     setCurrentUser,
     setAvailableTeams,
+    setUserSettings,
   } = useContext(AppContext);
   const [isUpdatingTeams, setIsUpdatingTeams] = useState(false);
   const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
@@ -48,9 +49,10 @@ const TeamManagementPage = (): JSX.Element => {
 
   const { refetch: refetchMe } = useQuery(["me"], () => usersAPI.me(), {
     enabled: false,
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
+    onSuccess: ({ user, available_teams, settings }: IGetMeResponse) => {
       setCurrentUser(user);
       setAvailableTeams(user, available_teams);
+      setUserSettings(settings);
     },
   });
 

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -675,27 +675,24 @@ const generateAvailableTableHeaders = ({
   return allHostTableHeaders.reduce(
     (columns: Column<IHost>[], currentColumn: Column<IHost>) => {
       // skip over column headers that are not shown in free observer tier
-      if (isFreeTier && isOnlyObserver) {
+      if (isFreeTier) {
         if (
-          currentColumn.id === "team_name" ||
-          currentColumn.id === "selection"
+          isOnlyObserver &&
+          ["selection", "team_name"].includes(currentColumn.id || "")
         ) {
           return columns;
+          // skip over column headers that are not shown in free admin/maintainer
         }
-        // skip over column headers that are not shown in free admin/maintainer
-      } else if (isFreeTier) {
         if (
           currentColumn.id === "team_name" ||
           currentColumn.id === "mdm.server_url" ||
           currentColumn.id === "mdm.enrollment_status"
         ) {
           return columns;
         }
-      } else if (isOnlyObserver) {
+      } else if (isOnlyObserver && currentColumn.id === "selection") {
         // In premium tier, we want to check user role to enable/disable select column
-        if (currentColumn.id === "selection") {
-          return columns;
-        }
+        return columns;
       }
 
       columns.push(currentColumn);

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -11,9 +11,9 @@ import { RouteProps } from "react-router/lib/Route";
 import { find, isEmpty, isEqual, omit } from "lodash";
 import { format } from "date-fns";
 import FileSaver from "file-saver";
-import classNames from "classnames";
 
 import enrollSecretsAPI from "services/entities/enroll_secret";
+import usersAPI from "services/entities/users";
 import labelsAPI, { ILabelsResponse } from "services/entities/labels";
 import teamsAPI, { ILoadTeamsResponse } from "services/entities/teams";
 import globalPoliciesAPI from "services/entities/global_policies";
@@ -46,7 +46,6 @@ import {
   IEnrollSecret,
   IEnrollSecretsResponse,
 } from "interfaces/enroll_secret";
-import { getErrorReason } from "interfaces/errors";
 import { ILabel } from "interfaces/label";
 import { IOperatingSystemVersion } from "interfaces/operating_system";
 import { IPolicy, IStoredPolicyResponse } from "interfaces/policy";
@@ -143,6 +142,7 @@ const ManageHostsPage = ({
     isPremiumTier,
     isFreeTier,
     isSandboxMode,
+    userSettings,
     setFilteredHostsPath,
     setFilteredPoliciesPath,
     setFilteredQueriesPath,
@@ -175,11 +175,6 @@ const ManageHostsPage = ({
     },
   });
 
-  const hostHiddenColumns = localStorage.getItem("hostHiddenColumns");
-  const storedHiddenColumns = hostHiddenColumns
-    ? JSON.parse(hostHiddenColumns)
-    : null;
-
   // Functions to avoid race conditions
   const initialSortBy: ISortOption[] = (() => {
     let key = DEFAULT_SORT_HEADER;
@@ -212,7 +207,7 @@ const ManageHostsPage = ({
   const [showTransferHostModal, setShowTransferHostModal] = useState(false);
   const [showDeleteHostModal, setShowDeleteHostModal] = useState(false);
   const [hiddenColumns, setHiddenColumns] = useState<string[]>(
-    storedHiddenColumns || defaultHiddenColumns
+    userSettings?.hidden_host_columns || defaultHiddenColumns
   );
   const [selectedHostIds, setSelectedHostIds] = useState<number[]>([]);
   const [isAllMatchingHostsSelected, setIsAllMatchingHostsSelected] = useState(
@@ -766,10 +761,23 @@ const ManageHostsPage = ({
     router.push(`${PATHS.EDIT_LABEL(parseInt(labelID, 10))}`);
   };
 
-  const onSaveColumns = (newHiddenColumns: string[]) => {
-    localStorage.setItem("hostHiddenColumns", JSON.stringify(newHiddenColumns));
-    setHiddenColumns(newHiddenColumns);
-    setShowEditColumnsModal(false);
+  const onSaveColumns = async (newHiddenColumns: string[]) => {
+    if (!currentUser) {
+      return;
+    }
+    try {
+      await usersAPI.update(currentUser.id, {
+        settings: { hidden_host_columns: newHiddenColumns },
+      });
+      // No success renderFlash, to make column setting more seamless
+      // only set state and close modal if server persist succeeds, keeping UI and server state in
+      // sync.
+      // Can also add local storage fallback behavior in next iteration if we want.
+      setHiddenColumns(newHiddenColumns);
+      setShowEditColumnsModal(false);
+    } catch (response) {
+      renderFlash("error", "Couldn't save column settings. Please try again.");
+    }
   };
 
   // NOTE: this is called once on initial render and every time the query changes

frontend/services/entities/users.ts

@@ -11,6 +11,7 @@ import {
   ICreateUserWithInvitationFormData,
 } from "interfaces/user";
 import { ITeamSummary } from "interfaces/team";
+import { IUserSettings } from "interfaces/config";
 
 export interface ISortOption {
   id: number;
@@ -41,6 +42,7 @@ interface IRequirePasswordReset {
 export interface IGetMeResponse {
   user: IUser;
   available_teams: ITeamSummary[];
+  settings: IUserSettings;
 }
 
 export default {
@@ -111,14 +113,17 @@ export default {
     });
   },
   me: (): Promise<IGetMeResponse> => {
-    const { ME } = endpoints;
-
-    return sendRequest("GET", ME).then(({ user, available_teams }) => {
-      return {
-        user: helpers.addGravatarUrlToResource(user),
-        available_teams,
-      };
-    });
+    // include the user's settings when calling from the UI
+    const path = `${endpoints.ME}?include_ui_settings=true`;
+    return sendRequest("GET", path).then(
+      ({ user, available_teams, settings }) => {
+        return {
+          user: helpers.addGravatarUrlToResource(user),
+          available_teams,
+          settings,
+        };
+      }
+    );
   },
   performRequiredPasswordReset: (new_password: string) => {
     const { PERFORM_REQUIRED_PASSWORD_RESET } = endpoints;