Merge pull request #121 from kairu-ms/fix-ui-refresh-issue

Fix argument content refresh issue in the workspace editor
Azure · Aug 31, 2022 · caf3fb5 · caf3fb5
2 parents 6294478 + d17a566
commit caf3fb5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/web/src/views/workspace/WSEditor.tsx b/src/web/src/views/workspace/WSEditor.tsx
@@ -30,6 +30,7 @@ interface WSEditorState {
     plane: string,
 
     selected: Command | CommandGroup | null,
+    reloadTimestamp: number | null,
     expanded: Set<string>,
 
     commandMap: CommandMap,
@@ -61,6 +62,7 @@ class WSEditor extends React.Component<WSEditorProps, WSEditorState> {
             workspaceUrl: `/AAZ/Editor/Workspaces/${this.props.params.workspaceName}`,
             plane: "",
             selected: null,
+            reloadTimestamp: null,
             expanded: new Set<string>(),
             commandMap: {},
             commandGroupMap: {},
@@ -83,6 +85,7 @@ class WSEditor extends React.Component<WSEditorProps, WSEditorState> {
 
         try {
             const res = await axios.get(workspaceUrl);
+            const reloadTimestamp = Date.now();
             const commandMap: CommandMap = {};
             const commandGroupMap: CommandGroupMap = {};
 
@@ -205,6 +208,7 @@ class WSEditor extends React.Component<WSEditorProps, WSEditorState> {
                     plane: res.data.plane,
                     commandTree: commandTree,
                     selected: selected,
+                    reloadTimestamp: reloadTimestamp,
                     commandMap: commandMap,
                     commandGroupMap: commandGroupMap,
                     expanded: newExpanded,
@@ -315,7 +319,7 @@ class WSEditor extends React.Component<WSEditorProps, WSEditorState> {
     }
 
     render() {
-        const { showSwaggerResourcePicker, showSwaggerReloadDialog, showExportDialog, plane, name, commandTree, selected, workspaceUrl, expanded } = this.state;
+        const { showSwaggerResourcePicker, showSwaggerReloadDialog, showExportDialog, plane, name, commandTree, selected, reloadTimestamp, workspaceUrl, expanded } = this.state;
         const expandedIds: string[] = []
         expanded.forEach((expandId) => {
             expandedIds.push(expandId);
@@ -356,12 +360,14 @@ class WSEditor extends React.Component<WSEditorProps, WSEditorState> {
                         {selected != null && selected.id.startsWith('group:') &&
                             <WSEditorCommandGroupContent
                                 workspaceUrl={workspaceUrl} commandGroup={(selected as CommandGroup)}
+                                reloadTimestamp={reloadTimestamp!}
                                 onUpdateCommandGroup={this.handleCommandGroupUpdate}
                             />
                         }
                         {selected != null && selected.id.startsWith('command:') &&
                             <WSEditorCommandContent
                                 workspaceUrl={workspaceUrl} command={(selected as Command)}
+                                reloadTimestamp={reloadTimestamp!}
                                 onUpdateCommand={this.handleCommandUpdate}
                             />
                         }

diff --git a/src/web/src/views/workspace/WSEditorCommandArgumentsContent.tsx b/src/web/src/views/workspace/WSEditorCommandArgumentsContent.tsx
@@ -12,6 +12,7 @@ import WSECArgumentSimilarPicker, { ArgSimilarTree, BuildArgSimilarTree } from '
 
 function WSEditorCommandArgumentsContent(props: {
     commandUrl: string,
+    reloadTimestamp: number,
 }) {
 
     const [args, setArgs] = useState<CMDArg[]>([]);
@@ -31,7 +32,7 @@ function WSEditorCommandArgumentsContent(props: {
 
     useEffect(() => {
         refreshData();
-    }, [props.commandUrl]);
+    }, [props.commandUrl, props.reloadTimestamp]);
 
     const handleArgumentDialogClose = (updated: boolean) => {
         setDisplayArgumentDialog(false);

diff --git a/src/web/src/views/workspace/WSEditorCommandContent.tsx b/src/web/src/views/workspace/WSEditorCommandContent.tsx
@@ -54,6 +54,7 @@ interface ResponseCommands {
 interface WSEditorCommandContentProps {
     workspaceUrl: string
     command: Command
+    reloadTimestamp: number
     onUpdateCommand: (command: Command | null) => void
 }
 
@@ -158,7 +159,7 @@ class WSEditorCommandContent extends React.Component<WSEditorCommandContentProps
     }
 
     render() {
-        const { workspaceUrl, command } = this.props;
+        const { workspaceUrl, command, reloadTimestamp } = this.props;
         const name = commandPrefix + this.props.command.names.join(' ');
         const shortHelp = this.props.command.help?.short;
         const longHelp = this.props.command.help?.lines?.join('\n');
@@ -345,7 +346,7 @@ class WSEditorCommandContent extends React.Component<WSEditorCommandContentProps
                             mt: 1,
                             p: 2
                         }}>
-                        <WSEditorCommandArgumentsContent commandUrl={commandUrl} />
+                        <WSEditorCommandArgumentsContent commandUrl={commandUrl} reloadTimestamp={reloadTimestamp} />
                     </Card>
 
                     <Card

diff --git a/src/web/src/views/workspace/WSEditorCommandGroupContent.tsx b/src/web/src/views/workspace/WSEditorCommandGroupContent.tsx
@@ -37,6 +37,7 @@ const commandPrefix = 'az '
 interface WSEditorCommandGroupContentProps {
     workspaceUrl: string
     commandGroup: CommandGroup
+    reloadTimestamp: number
     onUpdateCommandGroup: (commandGroup: CommandGroup | null) => void
 }