remove ngx-popper

altair-graphql · Dec 17, 2023 · d135070 · d135070
1 parent c651be2
commit d135070
Show file tree

Hide file tree

Showing 18 changed files with 52 additions and 121 deletions.
diff --git a/packages/altair-app/package.json b/packages/altair-app/package.json
@@ -90,11 +90,9 @@
     "ngx-cookie-service": "14.0.1",
     "ngx-markdown": "^14.0.1",
     "ngx-pipes": "2.7.3",
-    "ngx-popper": "7.0.0",
     "ngx-take-until-destroy": "5.4.0",
     "ngx-toastr": "14.1.0",
     "object-path": "0.11.5",
-    "popper.js": "1.16.1",
     "prettier": "2.3.0",
     "rxjs": "6.6.7",
     "sanitize-html": "2.7.1",

diff --git a/packages/altair-app/src/app/modules/altair/altair.module.ts b/packages/altair-app/src/app/modules/altair/altair.module.ts
@@ -52,7 +52,6 @@ import { registerLocaleData } from '@angular/common';
 import en from '@angular/common/locales/en';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { AppOverlayContainer } from './overlay-container';
-import { environment } from 'environments/environment';
 import { AppInitAction } from './store/action';
 import { ReducerBootstrapper } from './store/reducer-bootstrapper';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';

diff --git a/...altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.html b/...altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.html
@@ -35,7 +35,12 @@
     </p>
     <div class="account-dialog__stats">
       <div class="account-dialog__stats-title">
-        Plan Stats <app-icon name="info" [popper]="'The stats show how much resources you have and the number of resources allowed for your current plan'"></app-icon>
+        Plan Stats
+        <app-icon
+          name="info"
+          nz-tooltip
+          [nzTooltipTitle]="'ACCOUNT_PLAN_STATS_DESCRIPTION' | translate"
+        ></app-icon>
       </div>
       <div>Plan: {{ account?.plan?.id }}</div>
       <div>Queries: {{ account?.stats?.queriesCount ?? 0 }} / {{ account?.plan?.maxQueriesCount ?? 0 }}</div>

diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.html b/packages/altair-app/src/app/modules/altair/components/header/header.component.html
@@ -26,8 +26,9 @@
     <li
       *ngFor="let panel of headerPanels; trackBy: trackById"
       (click)="togglePanelActiveChange.emit(panel)"
-      [popper]="panel.title"
-      [popperPlacement]="'bottom'"
+      nz-tooltip
+      [nzTooltipTitle]="panel.title"
+      nzTooltipPlacement="bottom"
       class="header__menu-item"
       [ngClass]="{ 'header__menu-item--active': panel.isActive }"
     >

diff --git a/...mponents/query-collection-item/__snapshots__/query-collection-item.component.spec.ts.snap b/...mponents/query-collection-item/__snapshots__/query-collection-item.component.spec.ts.snap
@@ -146,16 +146,7 @@ exports[`QueryCollectionItemComponent should render collapsed collection correct
             </span>
              Another Query 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span
@@ -208,16 +199,7 @@ exports[`QueryCollectionItemComponent should render collapsed collection correct
             </span>
              Zap Query 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span
@@ -270,16 +252,7 @@ exports[`QueryCollectionItemComponent should render collapsed collection correct
             </span>
              Query 1 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span
@@ -470,16 +443,7 @@ exports[`QueryCollectionItemComponent should render queries correctly 1`] = `
             </span>
              Another Query 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span
@@ -532,16 +496,7 @@ exports[`QueryCollectionItemComponent should render queries correctly 1`] = `
             </span>
              Zap Query 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span
@@ -594,16 +549,7 @@ exports[`QueryCollectionItemComponent should render queries correctly 1`] = `
             </span>
              Query 1 
             
-            <popper-content>
-                
-              <a
-                href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
-                rel="noopener"
-                target="_blank"
-              >
-                
-              </a>
-            </popper-content>
+            
           </span>
           
           <span

diff --git a/.../app/modules/altair/components/query-collection-item/query-collection-item.component.html b/.../app/modules/altair/components/query-collection-item/query-collection-item.component.html
@@ -151,20 +151,21 @@
           <span
             *ngIf="!query.id"
             class="query-title-icon"
-            [popper]="deprecatedCollectionQuery"
-            [popperPlacement]="'bottom'"
+            nz-tooltip
+            [nzTooltipTitle]="deprecatedCollectionQuery"
+            nzTooltipPlacement="bottom"
           >
             <app-icon name="alert-triangle"></app-icon>
           </span>
-          <popper-content #deprecatedCollectionQuery>
+          <ng-template #deprecatedCollectionQuery>
             {{ 'COLLECTIONS_DEPRECATED_QUERY_WARNING' | translate }}
             <a
               target="_blank"
               href="https://altairgraphql.dev/docs/tips/deprecated-collection-queries"
               rel="noopener"
               >{{ 'LEARN_MORE_TEXT' | translate }}</a
             >
-          </popper-content>
+          </ng-template>
         </span>
         <span
           *ngIf="loggedIn && (query.storageType === 'api')"

diff --git a/...p/modules/altair/components/query-collection-item/query-collection-item.component.spec.ts b/...p/modules/altair/components/query-collection-item/query-collection-item.component.spec.ts
@@ -1,10 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { QueryCollectionItemComponent } from './query-collection-item.component';
-import { FormsModule } from '@angular/forms';
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgxPopperModule } from 'ngx-popper';
 import { SharedModule } from '../../modules/shared/shared.module';
 import { NgxTestWrapper } from '../../../../../testing/wrapper';
 import { mount } from '../../../../../testing/utils';

diff --git a/...ltair/components/query-collections/__snapshots__/query-collections.component.spec.ts.snap b/...ltair/components/query-collections/__snapshots__/query-collections.component.spec.ts.snap
@@ -19,6 +19,8 @@ exports[`QueryCollectionsComponent should render passed collections correctly 1`
         <button
           class="icon-button"
           data-test-id="import-collection"
+          nz-tooltip=""
+          nztooltipplacement="bottom"
           type="button"
         >
           <app-icon

diff --git a/...-app/src/app/modules/altair/components/query-collections/query-collections.component.html b/...-app/src/app/modules/altair/components/query-collections/query-collections.component.html
@@ -11,8 +11,9 @@
         type="button"
         class="icon-button"
         data-test-id="import-collection"
-        [popper]="'COLLECTIONS_IMPORT_TEXT' | translate"
-        [popperPlacement]="'bottom'"
+        nz-tooltip
+        [nzTooltipTitle]="'COLLECTIONS_IMPORT_TEXT' | translate"
+        nzTooltipPlacement="bottom"
         (click)="importCollectionsChange.next()"
       >
         <app-icon name="log-in"></app-icon>
@@ -22,8 +23,9 @@
         type="button"
         class="icon-button"
         data-test-id="sync-collection"
-        [popper]="'COLLECTION_SYNC_TEXT' | translate"
-        [popperPlacement]="'bottom'"
+        nz-tooltip
+        [nzTooltipTitle]="'COLLECTION_SYNC_TEXT' | translate"
+        nzTooltipPlacement="bottom"
         (click)="syncCollectionsChange.next()"
       >
         <app-icon name="refresh-ccw"></app-icon>

diff --git a/...pp/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap b/...pp/src/app/modules/altair/components/url-box/__snapshots__/url-box.component.spec.ts.snap
@@ -102,6 +102,8 @@ exports[`UrlBoxComponent should render correctly 1`] = `
       </nz-dropdown-menu>
       <button
         class="url-box__button"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
         track-id="reload_docs"
         type="button"
       >
@@ -248,6 +250,8 @@ exports[`UrlBoxComponent should render correctly with queryOperations > 1 1`] =
       </nz-dropdown-menu>
       <button
         class="url-box__button"
+        nz-tooltip=""
+        nztooltipplacement="bottom"
         track-id="reload_docs"
         type="button"
       >

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
@@ -33,15 +33,17 @@
           *ngIf="streamState === 'uncertain'"
           name="alert-circle"
           class="connection-indicator--uncertain"
-          [popper]="'STREAM_CONNECTION_TRYING' | translate"
-          [popperStyles]="{ 'white-space': 'nowrap' }"
+          nz-tooltip
+          [nzTooltipTitle]="'STREAM_CONNECTION_TRYING' | translate"
+          [nzTooltipOverlayStyle]="{ 'white-space': 'nowrap' }"
         ></app-icon>
         <app-icon
           *ngIf="streamState === 'connected'"
           name="check-circle"
           class="connection-indicator--connected"
-          [popper]="'STREAM_CONNECTION_CONNECTED' | translate"
-          [popperStyles]="{ 'white-space': 'nowrap' }"
+          nz-tooltip
+          [nzTooltipTitle]="'STREAM_CONNECTION_CONNECTED' | translate"
+          [nzTooltipOverlayStyle]="{ 'white-space': 'nowrap' }"
         ></app-icon>
       </div>
     </div>
@@ -88,8 +90,9 @@
       class="url-box__button"
       (click)="reloadDocsChange.emit()"
       track-id="reload_docs"
-      [popper]="'RELOAD_DOCS_BUTTON' | translate"
-      [popperPlacement]="'bottom'"
+      nz-tooltip
+      [nzTooltipTitle]="'RELOAD_DOCS_BUTTON' | translate"
+      nzTooltipPlacement="bottom"
     >
       <app-icon name="refresh-ccw"></app-icon>
     </button>

diff --git a/...air/components/variable-file-item/__snapshots__/variable-file-item.component.spec.ts.snap b/...air/components/variable-file-item/__snapshots__/variable-file-item.component.spec.ts.snap
@@ -10,6 +10,7 @@ exports[`VariableFileItemComponent should render correctly 1`] = `
     >
       <span
         class="variables-file-item-switch"
+        nz-tooltip=""
       >
         <span>
           1
@@ -34,6 +35,7 @@ exports[`VariableFileItemComponent should render correctly 1`] = `
       />
       <span
         class="variables-file-item-selected-total"
+        nz-tooltip=""
       >
          0 file(s) 
       </span>

diff --git a/...pp/src/app/modules/altair/components/variable-file-item/variable-file-item.component.html b/...pp/src/app/modules/altair/components/variable-file-item/variable-file-item.component.html
@@ -11,7 +11,8 @@
       [ngClass]="{
         'variables-file-item-switch--enabled': fileVariable?.isMultiple
       }"
-      [popper]="'Toggle single/multiple file mode'"
+      nz-tooltip
+      [nzTooltipTitle]="'VARIABLE_TOGGLE_FILE_MODE' | translate"
       (click)="fileVariableIsMultipleChange.emit(!fileVariable?.isMultiple)"
     >
       <span *ngIf="!fileVariable?.isMultiple">1</span>
@@ -34,7 +35,11 @@
       [attr.multiple]="fileVariable?.isMultiple ? '' : null"
       (change)="onSelectFiles()"
     />
-    <span class="variables-file-item-selected-total" [popper]="filesText">
+    <span
+      class="variables-file-item-selected-total"
+      nz-tooltip
+      [nzTooltipTitle]="filesText"
+    >
       {{ validFileData.length }} file(s)
     </span>
     <button

diff --git a/packages/altair-app/src/app/modules/altair/modules/shared/shared.module.ts b/packages/altair-app/src/app/modules/altair/modules/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgPipesModule } from 'ngx-pipes';
 import { ContextMenuModule } from 'ngx-contextmenu';
 import { NguiAutoCompleteModule } from '@ngui/auto-complete';
-import { NgxPopperModule } from 'ngx-popper';
 import { MarkdownModule } from 'ngx-markdown';
 import { HotToastModule } from '@ngneat/hot-toast';
 import { ResizableModule } from 'angular-resizable-element';
@@ -72,11 +71,6 @@ const AntdComponentModules = [
     NgPipesModule,
     NguiAutoCompleteModule, // use antd
     ContextMenuModule.forRoot(),
-    NgxPopperModule.forRoot({
-      // use antd
-      applyClass: 'tooltip-content',
-      trigger: 'hover',
-    }),
     MarkdownModule.forRoot(),
     ResizableModule,
     IconsModule,
@@ -107,7 +101,6 @@ const AntdComponentModules = [
     NgPipesModule,
     ContextMenuModule,
     NguiAutoCompleteModule,
-    NgxPopperModule,
     MarkdownModule,
     ResizableModule,
     IconsModule,

diff --git a/packages/altair-app/src/assets/i18n/default.json b/packages/altair-app/src/assets/i18n/default.json
@@ -60,6 +60,7 @@
 
   "VARIABLES_TEXT": "Variables",
   "SET_VARIABLES_DIALOG_SUBTEXT": "Add, edit and remove variables in your request",
+  "VARIABLE_TOGGLE_FILE_MODE": "Toggle single/multiple file mode",
 
   "HEADERS_TEXT": "Headers",
   "SET_HEADERS_DIALOG_SUBTEXT": "Add, edit and remove headers in your request",
@@ -206,6 +207,7 @@
   "ADD_TEAM_MEMBER_TEXT": "Add a new team member",
   "UPDATE_TEAM_MEMBER_TEXT": "Update team member",
   "TEAM_MEMBERS_TEXT": "Team members",
+  "ACCOUNT_PLAN_STATS_DESCRIPTION": "The stats show how much resources you have and the number of resources allowed for your current plan",
 
   "EDIT_TEXT": "Edit",
   "PROFILE_TEXT": "Profile",

diff --git a/packages/altair-app/src/scss/_all.scss b/packages/altair-app/src/scss/_all.scss
@@ -26,7 +26,6 @@
 @import 'components/doc-viewer';
 @import 'components/subscriptions';
 @import 'components/environment-manager';
-@import 'components/tooltip';
 @import 'components/smart-input';
 @import 'components/fancy-input';
 @import 'components/settings';

diff --git a/packages/altair-app/src/scss/components/_tooltip.scss b/packages/altair-app/src/scss/components/_tooltip.scss