Skip to content

Commit 6827626

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1326 from lowcoder-org/archived_snapshots
Show recent and archived snapshots for app
2 parents d12d09d + 28a7f2b commit 6827626

File tree

9 files changed

+188
-95
lines changed

9 files changed

+188
-95
lines changed

‎client/packages/lowcoder-design/src/icons/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { ReactComponent as AppSnapshotIcon } from "./v1/app-snapshot.svg";
2+
export { ReactComponent as ArchiveIcon } from "./remix/archive-fill.svg";
23
export { ReactComponent as HookCompDropIcon } from "./v1/hook-comp-drop.svg";
34
export { ReactComponent as HookCompIcon } from "./v1/hook-comp.svg";
45

‎client/packages/lowcoder/src/api/appSnapshotApi.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,34 @@ export interface AppSnapshotDslResp extends ApiResponse {
2222
class AppSnapshotApi extends Api {
2323
static createSnapshotURL = "/application/history-snapshots";
2424
static snapshotsURL = (appId: string) => `/application/history-snapshots/${appId}`;
25+
static archiveSnapshotsURL = (appId: string) => `/application/history-snapshots/archive/${appId}`;
2526
static snapshotDslURL = (appId: string, snapshotId: string) =>
2627
`/application/history-snapshots/${appId}/${snapshotId}`;
27-
28+
static archiveSnapshotDslURL = (appId: string, snapshotId: string) =>
29+
`/application/history-snapshots/archive/${appId}/${snapshotId}`;
2830
static createSnapshot(request: CreateSnapshotPayload): AxiosPromise<ApiResponse> {
2931
return Api.post(AppSnapshotApi.createSnapshotURL, request);
3032
}
3133

32-
static getSnapshots(appId: string, pagination: PaginationParam): AxiosPromise<AppSnapshotsResp> {
34+
static getSnapshots(
35+
appId: string,
36+
pagination: PaginationParam,
37+
archived?: boolean,
38+
): AxiosPromise<AppSnapshotsResp> {
39+
if (archived) {
40+
return Api.get(AppSnapshotApi.archiveSnapshotsURL(appId), pagination);
41+
}
3342
return Api.get(AppSnapshotApi.snapshotsURL(appId), pagination);
3443
}
3544

36-
static getSnapshotDsl(appId: string, snapshotId: string): AxiosPromise<AppSnapshotDslResp> {
45+
static getSnapshotDsl(
46+
appId: string,
47+
snapshotId: string,
48+
archived?: boolean,
49+
): AxiosPromise<AppSnapshotDslResp> {
50+
if (archived) {
51+
return Api.get(AppSnapshotApi.archiveSnapshotDslURL(appId, snapshotId));
52+
}
3753
return Api.get(AppSnapshotApi.snapshotDslURL(appId, snapshotId));
3854
}
3955
}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ let StepControlBasicComp = (function () {
193193
>
194194
{props.options.map((option, index) => (
195195
<Steps.Step
196-
style={{minWidth:props.minHorizontalWidth || '100%'}}
196+
style={{minWidth:props.minHorizontalWidth || 'auto'}}
197197
key={index}
198198
title={option.label}
199199
subTitle={option.subTitle}

‎client/packages/lowcoder/src/pages/common/header.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ export default function Header(props: HeaderProps) {
372372
const applicationId = useApplicationId();
373373
const dispatch = useDispatch();
374374
const showAppSnapshot = useSelector(showAppSnapshotSelector);
375-
const selectedSnapshot = useSelector(getSelectedAppSnapshot);
375+
const {selectedSnapshot, isArchivedSnapshot} = useSelector(getSelectedAppSnapshot);
376376
const { appType } = useContext(ExternalEditorContext);
377377
const [editName, setEditName] = useState(false);
378378
const [editing, setEditing] = useState(false);
@@ -512,7 +512,8 @@ export default function Header(props: HeaderProps) {
512512
recoverSnapshotAction(
513513
application.applicationId,
514514
selectedSnapshot.snapshotId,
515-
selectedSnapshot.createTime
515+
selectedSnapshot.createTime,
516+
isArchivedSnapshot,
516517
)
517518
);
518519
},

‎client/packages/lowcoder/src/pages/editor/appSnapshot.tsx‎

Lines changed: 130 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useDispatch, useSelector } from "react-redux";
22
import styled from "styled-components";
3-
import { CloseIcon } from "lowcoder-design";
3+
import { CloseIcon, ArchiveIcon, Tabs } from "lowcoder-design";
44
import { AppSnapshotIcon } from "lowcoder-design";
55
import {
66
fetchSnapshotDslAction,
@@ -9,7 +9,7 @@ import {
99
setShowAppSnapshot,
1010
} from "redux/reduxActions/appSnapshotActions";
1111
import dayjs from "dayjs";
12-
import { Suspense, lazy, useCallback, useEffect, useState } from "react";
12+
import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from "react";
1313
import { currentApplication } from "redux/selectors/applicationSelector";
1414
import {
1515
appSnapshotCountSelector,
@@ -88,6 +88,10 @@ const StyledSnapshotIcon = styled(AppSnapshotIcon)`
8888
margin-right: 4px;
8989
`;
9090

91+
const StyledSnapshotArchiveIcon = styled(ArchiveIcon)`
92+
margin-right: 4px;
93+
`;
94+
9195
const StyledCloseIcon = styled(CloseIcon)`
9296
margin-left: auto;
9397
cursor: pointer;
@@ -151,21 +155,26 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
151155
const [appInfo, setAppInfo] = useState<AppSummaryInfo>(currentAppInfo);
152156
const isSnapshotDslLoading = useSelector(isAppSnapshotDslFetching);
153157
const compInstance = useRootCompInstance(appInfo, true, true);
158+
const [activeTab, setActiveTab] = useState("recent");
159+
160+
const isArchivedSnapshot = useMemo(() => activeTab === 'archive', [activeTab]);
154161

155-
const fetchSnapshotList = (page: number, onSuccess?: (snapshots: AppSnapshotList) => void) => {
156-
dispatch(setSelectSnapshotId(""));
162+
const fetchSnapshotList = useCallback((page: number, onSuccess?: (snapshots: AppSnapshotList) => void) => {
163+
dispatch(setSelectSnapshotId("", isArchivedSnapshot));
157164
application &&
158165
dispatch(
159166
fetchSnapshotsAction({
160167
applicationId: application.applicationId,
161168
page: page,
162169
size: PAGE_SIZE,
170+
archived: isArchivedSnapshot,
163171
onSuccess: onSuccess,
164172
})
165173
);
166-
};
174+
}, [application, activeTab]);
167175

168-
useMount(() => {
176+
177+
useEffect(() => {
169178
if (!application) {
170179
return;
171180
}
@@ -174,12 +183,17 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
174183
return;
175184
}
176185
dispatch(
177-
fetchSnapshotDslAction(application.applicationId, snapshots.list[0].snapshotId, (res) => {
178-
setLatestDsl(res);
179-
})
186+
fetchSnapshotDslAction(
187+
application.applicationId,
188+
snapshots.list[0].snapshotId,
189+
isArchivedSnapshot,
190+
(res) => {
191+
setLatestDsl(res);
192+
}
193+
)
180194
);
181195
});
182-
});
196+
}, [application, activeTab]);
183197

184198
useEffect(() => {
185199
currentDsl &&
@@ -193,7 +207,10 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
193207
return;
194208
}
195209
setSelectedItemKey(snapshotId);
196-
dispatch(setSelectSnapshotId(snapshotId === CURRENT_ITEM_KEY ? "" : snapshotId));
210+
dispatch(setSelectSnapshotId(
211+
snapshotId === CURRENT_ITEM_KEY ? "" : snapshotId,
212+
isArchivedSnapshot,
213+
));
197214
if (snapshotId === CURRENT_ITEM_KEY) {
198215
setAppInfo(currentAppInfo);
199216
return;
@@ -202,56 +219,108 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
202219
return;
203220
}
204221
dispatch(
205-
fetchSnapshotDslAction(application.applicationId, snapshotId, (dsl) => {
206-
setAppInfo((i) => ({
207-
...i,
208-
dsl: dsl.applicationsDsl,
209-
moduleDsl: dsl.moduleDSL,
210-
}));
211-
})
222+
fetchSnapshotDslAction(
223+
application.applicationId,
224+
snapshotId,
225+
isArchivedSnapshot,
226+
(dsl) => {
227+
setAppInfo((i) => ({
228+
...i,
229+
dsl: dsl.applicationsDsl,
230+
moduleDsl: dsl.moduleDSL,
231+
}));
232+
}
233+
)
212234
);
213235
},
214-
[application, currentAppInfo, dispatch, setAppInfo, selectedItemKey]
236+
[application, currentAppInfo, dispatch, setAppInfo, selectedItemKey, activeTab]
215237
);
216238

217-
let snapShotContent;
218-
if (snapshotsFetching || (currentPage === 1 && appSnapshots.length > 0 && !latestDsl)) {
219-
snapShotContent = <Skeleton style={{ padding: "0 16px" }} active paragraph={{ rows: 10 }} />;
220-
} else if (appSnapshots.length <= 0 || !application) {
221-
snapShotContent = <EmptyContent text={trans("history.emptyHistory")} />;
222-
} else {
223-
let snapshotItems: SnapshotItemProps[] = appSnapshots.map((snapshot, index) => {
224-
return {
225-
selected: selectedItemKey === snapshot.snapshotId,
226-
title:
227-
`${
228-
!latestDslChanged && currentPage === 1 && index === 0
229-
? trans("history.currentVersionWithBracket")
230-
: ""
231-
}` + getOperationDesc(snapshot.context),
232-
timeInfo: timestampToHumanReadable(snapshot.createTime),
233-
userName: snapshot.userName,
234-
onClick: () => {
235-
onSnapshotItemClick(snapshot.snapshotId);
236-
},
237-
};
238-
});
239-
if (currentPage === 1 && latestDslChanged) {
240-
snapshotItems = [
241-
{
242-
selected: selectedItemKey === CURRENT_ITEM_KEY,
243-
title: trans("history.currentVersion"),
244-
timeInfo: trans("history.justNow"),
245-
userName: user.username,
239+
const snapShotContent = useMemo(() => {
240+
if (snapshotsFetching || (currentPage === 1 && appSnapshots.length > 0 && !latestDsl)) {
241+
return <Skeleton style={{ padding: "0 16px" }} active paragraph={{ rows: 10 }} />;
242+
} else if (appSnapshots.length <= 0 || !application) {
243+
return <EmptyContent text={trans("history.emptyHistory")} />;
244+
} else {
245+
let snapshotItems: SnapshotItemProps[] = appSnapshots.map((snapshot, index) => {
246+
return {
247+
selected: selectedItemKey === snapshot.snapshotId,
248+
title:
249+
`${
250+
!latestDslChanged && currentPage === 1 && index === 0
251+
? trans("history.currentVersionWithBracket")
252+
: ""
253+
}` + getOperationDesc(snapshot.context),
254+
timeInfo: timestampToHumanReadable(snapshot.createTime),
255+
userName: snapshot.userName,
246256
onClick: () => {
247-
onSnapshotItemClick(CURRENT_ITEM_KEY);
257+
onSnapshotItemClick(snapshot.snapshotId);
258+
},
259+
};
260+
});
261+
if (currentPage === 1 && latestDslChanged) {
262+
snapshotItems = [
263+
{
264+
selected: selectedItemKey === CURRENT_ITEM_KEY,
265+
title: trans("history.currentVersion"),
266+
timeInfo: trans("history.justNow"),
267+
userName: user.username,
268+
onClick: () => {
269+
onSnapshotItemClick(CURRENT_ITEM_KEY);
270+
},
248271
},
249-
},
250-
...snapshotItems,
251-
];
272+
...snapshotItems,
273+
];
274+
}
275+
return <SnapshotList items={snapshotItems} />;
252276
}
253-
snapShotContent = <SnapshotList items={snapshotItems} />;
254-
}
277+
}, [
278+
user,
279+
snapshotsFetching,
280+
currentPage,
281+
appSnapshots,
282+
latestDsl,
283+
application,
284+
selectedItemKey,
285+
latestDslChanged,
286+
onSnapshotItemClick,
287+
]);
288+
289+
const TabContent = useMemo(() => (
290+
<>
291+
<ScrollBar height={`calc(100% - ${headerHeight + footerHeight}px)`}>
292+
<SnapshotContent>{snapShotContent}</SnapshotContent>
293+
</ScrollBar>
294+
<SnapshotFooter>
295+
<TacoPagination
296+
current={currentPage}
297+
showLessItems
298+
onChange={(page) => {
299+
setCurrentPage(page);
300+
fetchSnapshotList(page);
301+
}}
302+
total={totalCount}
303+
pageSize={PAGE_SIZE}
304+
showSizeChanger={false}
305+
/>
306+
</SnapshotFooter>
307+
</>
308+
), [headerHeight, footerHeight, snapShotContent, currentPage, totalCount]);
309+
310+
const tabConfigs = useMemo(() => [
311+
{
312+
key: "recent",
313+
title: "Recent",
314+
icon: <StyledSnapshotIcon />,
315+
content: TabContent,
316+
},
317+
{
318+
key: "archive",
319+
title: "Archive",
320+
icon: <StyledSnapshotArchiveIcon />,
321+
content: TabContent,
322+
}
323+
], [TabContent]);
255324

256325
return (
257326
<Suspense fallback={<EditorSkeletonView />}>
@@ -262,31 +331,13 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
262331
compInstance={compInstance}
263332
/>
264333
<AppSnapshotPanel>
265-
<SnapshotHeader>
266-
<StyledSnapshotIcon />
267-
<span>{trans("history.history")}</span>
268-
<StyledCloseIcon
269-
onClick={() => {
270-
dispatch(setShowAppSnapshot(false));
271-
}}
272-
/>
273-
</SnapshotHeader>
274-
<ScrollBar height={`calc(100% - ${headerHeight + footerHeight}px)`}>
275-
<SnapshotContent>{snapShotContent}</SnapshotContent>
276-
</ScrollBar>
277-
<SnapshotFooter>
278-
<TacoPagination
279-
current={currentPage}
280-
showLessItems
281-
onChange={(page) => {
282-
setCurrentPage(page);
283-
fetchSnapshotList(page);
284-
}}
285-
total={totalCount}
286-
pageSize={PAGE_SIZE}
287-
showSizeChanger={false}
288-
/>
289-
</SnapshotFooter>
334+
<Tabs
335+
onChange={(key) => {
336+
setActiveTab(key);
337+
}}
338+
tabsConfig={tabConfigs}
339+
activeKey={activeTab}
340+
/>
290341
</AppSnapshotPanel>
291342
</Suspense>
292343
);

‎client/packages/lowcoder/src/redux/reducers/uiReducers/appSnapshotReducer.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const initialState: AppSnapshotState = {
1414
showAppSnapshot: false,
1515
snapshotDslFetching: false,
1616
selectedSnapshotId: "",
17+
isSelectedSnapshotIdArchived: false,
1718
};
1819

1920
const appSnapshotReducer = createReducer(initialState, {
@@ -28,11 +29,12 @@ const appSnapshotReducer = createReducer(initialState, {
2829
},
2930
[ReduxActionTypes.SET_SELECT_SNAPSHOT_ID]: (
3031
state: AppSnapshotState,
31-
action: ReduxAction<{ snapshotId: string }>
32+
action: ReduxAction<{ snapshotId: string, archived?: boolean }>
3233
): AppSnapshotState => {
3334
return {
3435
...state,
3536
selectedSnapshotId: action.payload.snapshotId,
37+
isSelectedSnapshotIdArchived: action.payload.archived,
3638
};
3739
},
3840
[ReduxActionTypes.FETCH_APP_SNAPSHOT_DSL]: (state: AppSnapshotState): AppSnapshotState => {
@@ -115,6 +117,7 @@ export interface AppSnapshotState {
115117
appSnapshotCount: number;
116118
showAppSnapshot: boolean;
117119
selectedSnapshotId: string;
120+
isSelectedSnapshotIdArchived?: boolean;
118121
}
119122

120123
export default appSnapshotReducer;

0 commit comments

Comments
 (0)