Add default job tab setting (#676)

* Add default job tab setting

Description: This commit adds a new setting for the default job tab in the SettingsModal component. The selected default job tab is stored in the useSettingsStore and can be changed by the user.

* remove console logs

* set tabs[0] as selected tab if defaultTab doesn't exist

packages/ui/src/components/SettingsModal/SettingsModal.tsx

@@ -5,6 +5,7 @@ import { InputField } from '../Form/InputField/InputField';
 import { SelectField } from '../Form/SelectField/InputField';
 import { SwitchField } from '../Form/SwitchField/SwitchField';
 import { Modal } from '../Modal/Modal';
+import { availableJobTabs } from '../../hooks/useDetailsTabs';
 
 export interface SettingsModalProps {
   open: boolean;
@@ -23,6 +24,7 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
     collapseJobData,
     collapseJobOptions,
     collapseJobError,
+    defaultJobTab,
     setSettings,
   } = useSettingsStore((state) => state);
   const { t } = useTranslation();
@@ -44,6 +46,16 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
         value={`${pollingInterval}`}
         onChange={(event) => setSettings({ pollingInterval: +event.target.value })}
       />
+      <SelectField
+        label={t('SETTINGS.DEFAULT_JOB_TAB')}
+        id="default-job-tab"
+        options={availableJobTabs.map((tab) => ({
+          text: t(`JOB.TABS.${tab.toUpperCase()}`),
+          value: tab,
+        }))}
+        value={defaultJobTab}
+        onChange={(event) => setSettings({ defaultJobTab: event.target.value })}
+      />
       <InputField
         label={t('SETTINGS.JOBS_PER_PAGE')}
         id="jobs-per-page"

packages/ui/src/hooks/useDetailsTabs.tsx

@@ -1,32 +1,44 @@
 import { useEffect, useState } from 'react';
 import { Status } from '@bull-board/api/typings/app';
 import { STATUSES } from '@bull-board/api/src/constants/statuses';
+import { useSettingsStore } from './useSettings';
 
-const regularItems = ['Data', 'Options', 'Logs'] as const;
+export const availableJobTabs = ['Data', 'Options', 'Logs', 'Error'] as const;
 
-export type TabsType = typeof regularItems[number] | 'Error';
+export type TabsType = (typeof availableJobTabs)[number];
 
 export function useDetailsTabs(currentStatus: Status, isJobFailed: boolean) {
   const [tabs, updateTabs] = useState<TabsType[]>([]);
-  const [selectedTabIdx, setSelectedTabIdx] = useState(0);
-  const selectedTab = tabs[selectedTabIdx];
+  const { defaultJobTab } = useSettingsStore();
+
+  const [selectedTab, setSelectedTab] = useState<TabsType>(
+    tabs.find((tab) => tab === defaultJobTab) || tabs[0]
+  );
 
   useEffect(() => {
-    const nextState: TabsType[] =
-      currentStatus === STATUSES.failed
-        ? ['Error', ...regularItems]
-        : isJobFailed
-        ? [...regularItems, 'Error']
-        : [...regularItems];
+    let nextState = availableJobTabs.filter((tab) => tab !== 'Error');
+    if (isJobFailed) {
+      nextState = [...nextState, 'Error'];
+    } else if (currentStatus === STATUSES.failed) {
+      nextState = ['Error', ...nextState];
+    }
 
     updateTabs(nextState);
   }, [currentStatus]);
 
+  useEffect(() => {
+    if (!tabs.includes(defaultJobTab)) {
+      setSelectedTab(tabs[0]);
+    } else {
+      setSelectedTab(defaultJobTab);
+    }
+  }, [defaultJobTab, tabs]);
+
   return {
-    tabs: tabs.map((title, index) => ({
+    tabs: tabs?.map((title) => ({
       title,
       isActive: title === selectedTab,
-      selectTab: () => setSelectedTabIdx(index),
+      selectTab: () => setSelectedTab(title),
     })),
     selectedTab,
   };

packages/ui/src/hooks/useSettings.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { TabsType } from './useDetailsTabs';
 
 interface SettingsState {
   pollingInterval: number;
@@ -9,6 +10,7 @@ interface SettingsState {
   collapseJobData: boolean;
   collapseJobOptions: boolean;
   collapseJobError: boolean;
+  defaultJobTab: TabsType;
   setSettings: (settings: Partial<Omit<SettingsState, 'setSettings'>>) => void;
 }
 
@@ -22,6 +24,7 @@ export const useSettingsStore = create<SettingsState>()(
       collapseJobData: false,
       collapseJobOptions: false,
       collapseJobError: false,
+      defaultJobTab: 'Data',
       setSettings: (settings) => set(() => settings),
     }),
     {

packages/ui/src/static/locales/en-US/messages.json

@@ -105,6 +105,7 @@
       "MINS": "{{count}} minutes",
       "MINS_one": "{{count}} minute"
     },
+    "DEFAULT_JOB_TAB": "Default job tab",
     "JOBS_PER_PAGE": "Jobs per page (1-50)",
     "CONFIRM_QUEUE_ACTIONS": "Confirm queue actions",
     "CONFIRM_JOB_ACTIONS": "Confirm job actions",