window.component.html

<app-plugin-element
  *ngFor="let pluginData of pluginsData; trackBy:pluginTrackBy;"
  [pluginData]="pluginData"
></app-plugin-element>
<div class="app-window__content">
  <div class="window-loader" *ngIf="isLoading$ | async" [@fadeInOutAnimation]>
    <div class="window-loader__content">
      <img src="assets/img/logo.svg" alt="" class="loader-img anim" [ngClass]="{ 'anim-rotate': isLoading$ | async }"> {{ 'LOADING_INDICATOR_TEXT' | translate }}
      <div class="window-loader__actions">
        <button class="app-button cancel-request-button" (click)="cancelRequest()" track-id="cancel_request">{{ 'CANCEL_TEXT' | translate }}</button>
      </div>
    </div>
  </div>
  <app-url-box
    [apiUrl]="apiUrl"
    [httpVerb]="httpVerb"
    [isSubscribed]="isSubscribed$ | async"
    [isLoading]="isLoading$ | async"
    [showDocs]="showDocs$ | async"
    [selectedOperation]="selectedOperation$ | async"
    [queryOperations]="queryOperations$ | async"
    [streamState]="streamState$ | async"
    [currentCollection]="currentCollection$ | async"

    (urlChange)="setApiUrl($event)"
    (httpVerbChange)="setApiMethod($event)"
    (sendRequest)="sendRequest()"
    (toggleDocsChange)="toggleDocs()"
    (reloadDocsChange)="reloadDocs()"
    (addToCollectionChange)="toggleAddToCollectionDialog(true)"
    (selectedOperationChange)="selectOperation($event)"
    (exportWindowChange)="exportWindowData()"
    (updateQueryInCollectionChange)="updateQueryInCollection()"
  ></app-url-box>
  <div class="main-content-area">
    <div class="main-content-row" data-resize-container>
      <app-query-editor
        #queryEditor
        (queryChange)="updateQuery($event)"
        (sendRequest)="sendRequest($event)"
        (variablesChange)="updateVariables($event)"
        (toggleVariableDialog)="toggleVariableDialog($event)"
        (addFileVariableChange)="addFileVariable()"
        (fileVariableNameChange)="updateFileVariableName($event)"
        (fileVariableDataChange)="updateFileVariableData($event)"
        (deleteFileVariableChange)="deleteFileVariable($event)"
        (queryEditorStateChange)="setQueryEditorState($event)"
        (showTokenInDocsChange)="onShowTokenInDocs($event)"
        [query]="query"
        [gqlSchema]="gqlSchema"
        [tabSize]="tabSize$ | async"
        [variables]="variables$ | async"
        [showVariableDialog]="showVariableDialog"
        [addQueryDepthLimit] = "addQueryDepthLimit$ | async"
      ></app-query-editor>
      <app-query-result
        [queryResult]="queryResult$ | async"
        [responseTime]="responseTime$ | async"
        [responseStatus]="responseStatus$ | async"
        [responseStatusText]="responseStatusText$ | async"
        [isSubscribed]="isSubscribed$ | async"
        [subscriptionResponses]="subscriptionResponses$ | async"
        [subscriptionUrl]="subscriptionUrl"
        [tabSize]="tabSize$ | async"
        [autoscrollSubscriptionResponses]="autoscrollSubscriptionResponses$ | async"
        [actionButtons]="resultPaneActionButtonRenderOutputs"

        (downloadResultChange)="downloadResult()"
        (stopSubscriptionChange)="stopSubscription()"
        (clearSubscriptionChange)="clearSubscription()"
        (autoscrollSubscriptionResponsesChange)="toggleAutoscrollSubscriptionResponses()"
        (actionButtonClickChange)="onActionButtonClicked($event)"
      ></app-query-result>
      <app-doc-viewer
        [docView]="docView$ | async"
        [gqlSchema]="gqlSchema"
        [allowIntrospection]="allowIntrospection$ | async"
        [ngClass]="{'hide-doc': !(showDocs$ | async)}"
        [isLoading]="docsIsLoading$ | async"
        [addQueryDepthLimit] = "addQueryDepthLimit$ | async"
        [tabSize]="tabSize$ | async"
        [lastUpdatedAt]="schemaLastUpdatedAt$ | async"
        (setDocViewChange)="setDocView($event)"
        (toggleDocsChange)="toggleDocs()"
        (addQueryToEditorChange)="addQueryToEditor($event)"
        (exportSDLChange)="exportSDL()"
        (loadSchemaChange)="loadSchemaFromSDL()"
      ></app-doc-viewer>
    </div>
  </div>
  <div class="dialogs">
    <nz-modal
      [nzVisible]="showHeaderDialog"
      (nzVisibleChange)="toggleHeader($event)"
      [nzTitle]="modalTitle"
      [nzContent]="modalContent"
      [nzFooter]="modalFooter"
      (nzOnCancel)="toggleHeader()"
    >
      <ng-template #modalTitle>
        <div class="app-dialog-header">
          <div class="app-dialog-title">{{ 'HEADERS_TEXT' | translate }}</div>
          {{ 'SET_HEADERS_DIALOG_SUBTEXT' | translate }}
        </div>
      </ng-template>

      <ng-template #modalContent>
        <div class="app-dialog-body">
          <div class="set-header-input-container" *ngFor="let header of headers$ | async;trackBy:trackByFn; let i = index">
            <div class="set-header-input-column">
              <app-fancy-input
                class="set-header-input"
                placeholder="Header key"
                [ngModel]="header.key"
                (ngModelChange)="headerKeyChange($event, i)"
                (submit)="toggleHeader()"
              ></app-fancy-input>
            </div>
            <div class="set-header-input-column">
              <app-fancy-input
                class="set-header-input"
                placeholder="Header value"
                [ngModel]="header.value"
                (ngModelChange)="headerValueChange($event, i)"
                (submit)="toggleHeader()"
              ></app-fancy-input>
            </div>
            <button class="header-input-remove-button" (click)="removeHeader(i)">&times;</button>
          </div>
        </div>
      </ng-template>

      <ng-template #modalFooter>
        <div class="app-dialog-footer">
          <button track-id="add_header" class="app-button active-grey left" (click)="addHeader()">{{ 'ADD_HEADER_TEXT' | translate }}</button>
          <button class="app-button active-primary right" (click)="toggleHeader()">{{ 'SAVE_BUTTON' | translate }}</button>
        </div>
      </ng-template>
    </nz-modal>
    <app-subscription-url-dialog
      [subscriptionUrl]="subscriptionUrl"
      [subscriptionConnectionParams]="subscriptionConnectionParams"
      [showDialog]="showSubscriptionUrlDialog"
      (toggleDialogChange)="toggleSubscriptionUrlDialog($event)"
      (subscriptionUrlChange)="updateSubscriptionUrl($event)"
      (subscriptionConnectionParamsChange)="updateSubscriptionConnectionParams($event)"
    ></app-subscription-url-dialog>
    <app-history-dialog
      [historyList]="historyList"
      [showDialog]="showHistoryDialog"
      (toggleDialogChange)="toggleHistoryDialog($event)"
      (restoreHistoryChange)="restoreHistory($event)"
      (clearHistoryChange)="clearHistory()"
    ></app-history-dialog>
    <app-dialog
      [showDialog]="showAddToCollectionDialog"
      [heading]="'SAVE_TO_COLLECTION_HEADER' | translate"
      [subheading]="'SAVE_TO_COLLCTION_SUBTEXT' | translate"
      [showFooter]="false"

      (toggleDialog)="toggleAddToCollectionDialog($event)"
    >
      <div class="add-to-collection-wrapper">
        <div class="app-dialog-section">
          {{ 'SAVE_TO_COLLECTION_NAME_OF_QUERY' | translate }}
          <input type="text" class="dialog-input" [(ngModel)]="newCollectionQueryTitle" attr.aria-label="{{ 'SAVE_TO_COLLECTION_NAME_OF_QUERY' | translate }}">
        </div>
        <div class="app-dialog-section">
          <div class="add-to-collection__list">
            <div class="add-to-collection__list-item" *ngFor="let collection of (collections$ | async); trackBy:trackById" (click)="saveQueryToCollection(collection.id)">
              {{ collection.title }}
            </div>
          </div>
        </div>
        <div class="app-dialog-section">
          {{ 'SAVE_TO_COLLECTION_OR_CREATE_NEW_COLLECTION_LABEL' | translate }}
          <input type="text" class="dialog-input" [(ngModel)]="newCollectionTitle" attr.aria-label="{{ 'SAVE_TO_COLLECTION_OR_CREATE_NEW_COLLECTION_LABEL' | translate }}">
          <div class="add-to-collection__actions clearfix">
            <button class="app-button active-grey right" (click)="createCollectionAndSaveQueryToCollection()">{{ 'CREATE_COLLECTION_BUTTON' | translate }}</button>
          </div>
        </div>
      </div>
    </app-dialog>
    <app-dialog
      [showDialog]="showPreRequestDialog"
      [heading]="'PRE_REQUEST_EDITOR_HEADER' | translate"
      [subheading]="'PRE_REQUEST_EDITOR_SUBTEXT' | translate"

      (toggleDialog)="togglePreRequestDialog($event)"
    >
      <app-pre-request-editor
        [preRequest]="preRequest$ | async"
        (preRequestScriptChange)="updatePreRequestScript($event)"
        (preRequestEnabledChange)="updatePreRequestEnabled($event)"
      ></app-pre-request-editor>
    </app-dialog>
  </div>
</div>