Ability to clear result panel

altair-graphql · Oct 16, 2021 · 88ae71c · 88ae71c
1 parent 79cde1a
commit 88ae71c
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 0 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,19 @@
             <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>
+            <button
+              *ngFor="let uiAction of uiActions"
+              class="query-result__clear-button"
+              (click)="uiActionExecuteChange.next(uiAction)"
+            >
+              {{ uiAction.title }}
+            </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>
@@ -140,6 +153,9 @@
       </div>
     </div>
   </nz-tab>
+  <div>
+    <button type="button">Click Me!</button>
+  </div>
 </nz-tabset>
 <div class="query-result__bottom-pane">
   <nav class="query-result__bottom-pane__title-wrapper">

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
@@ -73,6 +73,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.ts b/packages/altair-app/src/app/modules/altair/containers/window/window.component.ts
@@ -411,6 +411,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/el-GR.json b/packages/altair-app/src/assets/i18n/el-GR.json
@@ -40,6 +40,7 @@
   "QUERY_RESULT_STATUS_CODE_TEXT": "STATUS CODE",
   "QUERY_RESULT_TIME_SPENT_TEXT": "TIME SPENT",
   "QUERY_RESULT_DOWNLOAD_RESULT_BUTTON": "Download",
+  "QUERY_RESULT_CLEAR_RESULT_BUTTON": "Clear",
   "SUBSCRIPTIONS_STOP_TEXT": "Stop",
   "SUBSCRIPTIONS_CLEAR_TEXT": "Clear",
   "VARIABLES_TEXT": "Variables",

diff --git a/packages/altair-app/src/assets/i18n/en-US.json b/packages/altair-app/src/assets/i18n/en-US.json
@@ -46,6 +46,7 @@
   "QUERY_RESULT_STATUS_CODE_TEXT": "STATUS CODE",
   "QUERY_RESULT_TIME_SPENT_TEXT": "TIME SPENT",
   "QUERY_RESULT_DOWNLOAD_RESULT_BUTTON": "Download",
+  "QUERY_RESULT_CLEAR_RESULT_BUTTON": "Clear",
   "SUBSCRIPTIONS_STOP_TEXT": "Stop",
   "SUBSCRIPTIONS_CLEAR_TEXT": "Clear",
   "SUBSCRIPTIONS_AUTOSCROLL_TEXT": "Autoscroll",

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;