Skip to content

Commit 06c4292

Browse files
HSunboyHSunboy
committed
Merge branch 'dev-4.3.0' of https://code.alipay.com/oceanbase/oceanbase-developer-center into dev-4.3.0
2 parents 0edf91b + 7848043 commit 06c4292

File tree

27 files changed

+1687
-996
lines changed

27 files changed

+1687
-996
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"devDependencies": {
7373
"@ant-design/icons": "^4.0.0",
7474
"@oceanbase-odc/monaco-plugin-ob": "^0.2.2",
75-
"@oceanbase-odc/ob-intl-cli": "^2.0.9",
75+
"@oceanbase-odc/ob-intl-cli": "^2.0.10",
7676
"@oceanbase-odc/ob-parser-js": "^3.0.3",
7777
"@oceanbase-odc/ob-react-data-grid": "^3.0.10",
7878
"@sentry/react": "^7.88.0",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/common/network/databaseChange.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export type Template = {
77
name: string;
88
projectId: number;
99
orders: number[][];
10+
databaseSequenceList?: any[];
1011
};
1112
export type MultipleDatabase = {
1213
id: number;
@@ -66,8 +67,8 @@ export async function editTemplate(templateId: number, template: Template): Prom
6667
export async function detailTemplate(
6768
templateId: number,
6869
currentOrganizationId: string,
69-
): Promise<MultipleDatabase> {
70-
const response: IResponse<MultipleDatabase> = await request.get(
70+
): Promise<Template> {
71+
const response: IResponse<Template> = await request.get(
7172
`/api/v2/databasechange/changingorder/templates/${templateId}`,
7273
{
7374
params: {

‎src/component/Task/MutipleAsyncTask/CreateModal/InnerSelecter.tsx‎

Lines changed: 91 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,32 @@ import styles from './index.less';
1313
import { flatArray } from '.';
1414
import classNames from 'classnames';
1515
import RiskLevelLabel from '@/component/RiskLevelLabel';
16+
import ConnectionPopover from '@/component/ConnectionPopover';
1617

17-
type DatabaseOption = {
18+
export type DatabaseOption = {
1819
label: string;
1920
value: number;
2021
dataSource: IConnection;
2122
environment: IEnvironment;
2223
existed: boolean;
24+
disabled: boolean;
25+
expired: boolean;
2326
};
2427
const InnerSelect: React.FC<{
28+
rootName: (number | string)[];
2529
innerName: number;
2630
outerName: number;
2731
innerIndex: number;
28-
projectId: number;
32+
disabled: boolean;
2933
databaseOptions: DatabaseOption[];
3034
innerRemove: (value: number) => void;
31-
}> = ({ innerName, outerName, innerIndex, projectId, databaseOptions, innerRemove }) => {
35+
}> = ({ rootName, innerName, outerName, innerIndex, disabled, databaseOptions, innerRemove }) => {
3236
const ref = useRef(null);
3337
const form = Form.useFormInstance();
3438
const [searchValue, setSearchValue] = useState<string>();
35-
const orderedDatabaseIds = useWatch<number[][]>(['parameters', 'orderedDatabaseIds'], form);
36-
const currentOrderedDatabaseIds = useWatch<number[]>(
37-
['parameters', 'orderedDatabaseIds', outerName],
38-
form,
39-
);
40-
const currnetOrderedDatabaseId = useWatch<number>(
41-
['parameters', 'orderedDatabaseIds', outerName, innerName],
42-
form,
43-
);
39+
const orderedDatabaseIds = useWatch<number[][]>(rootName, form);
40+
const currentOrderedDatabaseIds = useWatch<number[]>([...rootName, outerName], form);
41+
const currnetOrderedDatabaseId = useWatch<number>([...rootName, outerName, innerName], form);
4442
const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
4543

4644
const databaseOptionMap = databaseOptions?.reduce((pre, cur) => {
@@ -51,7 +49,7 @@ const InnerSelect: React.FC<{
5149
const currentOrderedDatabaseId = currentOrderedDatabaseIds[originIndex];
5250
currentOrderedDatabaseIds.splice(originIndex, 1);
5351
currentOrderedDatabaseIds.splice(targetIndex, 0, currentOrderedDatabaseId);
54-
form.setFieldValue(['parameters', 'orderedDatabaseIds', origin], currentOrderedDatabaseIds);
52+
form.setFieldValue([...rootName, origin], currentOrderedDatabaseIds);
5553
};
5654
const [{ canDrop, isOver }, drop] = useDrop({
5755
accept: 'box',
@@ -73,7 +71,7 @@ const InnerSelect: React.FC<{
7371
originOrderedDatabaseIds?.splice(item?.originInnerIndex, 1);
7472
orderedDatabaseIds?.splice(item?.originOuterName, 1, originOrderedDatabaseIds);
7573
const newOrderedDatabaseIds = orderedDatabaseIds?.filter((ids) => ids?.length);
76-
form.setFieldValue(['parameters', 'orderedDatabaseIds'], newOrderedDatabaseIds);
74+
form.setFieldValue(rootName, newOrderedDatabaseIds);
7775
}
7876
},
7977
collect: (monitor) => {
@@ -156,70 +154,81 @@ const InnerSelect: React.FC<{
156154
);
157155
}
158156
};
159-
const renderItem = (item: DatabaseOption) => {
157+
const renderItem = (
158+
item: DatabaseOption,
159+
setSearchValue: React.Dispatch<React.SetStateAction<string>>,
160+
) => {
160161
const icon = getDataSourceStyleByConnectType(item?.dataSource?.type);
161162
const databaseIds = flatArray(orderedDatabaseIds);
162-
const isDisabled = databaseIds?.includes(item?.value);
163+
const isSelected = databaseIds?.includes(item?.value);
163164
return (
164-
<div
165-
title={item?.label}
166-
key={item?.value}
167-
data-key={item?.value}
168-
onClick={() => {
169-
if (isDisabled) {
170-
return;
171-
}
172-
form.setFieldValue(
173-
['parameters', 'orderedDatabaseIds', outerName, innerName],
174-
item?.value,
175-
);
176-
setPopoverOpen(false);
177-
}}
165+
<Popover
166+
showArrow={false}
167+
placement={'right'}
168+
content={<ConnectionPopover connection={item?.dataSource} />}
178169
>
179-
<Tooltip
180-
title={
181-
isDisabled
182-
? formatMessage({
183-
id: 'src.component.Task.MutipleAsyncTask.CreateModal.BF1212E7',
184-
defaultMessage: '该数据库已被选中',
185-
})
186-
: null
187-
}
170+
<div
171+
title={item?.label}
172+
key={item?.value}
173+
data-key={item?.value}
174+
onClick={() => {
175+
if (isSelected || item?.expired) {
176+
return;
177+
}
178+
setSearchValue('');
179+
form.setFieldValue([...rootName, outerName, innerName], item?.value);
180+
setPopoverOpen(false);
181+
}}
188182
>
189-
<div
190-
className={classNames(styles.option, {
191-
[styles.optionDisabled]: isDisabled,
192-
})}
183+
<Tooltip
184+
title={
185+
isSelected
186+
? formatMessage({
187+
id: 'src.component.Task.MutipleAsyncTask.CreateModal.BF1212E7',
188+
defaultMessage: '该数据库已被选中',
189+
})
190+
: null
191+
}
193192
>
194-
<Space>
195-
<Icon
196-
component={icon?.icon?.component}
197-
style={{
198-
color: isDisabled ? 'var(--icon-color-disable)' : icon?.icon?.color,
199-
fontSize: 16,
200-
marginRight: 4,
201-
}}
202-
/>
193+
<div
194+
className={classNames(styles.option, {
195+
[styles.optionDisabled]: isSelected || item?.expired,
196+
})}
197+
>
198+
<Space>
199+
<Icon
200+
component={icon?.icon?.component}
201+
style={{
202+
color:
203+
isSelected || item?.expired ? 'var(--icon-color-disable)' : icon?.icon?.color,
204+
fontSize: 16,
205+
marginRight: 4,
206+
}}
207+
/>
203208

209+
<div
210+
style={{
211+
color:
212+
isSelected || item?.expired
213+
? 'var(--mask-color)'
214+
: 'var(--text-color-primary)',
215+
}}
216+
>
217+
{item?.label}
218+
</div>
219+
<div style={{ color: 'var(--mask-color)' }}>{item?.dataSource?.name}</div>
220+
</Space>
204221
<div
205222
style={{
206-
color: isDisabled ? 'var(--mask-color)' : 'var(--text-color-primary)',
223+
height: '6px',
224+
width: '6px',
225+
backgroundColor: item?.environment?.style,
207226
}}
208-
>
209-
{item?.label}
210-
</div>
211-
<div style={{ color: 'var(--mask-color)' }}>{item?.dataSource?.name}</div>
212-
</Space>
213-
<div
214-
style={{
215-
height: '6px',
216-
width: '6px',
217-
backgroundColor: item?.environment?.style,
218-
}}
219-
/>
220-
</div>
221-
</Tooltip>
222-
</div>
227+
/>
228+
</div>
229+
</Tooltip>
230+
</div>
231+
</Popover>
223232
);
224233
};
225234
useEffect(() => {
@@ -230,10 +239,11 @@ const InnerSelect: React.FC<{
230239
return (
231240
<div
232241
ref={ref}
242+
className={styles.dragIem}
233243
style={{
234244
borderTop: isOver ? '1px solid blue' : '1px solid transparent',
235245
opacity: isDragging ? 0 : 1,
236-
width: '430px',
246+
width: '444px',
237247
}}
238248
>
239249
<Form.Item>
@@ -302,18 +312,19 @@ const InnerSelect: React.FC<{
302312
return item;
303313
}
304314
})
305-
?.map((item) => renderItem(item))
306-
: databaseOptions?.map((item) => renderItem(item))}
315+
?.map((item) => renderItem(item, setSearchValue))
316+
: databaseOptions?.map((item) => renderItem(item, setSearchValue))}
307317
</div>
308318
}
309319
>
310320
<Select
311321
showSearch
312322
optionFilterProp="title"
313323
style={{ width: 390 }}
324+
searchValue={searchValue}
314325
onSearch={(searchValue) => setSearchValue(searchValue)}
315326
placeholder={getPlaceholder()}
316-
disabled={!projectId}
327+
disabled={disabled}
317328
allowClear
318329
open={false}
319330
/>
@@ -326,19 +337,17 @@ const InnerSelect: React.FC<{
326337
);
327338
};
328339
const InnerSelecter: React.FC<{
340+
rootName: (number | string)[];
329341
innerFields: FormListFieldData[];
330342
outerName: number;
331-
projectId: number;
343+
disabled: boolean;
332344
databaseOptions: DatabaseOption[];
333345
innerRemove: (index: number | number[]) => void;
334-
}> = ({ innerFields, outerName, projectId, databaseOptions, innerRemove }) => {
346+
}> = ({ rootName, innerFields, outerName, disabled, databaseOptions, innerRemove }) => {
335347
const ref = useRef(null);
336348
const form = Form.useFormInstance();
337-
const orderedDatabaseIds = useWatch<number[][]>(['parameters', 'orderedDatabaseIds'], form);
338-
const currentOrderedDatabaseIds = useWatch<number[]>(
339-
['parameters', 'orderedDatabaseIds', outerName],
340-
form,
341-
);
349+
const orderedDatabaseIds = useWatch<number[][]>(rootName, form);
350+
const currentOrderedDatabaseIds = useWatch<number[]>([...rootName, outerName], form);
342351

343352
const [{ canDrop, isOver }, drop] = useDrop({
344353
accept: 'box',
@@ -351,7 +360,7 @@ const InnerSelecter: React.FC<{
351360
orderedDatabaseIds[outerName] = currentOrderedDatabaseIds;
352361
orderedDatabaseIds?.[item?.originOuterName]?.splice(item?.originInnerIndex, 1);
353362
const newOrderedDatabaseIds = orderedDatabaseIds?.filter((ids) => ids?.length);
354-
form.setFieldValue(['parameters', 'orderedDatabaseIds'], newOrderedDatabaseIds);
363+
form.setFieldValue(rootName, newOrderedDatabaseIds);
355364
},
356365
collect: (monitor) => {
357366
return {
@@ -370,8 +379,9 @@ const InnerSelecter: React.FC<{
370379
<div>
371380
{innerFields?.map(({ key: innerKey, name: innerName, ...innerRestField }, innerIndex) => (
372381
<InnerSelect
382+
rootName={rootName}
373383
key={innerIndex}
374-
projectId={projectId}
384+
disabled={disabled}
375385
databaseOptions={databaseOptions}
376386
innerIndex={innerIndex}
377387
outerName={outerName}

0 commit comments

Comments
 (0)