diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx index c2d7ceff..274d99e1 100644 --- a/packages/ui/src/components/SettingsModal/SettingsModal.tsx +++ b/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 })} /> + ({ + text: t(`JOB.TABS.${tab.toUpperCase()}`), + value: tab, + }))} + value={defaultJobTab} + onChange={(event) => setSettings({ defaultJobTab: event.target.value })} + /> ([]); - const [selectedTabIdx, setSelectedTabIdx] = useState(0); - const selectedTab = tabs[selectedTabIdx]; + const { defaultJobTab } = useSettingsStore(); + + const [selectedTab, setSelectedTab] = useState( + 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, }; diff --git a/packages/ui/src/hooks/useSettings.ts b/packages/ui/src/hooks/useSettings.ts index e263a83c..fa1c17ff 100644 --- a/packages/ui/src/hooks/useSettings.ts +++ b/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>) => void; } @@ -22,6 +24,7 @@ export const useSettingsStore = create()( collapseJobData: false, collapseJobOptions: false, collapseJobError: false, + defaultJobTab: 'Data', setSettings: (settings) => set(() => settings), }), { diff --git a/packages/ui/src/static/locales/en-US/messages.json b/packages/ui/src/static/locales/en-US/messages.json index 00c0e7ca..f9d50797 100644 --- a/packages/ui/src/static/locales/en-US/messages.json +++ b/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",