From cf0d8177fcfcfdd5f669b34f2c94ee6099072419 Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sat, 20 Apr 2024 03:54:31 +0200
Subject: [PATCH 1/2] added unsaved changes indication

---
 .../components/url-box/url-box.component.html | 52 ++++++++++-------
 .../components/url-box/url-box.component.ts   |  1 +
 .../containers/window/window.component.html   |  1 +
 .../containers/window/window.component.ts     | 57 +++++++------------
 .../altair/effects/query-collection.effect.ts | 49 ++++++----------
 .../app/modules/altair/modules/icons/icons.ts |  2 +
 .../altair/store/collection/selectors.ts      |  4 ++
 .../src/app/modules/altair/store/index.ts     | 37 +++++++++---
 .../modules/altair/store/query/selectors.ts   |  6 ++
 .../modules/altair/store/windows/selectors.ts |  5 ++
 .../altair-app/src/scss/_ant-overrides.scss   |  4 +-
 .../src/scss/components/_url-box.scss         |  5 ++
 .../scripts/generate-settings-schema.sh       | 11 ----
 13 files changed, 124 insertions(+), 110 deletions(-)
 create mode 100644 packages/altair-app/src/app/modules/altair/store/windows/selectors.ts
 delete mode 100755 packages/altair-core/scripts/generate-settings-schema.sh

diff --git a/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.html b/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.html
index f89bf488ff..975d947cf4 100644
--- a/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.html
+++ b/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.html
@@ -58,32 +58,42 @@
     ></app-x-input>
   </div>
   <div class="url-box__input-actions">
+    @if (currentCollection) {
+      <button
+        type="button"
+        class="url-box__button"
+        [ngClass]="{ 'url-box__button--disabled': !hasUnsavedChanges }"
+        (click)="updateQueryInCollectionChange.emit()"
+        track-id="update_in_collection"
+        nz-tooltip
+        [nzTooltipTitle]="'COLLECTION_UPDATE_WINDOW_IN_COLLECTION' | translate"
+        nzTooltipPlacement="bottom"
+      >
+        <app-icon name="save"></app-icon>
+      </button>
+    }
     <button
       type="button"
-      nz-dropdown
-      nzTrigger="click"
-      [nzDropdownMenu]="urlBoxActionMenu"
       class="url-box__button"
+      (click)="addToCollectionChange.emit()"
+      track-id="save_to_collection"
+      nz-tooltip
+      [nzTooltipTitle]="'SAVE_TO_COLLECTION_BUTTON' | translate"
+      nzTooltipPlacement="bottom"
     >
-      <app-icon name="save"></app-icon>
+      <app-icon name="plus-circle"></app-icon>
+    </button>
+    <button
+      type="button"
+      class="url-box__button"
+      (click)="exportWindowChange.emit()"
+      track-id="export_window"
+      nz-tooltip
+      [nzTooltipTitle]="'EXPORT_WINDOW_TEXT' | translate"
+      nzTooltipPlacement="bottom"
+    >
+      <app-icon name="file-down"></app-icon>
     </button>
-    <nz-dropdown-menu #urlBoxActionMenu="nzDropdownMenu">
-      <ul nz-menu>
-        @if (currentCollection) {
-          <li nz-menu-item (click)="updateQueryInCollectionChange.emit()">
-            {{ 'COLLECTION_UPDATE_WINDOW_IN_COLLECTION' | translate }} ({{
-              currentCollection.title
-            }})
-          </li>
-        }
-        <li nz-menu-item (click)="addToCollectionChange.emit()">
-          {{ 'SAVE_TO_COLLECTION_BUTTON' | translate }}
-        </li>
-        <li nz-menu-item (click)="exportWindowChange.emit()">
-          {{ 'EXPORT_WINDOW_TEXT' | translate }}
-        </li>
-      </ul>
-    </nz-dropdown-menu>
     <button
       type="button"
       class="url-box__button"
diff --git a/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts b/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts
index f7ca62f9b4..88ad29e6c3 100644
--- a/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts
+++ b/packages/altair-app/src/app/modules/altair/components/url-box/url-box.component.ts
@@ -19,6 +19,7 @@ export class UrlBoxComponent {
   @Input() queryOperations: OperationDefinitionNode[] = [];
   @Input() streamState = '';
   @Input() currentCollection?: IQueryCollection;
+  @Input() hasUnsavedChanges = false;
 
   @Output() toggleDocsChange = new EventEmitter();
   @Output() reloadDocsChange = 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
index 8900651515..5069d0206c 100644
--- 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
@@ -13,6 +13,7 @@
     [queryOperations]="queryOperations$ | async"
     [streamState]="streamState$ | async"
     [currentCollection]="currentCollection$ | async"
+    [hasUnsavedChanges]="hasUnsavedChanges$ | async"
     (urlChange)="setApiUrl($event)"
     (httpVerbChange)="setApiMethod($event)"
     (sendRequest)="sendRequest()"
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
index 1a5134f73c..ac6b13b9be 100644
--- 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
@@ -116,6 +116,8 @@ export class WindowComponent implements OnInit {
   editorShortcutMapping$: Observable<IDictionary>;
   variableToType$: Observable<IDictionary>;
 
+  hasUnsavedChanges$: Observable<boolean>;
+
   // Using getter/setter for the windowId to update the windowId$ subject.
   // We need the windowId$ subject to update the getWindowState observable
   // whenever the windowId changes, in order to get the right window state.
@@ -169,17 +171,13 @@ export class WindowComponent implements OnInit {
     this.disableLineNumbers$ = this.store.pipe(
       select((state) => state.settings.disableLineNumbers)
     );
-    this.collections$ = this.store.pipe(
-      select((state) => state.collection.list)
-    );
+    this.collections$ = this.store.pipe(select((state) => state.collection.list));
     this.activeWindowId$ = this.store.pipe(
       select((state) => state.windowsMeta.activeWindowId)
     );
 
     this.query$ = this.getWindowState().pipe(select(fromRoot.getQueryState));
-    this.queryResult$ = this.getWindowState().pipe(
-      select(fromRoot.getQueryResult)
-    );
+    this.queryResult$ = this.getWindowState().pipe(select(fromRoot.getQueryResult));
     this.showDocs$ = this.getWindowState().pipe(select(fromRoot.getShowDocs));
     this.docView$ = this.getWindowState().pipe(select(fromRoot.getDocView));
     this.docsIsLoading$ = this.getWindowState().pipe(
@@ -208,9 +206,7 @@ export class WindowComponent implements OnInit {
     this.responseHeaders$ = this.getWindowState().pipe(
       select(fromRoot.getResponseHeaders)
     );
-    this.isSubscribed$ = this.getWindowState().pipe(
-      select(fromRoot.isSubscribed)
-    );
+    this.isSubscribed$ = this.getWindowState().pipe(select(fromRoot.isSubscribed));
     this.subscriptionResponses$ = this.getWindowState().pipe(
       select(fromRoot.getSubscriptionResponses)
     );
@@ -235,8 +231,7 @@ export class WindowComponent implements OnInit {
           return this.collections$.pipe(
             map((collections) => {
               return collections.find(
-                (collection) =>
-                  str(collection.id) === str(data.layout.collectionId)
+                (collection) => str(collection.id) === str(data.layout.collectionId)
               );
             })
           );
@@ -245,17 +240,11 @@ export class WindowComponent implements OnInit {
         return EMPTY;
       })
     );
-    this.preRequest$ = this.getWindowState().pipe(
-      select(fromRoot.getPreRequest)
-    );
-    this.postRequest$ = this.getWindowState().pipe(
-      select(fromRoot.getPostRequest)
-    );
+    this.preRequest$ = this.getWindowState().pipe(select(fromRoot.getPreRequest));
+    this.postRequest$ = this.getWindowState().pipe(select(fromRoot.getPostRequest));
     this.layout$ = this.getWindowState().pipe(select(fromRoot.getLayout));
 
-    this.resultPaneUiActions$ = this.store.select(
-      fromRoot.getResultPaneUiActions
-    );
+    this.resultPaneUiActions$ = this.store.select(fromRoot.getResultPaneUiActions);
     this.resultPaneBottomPanels$ = this.store.select(
       fromRoot.getResultPaneBottomPanels
     );
@@ -277,6 +266,13 @@ export class WindowComponent implements OnInit {
       }),
       catchError(() => EMPTY)
     );
+
+    this.hasUnsavedChanges$ = this.store.pipe(
+      withLatestFrom(this.windowId$),
+      switchMap(([state, windowId]) => {
+        return select(fromRoot.selectHasUnsavedChanges(windowId))(of(state));
+      })
+    );
   }
 
   ngOnInit() {
@@ -312,9 +308,7 @@ export class WindowComponent implements OnInit {
         if (this.gql.isSchema(data.schema.schema)) {
           this.gqlSchema = data.schema.schema;
         } else {
-          const schema = this.gql.getIntrospectionSchema(
-            data.schema.introspection
-          );
+          const schema = this.gql.getIntrospectionSchema(data.schema.introspection);
           if (schema) {
             this.store.dispatch(
               new schemaActions.SetSchemaAction(this.windowId, schema)
@@ -328,9 +322,7 @@ export class WindowComponent implements OnInit {
 
   setApiUrl(url: string) {
     if (url !== this.apiUrl) {
-      this.store.dispatch(
-        new queryActions.SetUrlAction({ url }, this.windowId)
-      );
+      this.store.dispatch(new queryActions.SetUrlAction({ url }, this.windowId));
       this.store.dispatch(
         new queryActions.SendIntrospectionQueryRequestAction(this.windowId)
       );
@@ -355,9 +347,7 @@ export class WindowComponent implements OnInit {
   }
 
   cancelRequest() {
-    this.store.dispatch(
-      new queryActions.CancelQueryRequestAction(this.windowId)
-    );
+    this.store.dispatch(new queryActions.CancelQueryRequestAction(this.windowId));
   }
 
   selectOperation(selectedOperation: string) {
@@ -371,17 +361,12 @@ export class WindowComponent implements OnInit {
 
   setQueryEditorState(queryEditorState: QueryEditorState) {
     this.store.dispatch(
-      new queryActions.SetQueryEditorStateAction(
-        this.windowId,
-        queryEditorState
-      )
+      new queryActions.SetQueryEditorStateAction(this.windowId, queryEditorState)
     );
   }
 
   startSubscription() {
-    this.store.dispatch(
-      new queryActions.StartSubscriptionAction(this.windowId)
-    );
+    this.store.dispatch(new queryActions.StartSubscriptionAction(this.windowId));
   }
 
   stopSubscription() {
diff --git a/packages/altair-app/src/app/modules/altair/effects/query-collection.effect.ts b/packages/altair-app/src/app/modules/altair/effects/query-collection.effect.ts
index bbc942e22c..1a175d27a6 100644
--- a/packages/altair-app/src/app/modules/altair/effects/query-collection.effect.ts
+++ b/packages/altair-app/src/app/modules/altair/effects/query-collection.effect.ts
@@ -41,9 +41,7 @@ export class QueryCollectionEffects {
   createCollectionAndSaveQueryToCollection$: Observable<Action> = createEffect(
     () => {
       return this.actions$.pipe(
-        ofType(
-          collectionActions.CREATE_COLLECTION_AND_SAVE_QUERY_TO_COLLECTION
-        ),
+        ofType(collectionActions.CREATE_COLLECTION_AND_SAVE_QUERY_TO_COLLECTION),
         withLatestFrom(
           this.store,
           (
@@ -130,10 +128,7 @@ export class QueryCollectionEffects {
         }
       ),
       switchMap((res) =>
-        forkJoin([
-          of(res),
-          this.windowService.getWindowExportData(res.windowId),
-        ])
+        forkJoin([of(res), this.windowService.getWindowExportData(res.windowId)])
       ),
       switchMap(([res, exportData]) => {
         const query = exportData;
@@ -155,10 +150,7 @@ export class QueryCollectionEffects {
       map(() => new collectionActions.LoadCollectionsAction()),
       catchError((err: UnknownError) => {
         debug.error(err);
-        this.notifyService.errorWithError(
-          err,
-          'Could not add query to collection'
-        );
+        this.notifyService.errorWithError(err, 'Could not add query to collection');
         return EMPTY;
       }),
       repeat()
@@ -179,10 +171,7 @@ export class QueryCollectionEffects {
         }
       ),
       switchMap((res) =>
-        forkJoin([
-          of(res),
-          this.windowService.getWindowExportData(res.windowId),
-        ])
+        forkJoin([of(res), this.windowService.getWindowExportData(res.windowId)])
       ),
       switchMap(([res, exportData]) => {
         const query = exportData;
@@ -238,9 +227,7 @@ export class QueryCollectionEffects {
           return EMPTY;
         }),
         tap(() => {
-          this.store.dispatch(
-            new windowsActions.ReloadCollectionWindowsAction()
-          );
+          this.store.dispatch(new windowsActions.ReloadCollectionWindowsAction());
         }),
         catchError((err: UnknownError) => {
           debug.error(err);
@@ -300,9 +287,7 @@ export class QueryCollectionEffects {
     return this.actions$.pipe(
       ofType(collectionActions.DELETE_COLLECTION),
       switchMap((action: collectionActions.DeleteCollectionAction) => {
-        return this.collectionService.deleteCollection(
-          action.payload.collectionId
-        );
+        return this.collectionService.deleteCollection(action.payload.collectionId);
       }),
       tap(() => this.notifyService.success('Deleted query from collection.')),
       map(() => new collectionActions.LoadCollectionsAction()),
@@ -418,20 +403,18 @@ export class QueryCollectionEffects {
   syncLocalCollectionToRemote$: Observable<Action> = createEffect(() => {
     return this.actions$.pipe(
       ofType(collectionActions.SYNC_LOCAL_COLLECTION_TO_REMOTE),
-      switchMap(
-        (action: collectionActions.SyncLocalCollectionToRemoteAction) => {
-          const collection = action.payload.collection;
+      switchMap((action: collectionActions.SyncLocalCollectionToRemoteAction) => {
+        const collection = action.payload.collection;
 
-          if (collection.id) {
-            return from(
-              this.collectionService.transformCollectionToRemoteCollection(
-                collection.id
-              )
-            );
-          }
-          return EMPTY;
+        if (collection.id) {
+          return from(
+            this.collectionService.transformCollectionToRemoteCollection(
+              collection.id
+            )
+          );
         }
-      ),
+        return EMPTY;
+      }),
       tap(() => this.notifyService.success('Synced collection to remote.')),
       map(() => new collectionActions.LoadCollectionsAction()),
       catchError((err: UnknownError) => {
diff --git a/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts b/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
index 5149546d56..78ee2b46bd 100644
--- a/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
+++ b/packages/altair-app/src/app/modules/altair/modules/icons/icons.ts
@@ -30,6 +30,7 @@ import {
   FilePlus,
   FlaskConical,
   Folder,
+  FolderDot,
   FolderMinus,
   FolderPlus,
   Github,
@@ -103,6 +104,7 @@ export const icons = {
   FilePlus,
   FlaskConical,
   Folder,
+  FolderDot,
   FolderMinus,
   FolderPlus,
   Github,
diff --git a/packages/altair-app/src/app/modules/altair/store/collection/selectors.ts b/packages/altair-app/src/app/modules/altair/store/collection/selectors.ts
index d7cbccb8c4..8c4364a3b1 100644
--- a/packages/altair-app/src/app/modules/altair/store/collection/selectors.ts
+++ b/packages/altair-app/src/app/modules/altair/store/collection/selectors.ts
@@ -6,3 +6,7 @@ export const selectCollections = createSelector(
   selectCollectionState,
   (collectionState) => collectionState.list || []
 );
+export const selectCollection = (collectionId: string) =>
+  createSelector(selectCollectionState, (collectionState) =>
+    collectionState.list.find((collection) => collection.id === collectionId)
+  );
diff --git a/packages/altair-app/src/app/modules/altair/store/index.ts b/packages/altair-app/src/app/modules/altair/store/index.ts
index 0963ff0675..a7b7ca8841 100644
--- a/packages/altair-app/src/app/modules/altair/store/index.ts
+++ b/packages/altair-app/src/app/modules/altair/store/index.ts
@@ -4,6 +4,7 @@ import {
   ActionReducer,
   ActionReducerMap,
   MetaReducer,
+  createSelector,
 } from '@ngrx/store';
 
 import { environment } from '../../../../environments/environment';
@@ -35,6 +36,10 @@ import { asyncStorageSync } from './async-storage-sync';
 import { localStorageSyncConfig } from './local-storage-sync-config';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { AllActions } from './action';
+import { selectWindowState } from './windows/selectors';
+import { getQueryState } from './query/selectors';
+import { selectCollections } from './collection/selectors';
+import { str } from '../utils';
 
 export const getPerWindowReducer = () => {
   const perWindowReducers = {
@@ -105,13 +110,7 @@ export const reducerToken = new InjectionToken<ActionReducerMap<RootState>>(
   'Registered Reducers'
 );
 
-export const reducerProvider = [
-  { provide: reducerToken, useValue: getReducer() },
-];
-
-export const selectWindowState = (windowId: string) => (state: RootState) => {
-  return state.windows[windowId];
-};
+export const reducerProvider = [{ provide: reducerToken, useValue: getReducer() }];
 
 export * from './query/selectors';
 export * from './docs/selectors';
@@ -129,3 +128,27 @@ export * from './account/selectors';
 export * from './workspace/selectors';
 export * from './environments/selectors';
 export * from './authorization/selectors';
+export * from './windows/selectors';
+
+export const selectHasUnsavedChanges = (windowId: string) => {
+  return createSelector(
+    selectWindowState(windowId),
+    selectCollections,
+    (windowState, collections) => {
+      if (!windowState || !collections) {
+        return false;
+      }
+      const collection = collections.find(
+        (c) => str(c.id) === str(windowState.layout.collectionId)
+      );
+      const queryInCollection = collection?.queries.find(
+        (q) => str(q.id) === str(windowState.layout.windowIdInCollection ?? '')
+      );
+
+      return (
+        queryInCollection?.query !== windowState.query.query ||
+        queryInCollection?.variables !== windowState.variables.variables
+      );
+    }
+  );
+};
diff --git a/packages/altair-app/src/app/modules/altair/store/query/selectors.ts b/packages/altair-app/src/app/modules/altair/store/query/selectors.ts
index 929c144b9d..f6fa8cb6a8 100644
--- a/packages/altair-app/src/app/modules/altair/store/query/selectors.ts
+++ b/packages/altair-app/src/app/modules/altair/store/query/selectors.ts
@@ -1,7 +1,13 @@
 import { createSelector, Store } from '@ngrx/store';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
 import { getInitialState } from './query.reducer';
+import { selectWindowState } from '../windows/selectors';
 
+export const selectQueryState = (windowId: string) =>
+  createSelector(
+    selectWindowState(windowId),
+    (state) => state?.query ?? getInitialState()
+  );
 export const getQueryState = (state: PerWindowState) =>
   state ? state.query : { ...getInitialState() };
 export const getQueryResult = createSelector(
diff --git a/packages/altair-app/src/app/modules/altair/store/windows/selectors.ts b/packages/altair-app/src/app/modules/altair/store/windows/selectors.ts
new file mode 100644
index 0000000000..832242f2d6
--- /dev/null
+++ b/packages/altair-app/src/app/modules/altair/store/windows/selectors.ts
@@ -0,0 +1,5 @@
+import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
+
+export const selectWindowState = (windowId: string) => (state: RootState) => {
+  return state.windows[windowId];
+};
diff --git a/packages/altair-app/src/scss/_ant-overrides.scss b/packages/altair-app/src/scss/_ant-overrides.scss
index 5357740330..905a139020 100644
--- a/packages/altair-app/src/scss/_ant-overrides.scss
+++ b/packages/altair-app/src/scss/_ant-overrides.scss
@@ -148,8 +148,7 @@
 }
 
 .ant-input {
-  // background: var(--theme-off-bg-color);
-  background: rgba(var(--rgb-theme-bg), 0.5);
+  background: rgba(var(--rgb-theme-off-bg), 0.5);
   border-color: var(--theme-border-color);
   color: var(--theme-font-color);
 }
@@ -194,6 +193,7 @@
 
 .ant-select {
   color: var(--theme-font-color);
+  background-color: var(--theme-off-bg-color);
   width: 100%;
   border-radius: 4px;
 }
diff --git a/packages/altair-app/src/scss/components/_url-box.scss b/packages/altair-app/src/scss/components/_url-box.scss
index f9dfc43a7e..ffcc7dfce9 100644
--- a/packages/altair-app/src/scss/components/_url-box.scss
+++ b/packages/altair-app/src/scss/components/_url-box.scss
@@ -103,6 +103,11 @@ app-url-box {
     color: var(--primary-color);
   }
 
+  &--disabled {
+    color: var(--theme-font-color);
+    opacity: 0.5;
+  }
+
   &:hover {
     background: rgba(var(--rgb-primary), 0.15);
     color: var(--primary-color);
diff --git a/packages/altair-core/scripts/generate-settings-schema.sh b/packages/altair-core/scripts/generate-settings-schema.sh
deleted file mode 100755
index afa7964b5d..0000000000
--- a/packages/altair-core/scripts/generate-settings-schema.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/bash
-
-yarn typescript-json-schema --ignoreErrors src/types/state/settings.interfaces.ts SettingsState  --out build/settings.schema.json
-yarn ajv compile -s build/settings.schema.json -o build/validate-settings.js
-# yarn shx cp src/validate-settings.d.ts build/validate-settings.d.ts
-
-yarn typescript-json-schema --ignoreErrors src/types/state/settings.interfaces.ts PartialSettingsState  --out build/partial_settings.schema.json
-yarn ajv compile -s build/partial_settings.schema.json -o build/validate-partial-settings.js
-# yarn shx cp src/validate-partial-settings.d.ts build/validate-partial-settings.d.ts
-
-node scripts/copy_settings_d_ts.js
\ No newline at end of file

From 88031ddb79586f8836495d529dd4be71df191280 Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sat, 20 Apr 2024 04:30:47 +0200
Subject: [PATCH 2/2] updated test

---
 .../url-box.component.spec.ts.snap            | 80 ++++++++-----------
 1 file changed, 34 insertions(+), 46 deletions(-)

diff --git a/packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap b/packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap
index ded707034d..f325643c50 100644
--- a/packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap
+++ b/packages/altair-app/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap
@@ -70,37 +70,31 @@ exports[`UrlBoxComponent should render correctly 1`] = `
     <div
       class="url-box__input-actions"
     >
+      
       <button
         class="url-box__button"
-        nz-dropdown=""
-        nztrigger="click"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
+        track-id="save_to_collection"
         type="button"
       >
         <app-icon
-          name="save"
+          name="plus-circle"
+        />
+      </button>
+      
+      <button
+        class="url-box__button"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
+        track-id="export_window"
+        type="button"
+      >
+        <app-icon
+          name="file-down"
         />
       </button>
       
-      <nz-dropdown-menu>
-        <ul
-          nz-menu=""
-        >
-          
-          <li
-            nz-menu-item=""
-          >
-              
-          </li>
-          
-          <li
-            nz-menu-item=""
-          >
-              
-          </li>
-          
-        </ul>
-        
-      </nz-dropdown-menu>
       <button
         class="url-box__button"
         nz-tooltip=""
@@ -225,37 +219,31 @@ exports[`UrlBoxComponent should render correctly with queryOperations > 1 1`] =
     <div
       class="url-box__input-actions"
     >
+      
       <button
         class="url-box__button"
-        nz-dropdown=""
-        nztrigger="click"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
+        track-id="save_to_collection"
         type="button"
       >
         <app-icon
-          name="save"
+          name="plus-circle"
+        />
+      </button>
+      
+      <button
+        class="url-box__button"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
+        track-id="export_window"
+        type="button"
+      >
+        <app-icon
+          name="file-down"
         />
       </button>
       
-      <nz-dropdown-menu>
-        <ul
-          nz-menu=""
-        >
-          
-          <li
-            nz-menu-item=""
-          >
-              
-          </li>
-          
-          <li
-            nz-menu-item=""
-          >
-              
-          </li>
-          
-        </ul>
-        
-      </nz-dropdown-menu>
       <button
         class="url-box__button"
         nz-tooltip=""