replace uuid with randomUUID

Author: imolorhe

DEV.md

@@ -183,3 +183,4 @@ https://www.kickstarter.com/projects/curtisclow/the-wild-cosmos-1-3-a-sci-fi-fan
 - Debug with redux devtools to see what actions are being dispatched and how long they take
 - Add better trackBy functions for `*ngFor` directives
 - memoize expensive functions
+- Use observable to manage complex logic instead of calling functions in template

packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.html

@@ -27,7 +27,7 @@
           name="collection"
           nzPlaceHolder="Choose"
         >
-          @for (collection of collections; track trackById($index, collection)) {
+          @for (collection of collections; track collection.id) {
             <nz-option
               [nzValue]="collection.id"
               [nzLabel]="collection.title"
@@ -80,7 +80,7 @@
               name="workspace"
               nzPlaceHolder="Choose"
             >
-              @for (workspace of workspaces; track trackById($index, workspace)) {
+              @for (workspace of workspaces; track workspace.id) {
                 <nz-option
                   [nzValue]="workspace.id"
                   [nzLabel]="workspace.label"

packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.html

@@ -4,7 +4,7 @@
       <nz-form-label>{{ 'AUTHORIZATION_TYPE_TEXT' | translate }}</nz-form-label>
       <nz-form-control [nzSm]="8" nzErrorTip="The input is not a valid type!">
         <nz-select formControlName="type">
-          @for (item of AUTH_TYPES; track $index) {
+          @for (item of AUTH_TYPES; track item) {
             <nz-option
               [nzValue]="item"
               [nzLabel]="AUTH_MAPPING[item].copy | translate"

packages/altair-app/src/app/modules/altair/components/banner-container/banner-container.component.html

@@ -1,3 +1,3 @@
-@for (banner of banners$ | async; track $index) {
+@for (banner of banners$ | async; track banner.id) {
   <app-banner [banner]="banner" (dismiss)="onDismiss($event)"></app-banner>
 }

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-field/doc-viewer-field.component.html

@@ -36,7 +36,7 @@
       <div class="doc-viewer-section-title">
         {{ 'DOCS_ARGUMENTS_TEXT' | translate }}
       </div>
-      @for (arg of data.args; track argTrackBy($index, arg)) {
+      @for (arg of data.args; track arg.name) {
         <div class="doc-viewer-item doc-viewer-item-query">
           <div class="doc-viewer-item-query-inner">
             <span class="no-link-link" (click)="goToType(arg.type.inspect())">

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-search-results/doc-viewer-search-results.component.html

@@ -8,7 +8,7 @@
       class="doc-viewer-search-result-item"
       (click)="goToItem(result)"
       [@showResultItem]
-      >
+    >
       @switch (result.cat) {
         @case ('type') {
           <span class="doc-viewer-search-result-cat cat-type">{{
@@ -17,15 +17,14 @@
         }
         @case ('field') {
           @if (result.isQuery) {
-            <span
-              class="doc-viewer-search-result-cat cat-query"
-              >{{ getProperName(result.type || '') }}</span>
+            <span class="doc-viewer-search-result-cat cat-query">{{
+              getProperName(result.type || '')
+            }}</span>
           }
           @if (!result.isQuery) {
-            <span
-              class="doc-viewer-search-result-cat cat-field"
-              >{{ 'DOCS_FIELD_TEXT' | translate }}</span
-              >
+            <span class="doc-viewer-search-result-cat cat-field">{{
+              'DOCS_FIELD_TEXT' | translate
+            }}</span>
           }
         }
       }
@@ -35,38 +34,37 @@
             class="doc-viewer-search-result-parent-type"
             (click)="goToItem(result)"
             >{{ result.type }}.</span
+          >
+        }
+        <span
+          [ngClass]="{
+            'doc-viewer-search-result-highlight': result.highlight !== 'argument',
+          }"
+          >{{ result.name }}</span
+        >
+        @if (result.args && result.args.length) {
+          (
+          @for (arg of result.args; track arg.name; let last = $last) {
+            <span
+              [ngClass]="{
+                'doc-viewer-search-result-highlight':
+                  result.highlight === 'argument',
+              }"
             >
-            }<span
-    [ngClass]="{
-      'doc-viewer-search-result-highlight': result.highlight !== 'argument'
-    }"
-            >{{ result.name }}</span
-            >
-            @if (result.args && result.args.length) {
-              (
-              @for (
-                arg of result.args; track resultArgTrackBy($index,
-                arg); let last = $last) {
-                <span
-      [ngClass]="{
-        'doc-viewer-search-result-highlight':
-          result.highlight === 'argument'
-      }"
-                  >
-                  <span>{{ arg.name }}</span
-                    >@if (!last) {
-                    <span>,</span>
-                  }
-                </span>
+              <span>{{ arg.name }}</span>
+              @if (!last) {
+                <span>,</span>
               }
-              )
-            }
-          </div>
-          <div
-            class="doc-viewer-search-result-description"
-            markdown
-            [data]="result.description"
-          ></div>
-        </div>
-      }
+            </span>
+          }
+          )
+        }
+      </div>
+      <div
+        class="doc-viewer-search-result-description"
+        markdown
+        [data]="result.description"
+      ></div>
     </div>
+  }
+</div>

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.html

@@ -79,7 +79,7 @@
         [nzDefaultActiveFirstOption]="false"
         (selectionChange)="searchDocs(autocompleteInput.value)"
       >
-        @for (option of autocompleteOptions; track option) {
+        @for (option of autocompleteOptions; track $index) {
           <nz-auto-option [nzValue]="option" [nzLabel]="option.search">
             <div class="doc-viewer-autocomplete-item">
               {{ option.search }}
@@ -99,7 +99,7 @@
         <div>
           @switch (docView.view) {
             @case ('root') {
-              @for (item of rootTypes; track rootTypeTrackBy($index, item)) {
+              @for (item of rootTypes; track item.name) {
                 <div class="doc-viewer-item">
                   @if (item) {
                     <span class="no-link-link" (click)="goToType(item.name)">{{

packages/altair-core/jest.config.js

@@ -9,7 +9,5 @@ module.exports = {
   },
   coverageDirectory: '<rootDir>/.coverage',
   collectCoverage: true,
-  transformIgnorePatterns: [
-    'node_modules/.pnpm/(?!@angular|@firebase|@ngrx|@sentry|lodash-es|altair-graphql-core|angular-resizable-element|angular-split|dexie|uuid|ngx-cookie-service|ngx-markdown|ky|color-name|json-schema-library|graphql-language-service|vscode-languageserver-types|cm6-graphql|ngx-toastr|@ngx-translate|lucide-angular|ng-zorro-antd|@ant-design\\+icons-angular|ngx-pipes)',
-  ],
+  transformIgnorePatterns: ['node_modules/.pnpm/(?!uuid|ngx-pipes)'],
 };

packages/altair-core/src/script/context.ts

@@ -8,7 +8,6 @@ import {
   ScriptContextResponse,
 } from './types';
 import { get, set } from 'object-path';
-import { v4 as uuid } from 'uuid';
 
 export const ModuleImports: ModuleImportsMap = {
   atob: {
@@ -98,7 +97,7 @@ export const getGlobalContext = (
     log: (d) => {
       data.requestScriptLogs = data.requestScriptLogs ?? [];
       data.requestScriptLogs.push({
-        id: uuid(),
+        id: crypto.randomUUID(),
         time: Date.now(),
         text: JSON.stringify(d, null, 2),
         source: 'Request script',