11import { useDispatch , useSelector } from "react-redux" ;
22import styled from "styled-components" ;
3- import { CloseIcon } from "lowcoder-design" ;
3+ import { CloseIcon , ArchiveIcon , Tabs } from "lowcoder-design" ;
44import { AppSnapshotIcon } from "lowcoder-design" ;
55import {
66fetchSnapshotDslAction ,
99setShowAppSnapshot ,
1010} from "redux/reduxActions/appSnapshotActions" ;
1111import dayjs from "dayjs" ;
12- import { Suspense , lazy , useCallback , useEffect , useState } from "react" ;
12+ import { Suspense , lazy , useCallback , useEffect , useMemo , useState } from "react" ;
1313import { currentApplication } from "redux/selectors/applicationSelector" ;
1414import {
1515appSnapshotCountSelector ,
@@ -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+
9195const StyledCloseIcon = styled ( CloseIcon ) `
9296 margin-left: auto;
9397 cursor: pointer;
@@ -151,21 +155,26 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
151155const [ appInfo , setAppInfo ] = useState < AppSummaryInfo > ( currentAppInfo ) ;
152156const isSnapshotDslLoading = useSelector ( isAppSnapshotDslFetching ) ;
153157const 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 ) ) ;
157164application &&
158165dispatch (
159166fetchSnapshotsAction ( {
160167applicationId :application . applicationId ,
161168page :page ,
162169size :PAGE_SIZE ,
170+ archived :isArchivedSnapshot ,
163171onSuccess :onSuccess ,
164172} )
165173) ;
166- } ;
174+ } , [ application , activeTab ] ) ;
167175
168- useMount ( ( ) => {
176+
177+ useEffect ( ( ) => {
169178if ( ! application ) {
170179return ;
171180}
@@ -174,12 +183,17 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
174183return ;
175184}
176185dispatch (
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
184198useEffect ( ( ) => {
185199currentDsl &&
@@ -193,7 +207,10 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
193207return ;
194208}
195209setSelectedItemKey ( snapshotId ) ;
196- dispatch ( setSelectSnapshotId ( snapshotId === CURRENT_ITEM_KEY ?"" :snapshotId ) ) ;
210+ dispatch ( setSelectSnapshotId (
211+ snapshotId === CURRENT_ITEM_KEY ?"" :snapshotId ,
212+ isArchivedSnapshot ,
213+ ) ) ;
197214if ( snapshotId === CURRENT_ITEM_KEY ) {
198215setAppInfo ( currentAppInfo ) ;
199216return ;
@@ -202,56 +219,108 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
202219return ;
203220}
204221dispatch (
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 ,
246256onClick :( ) => {
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 } } >
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
256325return (
257326< Suspense fallback = { < EditorSkeletonView /> } >
@@ -262,31 +331,13 @@ export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }
262331compInstance = { 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 } } >
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) ;