Merge branch 'staging' into customize-editor-shortcut-mappings

altair-graphql · Oct 17, 2021 · bc0af5c · bc0af5c
2 parents bf69de7 + 1dd2313
commit bc0af5c
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 7 deletions.
diff --git a/...ges/altair-app/src/app/modules/altair/components/query-result/query-result.component.html b/...ges/altair-app/src/app/modules/altair/components/query-result/query-result.component.html
@@ -39,6 +39,12 @@
             <div class="right">
             </div>
           </div>
+          <div class="query-result__top-actions">
+            <button track-id="clear_result" class="query-result__clear-button" (click)="clearResultChange.next()">
+              <app-icon name="trash-2"></app-icon>
+              {{ 'QUERY_RESULT_CLEAR_RESULT_BUTTON' | translate }}
+            </button>
+          </div>
           <div class="query-result__bottom-actions">
             <button track-id="download_result" class="query-result__download-button" (click)="downloadResultChange.next()">
               <app-icon name="download"></app-icon>

diff --git a/packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts b/packages/altair-app/src/app/modules/altair/components/query-result/query-result.component.ts
@@ -54,6 +54,7 @@ export class QueryResultComponent implements OnChanges {
   @Input() bottomPanels = [];
 
   @Output() downloadResultChange = new EventEmitter();
+  @Output() clearResultChange = new EventEmitter();
   @Output() stopSubscriptionChange = new EventEmitter();
   @Output() clearSubscriptionChange = new EventEmitter();
   @Output() autoscrollSubscriptionResponsesChange = new EventEmitter();

diff --git a/packages/altair-app/src/app/modules/altair/containers/window/window.component.html b/packages/altair-app/src/app/modules/altair/containers/window/window.component.html
@@ -74,6 +74,7 @@
         [uiActions]="resultPaneUiActions$ | async"
         [bottomPanels]="resultPaneBottomPanels$ | async"
 
+        (clearResultChange)="clearResult()"
         (downloadResultChange)="downloadResult()"
         (stopSubscriptionChange)="stopSubscription()"
         (clearSubscriptionChange)="clearSubscription()"

diff --git a/packages/altair-app/src/app/modules/altair/containers/window/window.component.spec.ts b/packages/altair-app/src/app/modules/altair/containers/window/window.component.spec.ts
@@ -1,29 +1,38 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Store, combineReducers } from '@ngrx/store';
 
 import * as services from './../../services';
 import { WindowComponent } from './window.component';
 import { mock, anyFn, mockStoreFactory } from '../../../../../testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
-
-let mockStore: Store<RootState>;
+import { ClearResultAction } from '../../store/query/query.action';
+import { getInitWindowState } from '../../store/windows/windows.reducer';
+import { getPerWindowReducer } from '../../store';
+import * as windowsMetaReducer from '../../store/windows-meta/windows-meta.reducer';
 
 describe('WindowComponent', () => {
   let component: WindowComponent;
   let fixture: ComponentFixture<WindowComponent>;
+  let mockStore: Store<RootState>;
 
   beforeEach(waitForAsync(() => {
 
-    const store = of();
-    mockStore = mock<Store<RootState>>(store as any);
+    mockStore = mockStoreFactory<RootState>({
+      windows: {
+        'abc-123': getInitWindowState(combineReducers(getPerWindowReducer())),
+      },
+      windowsMeta: {
+        ...windowsMetaReducer.getInitialState(),
+        activeWindowId: 'abc-123',
+      }
+    });
     const providers = [
       {
         provide: Store,
-        useValue: mockStoreFactory({}),
+        useValue: mockStore,
       },
       {
         provide: services.GqlService,
@@ -65,10 +74,21 @@ describe('WindowComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WindowComponent);
     component = fixture.componentInstance;
+    component.ngOnInit = () => {};
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('clearResult', () => {
+    it('should dispatch ClearResultAction', () => {
+      component.clearResult();
+
+      const expectedAction = new ClearResultAction(component.windowId)
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith(expectedAction);
+    })
+  });
 });
diff --git a/packages/altair-app/src/app/modules/altair/containers/window/window.component.ts b/packages/altair-app/src/app/modules/altair/containers/window/window.component.ts
@@ -415,6 +415,10 @@ export class WindowComponent implements OnInit {
     }
   }
 
+  clearResult() {
+    this.store.dispatch(new queryActions.ClearResultAction(this.windowId));
+  }
+
   downloadResult() {
     this.store.dispatch(new queryActions.DownloadResultAction(this.windowId));
   }

diff --git a/packages/altair-app/src/app/modules/altair/effects/query.effect.ts b/packages/altair-app/src/app/modules/altair/effects/query.effect.ts
@@ -493,6 +493,24 @@ export class QueryEffects {
       );
   }, { dispatch: false })
 
+  clearResult$ = createEffect(() => {
+    return this.actions$
+      .pipe(
+        ofType(queryActions.CLEAR_RESULT),
+        withLatestFrom(this.store, (action: queryActions.Action, state) => {
+          return { data: state.windows[action.windowId], windowId: action.windowId, action };
+        }),
+        switchMap(res => {
+          this.store.dispatch(new queryActions.SetQueryResultAction('', res.windowId));
+          this.store.dispatch(
+            new queryActions.SetQueryResultResponseHeadersAction(res.windowId, { })
+          );
+
+          return EMPTY;
+        }),
+      );
+  }, { dispatch: false })
+
   downloadResult$ = createEffect(() => {
     return this.actions$
       .pipe(

diff --git a/packages/altair-app/src/app/modules/altair/store/query/query.action.ts b/packages/altair-app/src/app/modules/altair/store/query/query.action.ts
@@ -36,6 +36,7 @@ export const SET_SUBSCRIPTION_RESPONSE_LIST = 'SET_SUBSCRIPTION_RESPONSE_LIST';
 export const TOGGLE_AUTOSCROLL_SUBSCRIPTION_RESPONSE = 'TOGGLE_AUTOSCROLL_SUBSCRIPTION_RESPONSE';
 
 export const SET_RESPONSE_STATS = 'SET_RESPONSE_STATS';
+export const CLEAR_RESULT = 'CLEAR_RESULT';
 export const DOWNLOAD_RESULT = 'DOWNLOAD_RESULT';
 
 export const HIDE_URL_ALERT = 'HIDE_URL_ALERT';
@@ -205,6 +206,12 @@ export class ToggleAutoscrollSubscriptionResponseAction implements NGRXAction {
   constructor(public windowId: string, public payload?: any) {}
 }
 
+export class ClearResultAction implements NGRXAction {
+  readonly type = CLEAR_RESULT;
+
+  constructor(public windowId: string, public payload?: any) {}
+}
+
 export class DownloadResultAction implements NGRXAction {
   readonly type = DOWNLOAD_RESULT;
 
@@ -254,6 +261,7 @@ export type Action =
   | SetSubscriptionResponseListAction
   | ToggleAutoscrollSubscriptionResponseAction
   | SetResponseStatsAction
+  | ClearResultAction
   | DownloadResultAction
   | CancelQueryRequestAction
   | SetHTTPMethodAction

diff --git a/packages/altair-app/src/assets/i18n/default.json b/packages/altair-app/src/assets/i18n/default.json
@@ -48,6 +48,7 @@
   "QUERY_RESULT_STATUS_TEXT": "STATUS",
   "QUERY_RESULT_STATUS_CODE_TEXT": "STATUS CODE",
   "QUERY_RESULT_TIME_SPENT_TEXT": "TIME SPENT",
+  "QUERY_RESULT_CLEAR_RESULT_BUTTON": "Clear",
   "QUERY_RESULT_DOWNLOAD_RESULT_BUTTON": "Download",
 
   "SUBSCRIPTIONS_STOP_TEXT": "Stop",

diff --git a/packages/altair-app/src/scss/components/_editor.scss b/packages/altair-app/src/scss/components/_editor.scss
@@ -131,6 +131,29 @@ app-query-result {
   }
 }
 
+.query-result__top-actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 3;
+}
+
+.query-result__clear-button {
+  background: var(--theme-off-bg-color);
+  color: var(--primary-color);
+  opacity: .5;
+  transition: all .3s ease;
+  border: 1px solid var(--primary-color);
+  text-transform: uppercase;
+  font-size: fontsize(12);
+  padding: 3px 10px;
+  border-radius: 4px;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .query-result__bottom-actions {
   position: absolute;
   bottom: 10px;