Frontend: Delay get current history on path update

src/main/webapp/app/common/secondary/ProjectHistoryRepository.ts

@@ -10,6 +10,7 @@ export default class ProjectHistoryRepository implements ProjectHistoryService {
   async get(folder: Folder): Promise<History> {
     return this.axiosHttp
       .get<RestHistory>('api/project-histories', { params: { folder } })
-      .then(response => this.historyStore.setHistory(toHistory(response.data)));
+      .then(response => this.historyStore.setHistory(toHistory(response.data)))
+      .catch(() => this.historyStore.setHistory({ services: [] }));
   }
 }

src/main/webapp/app/main.ts

@@ -38,9 +38,11 @@ const springBootRepository = new SpringBootRepository(axiosHttp, projectHistoryR
 
 app.provide('angularService', angularRepository);
 app.provide('fileDownloader', fileDownloader);
+app.provide('globalWindow', window);
 app.provide('historyStore', historyStore);
 app.provide('logger', consoleLogger);
 app.provide('projectService', projectRepository);
+app.provide('projectHistoryService', projectHistoryRepository);
 app.provide('reactService', reactRepository);
 app.provide('springBootService', springBootRepository);
 app.provide('vueService', vueRepository);

src/main/webapp/app/springboot/primary/Generator.component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, inject, ref } from 'vue';
 import { ProjectToUpdate } from '@/springboot/primary/ProjectToUpdate';
 import { AngularGeneratorVue } from '@/springboot/primary/generator/angular-generator';
 import { ReactGeneratorVue } from '@/springboot/primary/generator/react-generator';
@@ -9,6 +9,8 @@ import { DefaultButtonVue } from '@/common/primary/default-button';
 import { HeaderVue } from '@/springboot/primary/header';
 import { IconVue } from '@/common/primary/icon';
 import { ProjectGeneratorVue } from '@/springboot/primary/generator/project-generator';
+import { ProjectHistoryService } from '@/common/domain/ProjectHistoryService';
+import { History } from '@/common/domain/History';
 
 export default defineComponent({
   name: 'GeneratorComponent',
@@ -24,6 +26,8 @@ export default defineComponent({
     VueGeneratorVue,
   },
   setup() {
+    const projectHistoryService = inject('projectHistoryService') as ProjectHistoryService;
+    const globalWindow = inject('globalWindow') as Window;
     const selectorPrefix = 'generator';
 
     const project = ref<ProjectToUpdate>({
@@ -34,13 +38,22 @@ export default defineComponent({
     const server = ref<string>();
     const client = ref<string>();
 
+    let timeoutId: number | undefined = undefined;
+    const getCurrentProjectHistory = (): Promise<History> => projectHistoryService.get(project.value.folder);
+    const debounceGetProjectHistory = (): void => {
+      if (timeoutId) globalWindow.clearTimeout(timeoutId);
+      timeoutId = globalWindow.setTimeout(() => getCurrentProjectHistory, 400);
+    };
+
     return {
       project,
       language,
       buildTool,
       server,
       client,
       selectorPrefix,
+      getCurrentProjectHistory,
+      debounceGetProjectHistory,
     };
   },
 });

src/main/webapp/app/springboot/primary/Generator.vue

@@ -7,7 +7,15 @@
         <div class="row g-3">
           <div class="col-12">
             <label for="path" class="form-label">Path (required) : </label>
-            <input id="path" v-model="project.folder" type="text" class="form-control" required autofocus />
+            <input
+              id="path"
+              v-model="project.folder"
+              type="text"
+              class="form-control"
+              required
+              autofocus
+              @input="debounceGetProjectHistory"
+            />
           </div>
           <div class="col-12">
             <label for="basename" class="form-label">Basename : </label>

src/main/webapp/app/springboot/primary/generator/spring-boot-generator/SpringBootGenerator.vue

@@ -67,12 +67,7 @@
         <GeneratorButtonVue :label="'MongoDB'" :service="'mongodb'" :selector-prefix="selectorPrefix" @click.prevent="addMongoDB" />
       </div>
       <div>
-        <GeneratorButtonVue
-          :label="'Mongock'"
-          :service="'mongock'"
-          :selector-prefix="selectorPrefix"
-          @click.prevent="addMongock"
-        />
+        <GeneratorButtonVue :label="'Mongock'" :service="'mongock'" :selector-prefix="selectorPrefix" @click.prevent="addMongock" />
       </div>
     </div>
   </div>

src/test/javascript/spec/common/secondary/ProjectHistoryRepository.spec.ts

@@ -22,4 +22,18 @@ describe('ProjectRepository', () => {
       services: [Service.INITIALIZATION, Service.JAVA_BASE, Service.MAVEN_JAVA],
     });
   });
+
+  it('should reset project history on fail', async () => {
+    const historyStoreStub = stubHistoryStore();
+    const axiosHttpStub = stubAxiosHttp();
+    axiosHttpStub.get.rejects();
+    const projectHistoryRepository = new ProjectHistoryRepository(axiosHttpStub, historyStoreStub);
+
+    await projectHistoryRepository.get('folder/path');
+
+    const [historyStored] = historyStoreStub.setHistory.getCall(0).args;
+    expect(historyStored).toEqual<History>({
+      services: [],
+    });
+  });
 });

src/test/javascript/spec/springboot/primary/Generator.spec.ts

@@ -1,10 +1,88 @@
 import { GeneratorVue } from '@/springboot/primary';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { ProjectHistoryService } from '@/common/domain/ProjectHistoryService';
+import { stubProjectHistoryService } from '../../common/domain/ProjectHistoryService.fixture';
+import sinon, { SinonStub } from 'sinon';
+
+let wrapper: VueWrapper;
+let component: any;
+
+interface WrapperOptions {
+  projectHistoryService: ProjectHistoryService;
+  globalWindow: WindowStub;
+}
+
+interface WindowStub {
+  clearTimeout: SinonStub;
+  setTimeout: SinonStub;
+}
+
+const stubGlobalWindow = (): WindowStub =>
+  ({
+    clearTimeout: sinon.stub(),
+    setTimeout: sinon.stub(),
+  } as WindowStub);
+
+const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
+  const { projectHistoryService, globalWindow }: WrapperOptions = {
+    projectHistoryService: stubProjectHistoryService(),
+    globalWindow: stubGlobalWindow(),
+    ...wrapperOptions,
+  };
+  wrapper = shallowMount(GeneratorVue, {
+    global: {
+      provide: {
+        projectHistoryService,
+        globalWindow,
+      },
+    },
+  });
+  component = wrapper.vm;
+};
 
 describe('Generator', () => {
   it('should exist', () => {
-    const wrapper = shallowMount(GeneratorVue);
+    wrap();
 
     expect(wrapper.exists()).toBe(true);
   });
+
+  it('should get project history with current project folder', async () => {
+    const projectHistoryService = stubProjectHistoryService();
+    wrap({ projectHistoryService });
+
+    const projectPathInput = wrapper.find('#path');
+    await projectPathInput.setValue('path');
+    component.getCurrentProjectHistory();
+
+    const path = projectHistoryService.get.getCall(0).args[0];
+    expect(path).toEqual('path');
+  });
+
+  it('should delay get project history', () => {
+    const projectHistoryService = stubProjectHistoryService();
+    const globalWindow = stubGlobalWindow();
+    wrap({ projectHistoryService, globalWindow });
+
+    component.debounceGetProjectHistory();
+
+    const [delayedMethod, timeout] = globalWindow.setTimeout.getCall(0).args;
+    expect(delayedMethod()).toEqual(component.getCurrentProjectHistory);
+    expect(timeout).toBe(400);
+    expect(globalWindow.clearTimeout.called).toBe(false);
+  });
+
+  it('should clear timeout', () => {
+    const TIMEOUT_ID = 1;
+    const projectHistoryService = stubProjectHistoryService();
+    const globalWindow = stubGlobalWindow();
+    globalWindow.setTimeout.returns(TIMEOUT_ID);
+    wrap({ projectHistoryService, globalWindow });
+
+    component.debounceGetProjectHistory();
+    component.debounceGetProjectHistory();
+
+    const [timeoutId] = globalWindow.clearTimeout.getCall(0).args;
+    expect(timeoutId).toBe(TIMEOUT_ID);
+  });
 });