Skip to content

Commit 3c72959

Browse files
Aleksy Lisowskipiotrczarnas
Aleksy Lisowski
authored and
piotrczarnas
committed
Merged PR 2369: 10660 unified size of tabs
unified size of tabs
2 parents 743b5b3 + 1b32ac6 commit 3c72959

File tree

6 files changed

+317
-106
lines changed

6 files changed

+317
-106
lines changed

‎dqops/src/main/frontend/src/components/Connection/ConnectionView/ScheduleDetail.tsx

+80-27
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import React, { useEffect, useState } from 'react';
22
import {
3-
getConnectionSchedulingGroup, resetConnectionSchedulingGroup, setIsUpdatedSchedulingGroup, setUpdatedSchedulingGroup,
3+
getConnectionSchedulingGroup,
4+
resetConnectionSchedulingGroup,
5+
setIsUpdatedSchedulingGroup,
6+
setUpdatedSchedulingGroup,
47
updateConnectionSchedulingGroup
5-
68
} from '../../../redux/actions/connection.actions';
79
import { useActionDispatch } from '../../../hooks/useActionDispatch';
810
import { useSelector } from 'react-redux';
911
import ConnectionActionGroup from './ConnectionActionGroup';
10-
import { useHistory, useLocation, useParams } from "react-router-dom";
11-
import ScheduleView from "../../ScheduleView";
12-
import Tabs from "../../Tabs";
13-
import { CheckRunMonitoringScheduleGroup } from "../../../shared/enums/scheduling.enum";
14-
import { getFirstLevelActiveTab, getFirstLevelState } from "../../../redux/selectors";
15-
import { CheckTypes } from "../../../shared/routes";
16-
import qs from "query-string";
17-
18-
12+
import { useHistory, useLocation, useParams } from 'react-router-dom';
13+
import ScheduleView from '../../ScheduleView';
14+
import Tabs from '../../Tabs';
15+
import { CheckRunMonitoringScheduleGroup } from '../../../shared/enums/scheduling.enum';
16+
import {
17+
getFirstLevelActiveTab,
18+
getFirstLevelState
19+
} from '../../../redux/selectors';
20+
import { CheckTypes } from '../../../shared/routes';
21+
import qs from 'query-string';
1922

2023
const ScheduleDetail = () => {
21-
const { connection, checkTypes }: { checkTypes: CheckTypes, connection: string } = useParams();
22-
24+
const {
25+
connection,
26+
checkTypes
27+
}: { checkTypes: CheckTypes; connection: string } = useParams();
28+
2329
const getPageTabs = () => {
2430
switch (checkTypes) {
2531
case CheckTypes.PROFILING: {
@@ -84,12 +90,17 @@ const ScheduleDetail = () => {
8490
const [tabs, setTabs] = useState(getPageTabs());
8591
const dispatch = useActionDispatch();
8692
const location = useLocation() as any;
87-
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(location.search) as any;
93+
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(
94+
location.search
95+
) as any;
8896
const history = useHistory();
8997

9098
const firstLevelActiveTab = useSelector(getFirstLevelActiveTab(checkTypes));
9199

92-
const { scheduleGroups, isUpdating }: {
100+
const {
101+
scheduleGroups,
102+
isUpdating
103+
}: {
93104
scheduleGroups?: any;
94105
isUpdating?: boolean;
95106
} = useSelector(getFirstLevelState(checkTypes));
@@ -98,11 +109,18 @@ const ScheduleDetail = () => {
98109
const isUpdatedSchedule = scheduleGroups?.[activeTab]?.isUpdatedSchedule;
99110

100111
const onChangeTab = (tab: CheckRunMonitoringScheduleGroup) => {
101-
history.push(`${location.pathname}?activeTab=${tab}`)
102-
}
112+
history.push(`${location.pathname}?activeTab=${tab}`);
113+
};
103114

104115
const handleChange = (obj: any) => {
105-
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, true));
116+
dispatch(
117+
setIsUpdatedSchedulingGroup(
118+
checkTypes,
119+
firstLevelActiveTab,
120+
activeTab,
121+
true
122+
)
123+
);
106124
dispatch(
107125
setUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, {
108126
...updatedSchedule,
@@ -113,39 +131,74 @@ const ScheduleDetail = () => {
113131

114132
useEffect(() => {
115133
if (updatedSchedule === null || updatedSchedule === undefined) {
116-
dispatch(getConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab));
134+
dispatch(
135+
getConnectionSchedulingGroup(
136+
checkTypes,
137+
firstLevelActiveTab,
138+
connection,
139+
activeTab
140+
)
141+
);
117142
}
118143
}, [connection, activeTab, updatedSchedule]);
119144

120145
const onUpdate = async () => {
121146
if (updatedSchedule === null || updatedSchedule === undefined) {
122147
return;
123148
}
124-
await dispatch(updateConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab, updatedSchedule));
125-
await dispatch(getConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab));
126-
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, false));
149+
await dispatch(
150+
updateConnectionSchedulingGroup(
151+
checkTypes,
152+
firstLevelActiveTab,
153+
connection,
154+
activeTab,
155+
updatedSchedule
156+
)
157+
);
158+
await dispatch(
159+
getConnectionSchedulingGroup(
160+
checkTypes,
161+
firstLevelActiveTab,
162+
connection,
163+
activeTab
164+
)
165+
);
166+
dispatch(
167+
setIsUpdatedSchedulingGroup(
168+
checkTypes,
169+
firstLevelActiveTab,
170+
activeTab,
171+
false
172+
)
173+
);
127174
};
128175

129176
useEffect(() => {
130-
setTabs(prev => prev.map(tab => tab.value === activeTab ? ({ ...tab, isUpdated: isUpdatedSchedule }) : tab))
177+
setTabs((prev) =>
178+
prev.map((tab) =>
179+
tab.value === activeTab ? { ...tab, isUpdated: isUpdatedSchedule } : tab
180+
)
181+
);
131182
}, [isUpdatedSchedule, activeTab]);
132183

133184
useEffect(() => {
134-
setTabs(prev => prev.map(tab => ({ ...tab, isUpdate: false })))
185+
setTabs((prev) => prev.map((tab) => ({ ...tab, isUpdate: false })));
135186
dispatch(resetConnectionSchedulingGroup(checkTypes, firstLevelActiveTab));
136187
}, [connection]);
137188

138189
return (
139-
<div className="py-4 px-8">
190+
<div className="py-2">
140191
<ConnectionActionGroup
141192
onUpdate={onUpdate}
142193
isUpdated={isUpdatedSchedule}
143194
isUpdating={isUpdating}
144195
/>
145-
<div className="border-b border-gray-300">
196+
<div className="border-b border-gray-300 px-0">
146197
<Tabs tabs={tabs} activeTab={activeTab} onChange={onChangeTab} />
147198
</div>
148-
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
199+
<div className="px-8">
200+
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
201+
</div>
149202
</div>
150203
);
151204
};

‎dqops/src/main/frontend/src/components/Connection/TableView/ScheduleDetail.tsx

+91-27
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,22 @@ import ActionGroup from './TableActionGroup';
33
import { useSelector } from 'react-redux';
44
import { useActionDispatch } from '../../../hooks/useActionDispatch';
55
import {
6-
getTableSchedulingGroup, resetTableSchedulingGroup, setIsUpdatedSchedulingGroup,
6+
getTableSchedulingGroup,
7+
resetTableSchedulingGroup,
8+
setIsUpdatedSchedulingGroup,
79
setUpdatedSchedulingGroup,
810
updateTableSchedulingGroup
911
} from '../../../redux/actions/table.actions';
10-
import { useHistory, useParams } from "react-router-dom";
11-
import ScheduleView from "../../ScheduleView";
12-
import { CheckRunMonitoringScheduleGroup } from "../../../shared/enums/scheduling.enum";
13-
import Tabs from "../../Tabs";
14-
import { getFirstLevelActiveTab, getFirstLevelState } from "../../../redux/selectors";
15-
import { CheckTypes } from "../../../shared/routes";
16-
import qs from "query-string";
17-
12+
import { useHistory, useParams } from 'react-router-dom';
13+
import ScheduleView from '../../ScheduleView';
14+
import { CheckRunMonitoringScheduleGroup } from '../../../shared/enums/scheduling.enum';
15+
import Tabs from '../../Tabs';
16+
import {
17+
getFirstLevelActiveTab,
18+
getFirstLevelState
19+
} from '../../../redux/selectors';
20+
import { CheckTypes } from '../../../shared/routes';
21+
import qs from 'query-string';
1822

1923
const pageTabs = [
2024
{
@@ -36,33 +40,63 @@ const pageTabs = [
3640
{
3741
label: 'Partition Monthly',
3842
value: CheckRunMonitoringScheduleGroup.partitioned_monthly
39-
},
40-
]
43+
}
44+
];
4145

4246
const ScheduleDetail = () => {
43-
const { checkTypes, connection: connectionName, schema: schemaName, table: tableName }: { checkTypes: CheckTypes, connection: string, schema: string, table: string } = useParams();
47+
const {
48+
checkTypes,
49+
connection: connectionName,
50+
schema: schemaName,
51+
table: tableName
52+
}: {
53+
checkTypes: CheckTypes;
54+
connection: string;
55+
schema: string;
56+
table: string;
57+
} = useParams();
4458
const [tabs, setTabs] = useState(pageTabs);
45-
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(location.search) as any;
59+
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(
60+
location.search
61+
) as any;
4662

47-
const { isUpdating, scheduleGroups } = useSelector(getFirstLevelState(checkTypes));
63+
const { isUpdating, scheduleGroups } = useSelector(
64+
getFirstLevelState(checkTypes)
65+
);
4866
const updatedSchedule = scheduleGroups?.[activeTab]?.updatedSchedule;
4967
const isUpdatedSchedule = scheduleGroups?.[activeTab]?.isUpdatedSchedule;
5068
const firstLevelActiveTab = useSelector(getFirstLevelActiveTab(checkTypes));
5169
const history = useHistory();
5270

5371
const dispatch = useActionDispatch();
5472
const onChangeTab = (tab: CheckRunMonitoringScheduleGroup) => {
55-
history.push(`${location.pathname}?activeTab=${tab}`)
56-
}
73+
history.push(`${location.pathname}?activeTab=${tab}`);
74+
};
5775

5876
useEffect(() => {
5977
if (updatedSchedule === null || updatedSchedule === undefined) {
60-
dispatch(getTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab));
78+
dispatch(
79+
getTableSchedulingGroup(
80+
checkTypes,
81+
firstLevelActiveTab,
82+
connectionName,
83+
schemaName,
84+
tableName,
85+
activeTab
86+
)
87+
);
6188
}
6289
}, [connectionName, schemaName, tableName, activeTab, updatedSchedule]);
6390

6491
const handleChange = (obj: any) => {
65-
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, true));
92+
dispatch(
93+
setIsUpdatedSchedulingGroup(
94+
checkTypes,
95+
firstLevelActiveTab,
96+
activeTab,
97+
true
98+
)
99+
);
66100
dispatch(
67101
setUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, {
68102
...updatedSchedule,
@@ -76,22 +110,50 @@ const ScheduleDetail = () => {
76110
return;
77111
}
78112
await dispatch(
79-
updateTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab, updatedSchedule)
113+
updateTableSchedulingGroup(
114+
checkTypes,
115+
firstLevelActiveTab,
116+
connectionName,
117+
schemaName,
118+
tableName,
119+
activeTab,
120+
updatedSchedule
121+
)
122+
);
123+
await dispatch(
124+
getTableSchedulingGroup(
125+
checkTypes,
126+
firstLevelActiveTab,
127+
connectionName,
128+
schemaName,
129+
tableName,
130+
activeTab
131+
)
132+
);
133+
dispatch(
134+
setIsUpdatedSchedulingGroup(
135+
checkTypes,
136+
firstLevelActiveTab,
137+
activeTab,
138+
false
139+
)
80140
);
81-
await dispatch(getTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab));
82-
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, false));
83141
};
84142

85143
useEffect(() => {
86-
setTabs(prev => prev.map(tab => tab.value === activeTab ? ({ ...tab, isUpdated: isUpdatedSchedule }) : tab))
87-
}, [isUpdatedSchedule, activeTab])
144+
setTabs((prev) =>
145+
prev.map((tab) =>
146+
tab.value === activeTab ? { ...tab, isUpdated: isUpdatedSchedule } : tab
147+
)
148+
);
149+
}, [isUpdatedSchedule, activeTab]);
88150

89151
useEffect(() => {
90-
setTabs(prev => prev.map(tab => ({ ...tab, isUpdate: false })))
152+
setTabs((prev) => prev.map((tab) => ({ ...tab, isUpdate: false })));
91153
dispatch(resetTableSchedulingGroup(checkTypes, firstLevelActiveTab));
92-
}, [checkTypes, firstLevelActiveTab])
154+
}, [checkTypes, firstLevelActiveTab]);
93155
return (
94-
<div className="py-4 px-8">
156+
<div className="py-2">
95157
<ActionGroup
96158
onUpdate={onUpdate}
97159
isUpdated={isUpdatedSchedule}
@@ -100,7 +162,9 @@ const ScheduleDetail = () => {
100162
<div className="border-b border-gray-300">
101163
<Tabs tabs={tabs} activeTab={activeTab} onChange={onChangeTab} />
102164
</div>
103-
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
165+
<div className="px-8">
166+
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
167+
</div>
104168
</div>
105169
);
106170
};

0 commit comments

Comments
 (0)