add spinner in saving project, can avoid multiple commit (microsoft#617)

* add "Saving Project" Spinner

* add isFileExists to IStorageProvider

* sync state.project when project data updated

* Persist user input when project already exists

src/common/mockFactory.ts

@@ -319,6 +319,7 @@ export default class MockFactory {
             createContainer: jest.fn(),
             deleteContainer: jest.fn(),
             getAssets: jest.fn(),
+            isFileExists: jest.fn(),
         };
     }
 

src/electron/providers/storage/localFileSystem.ts

@@ -123,6 +123,10 @@ export default class LocalFileSystem implements IStorageProvider {
         return this.listItems(path.normalize(folderPath), (stats) => !stats.isDirectory());
     }
 
+    public isFileExists(filePath: string): Promise<boolean> {
+        return Promise.resolve(fs.existsSync(path.normalize(filePath)));
+    }
+
     public listContainers(folderPath: string): Promise<string[]> {
         return this.listItems(path.normalize(folderPath), (stats) => stats.isDirectory());
     }

src/providers/storage/azureBlobStorage.ts

@@ -150,6 +150,14 @@ export class AzureBlobStorage implements IStorageProvider {
         }
     }
 
+    /**
+     * check file is exists
+     * @param filePath
+     */
+    public async isFileExists(filePath: string) :Promise<boolean> {
+        const client = this.containerClient.getBlobClient(filePath);
+        return await client.exists();
+    }
     /**
      * Lists the containers with in the Azure Blob Storage account
      * @param path - NOT USED IN CURRENT IMPLEMENTATION. Lists containers in storage account.

src/providers/storage/localFileSystemProxy.ts

@@ -110,6 +110,15 @@ export class LocalFileSystemProxy implements IStorageProvider, IAssetProvider {
         return IpcRendererProxy.send(`${PROXY_NAME}:listFiles`, [folderPath]);
     }
 
+    /**
+     * check file is exists
+     * @param fileName Name of target file
+     */
+    public isFileExists(fileName: string): Promise<boolean> {
+        const filePath = [this.options.folderPath, fileName].join("/");
+        return IpcRendererProxy.send(`${PROXY_NAME}:isFileExists`, [filePath]);
+    }
+
     /**
      * List directories inside another directory
      * @param folderName - Directory from which to list directories

src/providers/storage/storageProviderFactory.test.ts

@@ -48,6 +48,9 @@ class TestStorageProvider implements IStorageProvider {
     public listFiles(folderPath?: string): Promise<string[]> {
         throw new Error("Method not implemented.");
     }
+    isFileExists(filepath: string): Promise<boolean> {
+        throw new Error("Method not implemented.");
+    }
     public listContainers(folderPath?: string): Promise<string[]> {
         throw new Error("Method not implemented.");
     }

src/providers/storage/storageProviderFactory.ts

@@ -35,6 +35,7 @@ export interface IStorageProvider extends IAssetProvider {
     isValidProjectConnection(filepath?): Promise<boolean>;
 
     listFiles(folderPath?: string, ext?: string): Promise<string[]>;
+    isFileExists(filepath: string): Promise<boolean>;
     listContainers(folderPath?: string): Promise<string[]>;
 
     createContainer(folderPath: string): Promise<void>;

src/react/components/pages/projectSettings/projectSettingsPage.scss

@@ -41,8 +41,8 @@
     font-size: 90%;
 
     @media (max-width: 1920px) {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
     }
 
     .hint-content {
@@ -63,7 +63,7 @@
     }
 
     .rv-hint {
-        white-space: nowrap;
+      white-space: nowrap;
     }
   }
 
@@ -80,3 +80,18 @@
   display: flex;
   align-items: center;
 }
+
+.project-saving {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  display: flex;
+  .project-saving-spinner {
+    margin: auto;
+    font-size: 24px;
+  }
+}

src/react/components/pages/projectSettings/projectSettingsPage.tsx

@@ -6,7 +6,7 @@ import { Redirect } from "react-router";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import { RouteComponentProps } from "react-router-dom";
-import { FontIcon } from "@fluentui/react";
+import { FontIcon, Label, Spinner, SpinnerSize } from "@fluentui/react";
 import ProjectForm from "./projectForm";
 import { constants } from "../../../../common/constants";
 import { strings, interpolate } from "../../../../common/strings";
@@ -43,6 +43,7 @@ export interface IProjectSettingsPageState {
     project: IProject;
     action: ProjectSettingAction;
     isError: boolean;
+    isCommiting: boolean;
 }
 
 function mapStateToProps(state: IApplicationState) {
@@ -72,6 +73,7 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
         project: this.props.project,
         action: null,
         isError: false,
+        isCommiting: false,
     };
 
     public async componentDidMount() {
@@ -107,6 +109,11 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
         }
     }
 
+    componentWillUnmount() {
+        if (this.state.project?.id) {
+            removeStorageItem(constants.projectFormTempKey);
+        }
+    }
     // Hide ProjectMetrics for private-preview
     public render() {
         return (
@@ -132,6 +139,14 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
                 {this.state.isError &&
                     <Redirect to="/" />
                 }
+                {this.state.isCommiting &&
+                    <div className="project-saving">
+                        <div className="project-saving-spinner">
+                            <Label className="p-0" ></Label>
+                            <Spinner size={SpinnerSize.large} label="Saving Project..." ariaLive="assertive" labelPosition="right" />
+                        </div>
+                    </div>
+                }
             </div>
         );
     }
@@ -171,34 +186,40 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
     private onFormChange = (project: IProject) => {
         if (this.isPartialProject(project)) {
             setStorageItem(constants.projectFormTempKey, JSON.stringify(project));
+            this.setState({ project });
         }
     }
 
     private onFormSubmit = async (project: IProject) => {
         const isNew = !(!!project.id);
+        try {
+            this.setState({ isCommiting: true });
+            const projectService = new ProjectService();
+            if (!(await projectService.isValidProjectConnection(project))) {
+                return;
+            }
 
-        const projectService = new ProjectService();
-        if (!(await projectService.isValidProjectConnection(project))) {
-            return;
-        }
-
-        if (await this.isValidProjectName(project, isNew)) {
-            toast.error(interpolate(strings.projectSettings.messages.projectExisted, { project }));
-            return;
-        }
+            if (await this.isValidProjectName(project, isNew)) {
+                toast.error(interpolate(strings.projectSettings.messages.projectExisted, { project }));
+                return;
+            }
 
-        await this.deleteOldProjectWhenRenamed(project, isNew);
-        await this.props.applicationActions.ensureSecurityToken(project);
-        await this.props.projectActions.saveProject(project, false, true);
-        removeStorageItem(constants.projectFormTempKey);
+            await this.deleteOldProjectWhenRenamed(project, isNew);
+            await this.props.applicationActions.ensureSecurityToken(project);
+            await this.props.projectActions.saveProject(project, false, true);
+            // removeStorageItem(constants.projectFormTempKey);
 
-        toast.success(interpolate(strings.projectSettings.messages.saveSuccess, { project }));
+            toast.success(interpolate(strings.projectSettings.messages.saveSuccess, { project }));
 
-        if (isNew) {
-            this.props.history.push(`/projects/${this.props.project.id}/edit`);
-        } else {
-            this.props.history.goBack();
+            if (isNew) {
+                this.props.history.push(`/projects/${this.props.project.id}/edit`);
+            } else {
+                this.props.history.goBack();
+            }
+        } finally {
+            this.setState({ isCommiting: false });
         }
+
     }
 
     private onFormCancel = () => {
@@ -210,7 +231,7 @@ export default class ProjectSettingsPage extends React.Component<IProjectSetting
      * Checks whether a project is partially populated
      */
     private isPartialProject = (project: IProject): boolean => {
-        return project && !(!!project.id) &&
+        return project &&
             (
                 !!project.name
                 || !!project.description

src/services/projectService.ts

@@ -151,14 +151,7 @@ export default class ProjectService implements IProjectService {
 
     public async isProjectNameAlreadyUsed(project: IProject): Promise<boolean> {
         const storageProvider = StorageProviderFactory.createFromConnection(project.sourceConnection);
-        const fileList = await storageProvider.listFiles("", constants.projectFileExtension/*ext*/);
-        for (const fileName of fileList) {
-            if (fileName === `${project.name}${constants.projectFileExtension}`) {
-                return true;
-            }
-        }
-
-        return false;
+        return await storageProvider.isFileExists(`${project.name}${constants.projectFileExtension}`);
     }
 
     public async isValidProjectConnection(project: IProject): Promise<boolean> {