Merge pull request #1209 from imolorhe/staging

Staging

chrome-ext-files/manifest.json

@@ -3,7 +3,7 @@
   "name": "Altair GraphQL Client",
   "short_name": "Altair",
   "description": "The only graphQL client you'll ever need.",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "icons": {
     "16": "assets/img/altair_logo_128.png",
     "48": "assets/img/altair_logo_128.png",

cwex.yml

@@ -10,7 +10,7 @@ manifestOptions:
   name: Altair GraphQL Client
   short_name: Altair
   description: A beautiful feature-rich GraphQL client for all platforms
-  version: 2.4.4
+  version: 2.4.5
   icons:
     16: assets/img/altair_logo_128.png
     48: assets/img/altair_logo_128.png

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.4.4",
+  "version": "2.4.5",
   "registry": "https://registry.npmjs.org/",
   "npmClient": "yarn",
   "stream": true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "license": "MIT",
   "author": "Samuel Imolorhe <altair@sirmuel.design> (https://sirmuel.design/)",
   "description": "The best graphQL client you will ever need",

packages/altair-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair-app",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "Contains the altair app",
   "main": "dist/main.js",
   "license": "MIT",

packages/altair-app/src/app/components/query-result/query-result.component.html

@@ -33,6 +33,13 @@
           <app-icon name="download"></app-icon>
           {{ 'QUERY_RESULT_DOWNLOAD_RESULT_BUTTON' | translate }}
         </button>
+        <button
+          *ngFor="let button of actionButtons"
+          class="query-result__download-button"
+          (click)="actionButtonClickChange.next(button)"
+        >
+          {{ button.text }}
+        </button>
       </div>
       <ngx-codemirror
         #editor

packages/altair-app/src/app/components/query-result/query-result.component.ts

@@ -46,11 +46,13 @@ export class QueryResultComponent implements OnChanges, DoCheck {
   @Input() subscriptionUrl = '';
   @Input() tabSize = 2;
   @Input() autoscrollSubscriptionResponses = false;
+  @Input() actionButtons = [];
 
   @Output() downloadResultChange = new EventEmitter();
   @Output() stopSubscriptionChange = new EventEmitter();
   @Output() clearSubscriptionChange = new EventEmitter();
   @Output() autoscrollSubscriptionResponsesChange = new EventEmitter();
+  @Output() actionButtonClickChange = new EventEmitter();
 
   @ViewChild('editor', { static: true }) editor: ElementRef & { codeMirror: CodeMirror.Editor };
   @ViewChild('subscriptionResponseList', { static: true }) subscriptionResponseList: ElementRef;

packages/altair-app/src/app/containers/window/window.component.html

@@ -63,11 +63,13 @@
         [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"

packages/altair-app/src/app/containers/window/window.component.ts

@@ -35,10 +35,18 @@ import * as preRequestActions from '../../actions/pre-request/pre-request';
 
 import { GqlService, NotifyService, PluginRegistryService, WindowService } from '../../services';
 import { Observable, empty as observableEmpty, combineLatest } from 'rxjs';
-import { PluginComponentData, PluginInstance, PluginType } from '../../services/plugin/plugin';
+import {
+  PluginComponentData,
+  PluginInstance,
+  PluginType,
+  PluginTypeActionButtonLocation,
+  ActionPlugin,
+  ActionPluginRenderOutput
+} from '../../services/plugin/plugin';
 import { untilDestroyed } from 'ngx-take-until-destroy';
 import { debug } from 'app/utils/logger';
 import { fadeInOutAnimationTrigger } from 'app/animations';
+import { getActionPluginClass } from 'app/services/plugin/plugin-utils';
 
 @Component({
   selector: 'app-window',
@@ -101,6 +109,8 @@ export class WindowComponent implements OnInit, OnDestroy {
 
   historyList: fromHistory.HistoryList = [];
   pluginsData: PluginComponentData[] = [];
+  resultPaneActionButtonPlugins: { pluginName: string, instance: ActionPlugin, data: PluginComponentData['props']}[] = [];
+  resultPaneActionButtonRenderOutputs: ActionPluginRenderOutput[] = [];
 
   constructor(
     private gql: GqlService,
@@ -210,6 +220,31 @@ export class WindowComponent implements OnInit, OnDestroy {
         this.pluginRegistry.getPluginsWithData(PluginType.SIDEBAR, { windowId: this.windowId }).subscribe(pluginsData => {
           this.pluginsData = pluginsData;
         });
+
+        this.pluginRegistry.getPluginsWithData(PluginType.ACTION_BUTTON, { windowId: this.windowId }).subscribe(async(pluginsData) => {
+          // TODO: Consider moving most of this logic out of the window component
+          // Instantiate the plugin classes
+          this.resultPaneActionButtonPlugins = pluginsData.map(pluginData => {
+            if (
+              pluginData.manifest.action_button_opts &&
+              pluginData.manifest.action_button_opts.location === PluginTypeActionButtonLocation.RESULT_PANE
+            ) {
+              const PluginClass = getActionPluginClass(pluginData);
+              if (PluginClass) {
+                return { pluginName: pluginData.name, instance: new PluginClass(pluginData.props), data: pluginData.props };
+              }
+            }
+          }).filter(Boolean) as any;
+
+          // Render the action button outputs
+          const resultPaneRenderOutputPromises = this.resultPaneActionButtonPlugins.map(async actionButtonPlugin => {
+            const output = await actionButtonPlugin.instance.render(actionButtonPlugin.data);
+            return ({ ...output, instance: actionButtonPlugin.instance, pluginName: actionButtonPlugin.pluginName });
+          });
+
+          this.resultPaneActionButtonRenderOutputs = await Promise.all(resultPaneRenderOutputPromises);
+        });
+        // TODO: Call destroy method on each plugin instance
       }
     });
 
@@ -439,6 +474,14 @@ export class WindowComponent implements OnInit, OnDestroy {
     this.store.dispatch(new schemaActions.LoadSDLSchemaAction(this.windowId));
   }
 
+  onActionButtonClicked(button: ActionPluginRenderOutput) {
+    const abPlugin = this.resultPaneActionButtonPlugins.find(_abPlugin => _abPlugin.pluginName === button.pluginName);
+    if (abPlugin) {
+      // Call execute on plugin instance
+      abPlugin.instance.execute(abPlugin.data);
+    }
+  }
+
   /**
    * Export the data in the current window
    */

packages/altair-app/src/app/services/plugin/plugin-utils.ts

@@ -0,0 +1,8 @@
+import { PluginInstance, ActionPlugin } from './plugin';
+
+export const getActionPluginClass = (plugin: PluginInstance) => {
+  if (plugin.manifest.action_button_opts && plugin.manifest.action_button_opts.class_name) {
+    return (window as any)['AltairGraphQL'].plugins[plugin.manifest.action_button_opts.class_name] as ActionPlugin;
+  }
+  return;
+};

packages/altair-app/src/app/services/plugin/plugin.ts

@@ -16,6 +16,7 @@ export enum PluginSource {
 export enum PluginType {
   HEADER = 'header',
   SIDEBAR = 'sidebar',
+  ACTION_BUTTON = 'action_button',
 }
 
 /**
@@ -36,6 +37,15 @@ export interface PluginSidebarOptions {
   icon: string;
 }
 
+export enum PluginTypeActionButtonLocation {
+  RESULT_PANE = 'result_pane',
+}
+
+export interface PluginTypeActionButtonOptions {
+  class_name: string;
+  location: PluginTypeActionButtonLocation;
+}
+
 /**
  * Plugin Manifest Structure
  */
@@ -50,6 +60,7 @@ export interface PluginManifest {
   author?: string;
   type: PluginType;
   sidebar_opts?: PluginSidebarOptions;
+  action_button_opts?: PluginTypeActionButtonOptions;
   scripts: string[];
   styles?: string[];
   // Plugin capabilities
@@ -132,3 +143,16 @@ export class AltairPlugin implements PluginInstance {
 export const isAppLevelPluginType = (pluginType: PluginType) => {
   return [ PluginType.HEADER ].includes(pluginType);
 }
+
+export interface ActionPluginRenderOutput {
+  pluginName: string;
+  text: string;
+  instance?: ActionPlugin;
+}
+
+export interface ActionPlugin {
+  new(props: PluginComponentDataProps): ActionPlugin;
+  render(props: PluginComponentDataProps): Promise<ActionPluginRenderOutput>;
+  execute(props: PluginComponentDataProps): Promise<void>;
+  destroy?(): Promise<void>;
+}

packages/altair-app/src/assets/i18n/zh-TW.json

@@ -18,15 +18,15 @@
   "DONE_BUTTON": "確認",
   "CLICK_HERE_TEXT": "點擊此處",
   "ADD_NEW_WINDOW_TEXT": "+ 新增",
-  "RESTART_TEXT": "Restart",
+  "RESTART_TEXT": "重新開始",
   "DOCS_GO_BACK_TEXT": "返回",
   "DOCS_EXPORT_SDL": "匯出SDL",
   "DOCS_LOAD_SCHEMA": "載入基模",
   "DOCS_SEARCH_INPUT_PLACEHOLDER_TEXT": "Search docs...",
   "DOCS_ARGUMENTS_TEXT": "Arguments",
   "DOCS_TYPE_TEXT": "類型",
-  "DOCS_FIELD_TEXT": "Field",
-  "DOCS_FIELDS_TEXT": "Fields",
+  "DOCS_FIELD_TEXT": "欄目",
+  "DOCS_FIELDS_TEXT": "欄目",
   "DOCS_SEARCH_RESULTS_TEXT": "搜尋結果",
   "DOCS_VALUES_TEXT": "值",
   "DOCS_DEPRECATED_TEXT": "已棄用",
@@ -37,7 +37,7 @@
   "DOCS_INTERFACE_TEXT": "介面",
   "DOCS_IMPLEMENTATIONS_TEXT": "實現方法",
   "DOCS_IMPLEMENTS_TEXT": "實現",
-  "DOCS_LAST_UPDATED": "Last updated",
+  "DOCS_LAST_UPDATED": "上次更新於",
   "QUERY_RESULT_NO_RESULT_TEXT": "我的朋友Ezio，我可以幫到你嗎？",
   "QUERY_RESULT_STATUS_TEXT": "狀態",
   "QUERY_RESULT_STATUS_CODE_TEXT": "狀態碼",
@@ -54,26 +54,26 @@
   "SUBSCRIPTION_URL_TEXT": "訂閱網址",
   "SET_SUBSCRIPTION_URL_TEXT": "Enter the subscription URL for your server below",
   "SUBSCRIPTION_CONNECTION_PARAMS_TEXT": "Connection Parameters (in JSON)",
-  "HISTORY_TEXT": "History",
-  "HISTORY_CLEAR_TEXT": "Clear History",
+  "HISTORY_TEXT": "歷史記錄",
+  "HISTORY_CLEAR_TEXT": "清除歷史記錄",
   "HISTORY_SUB_TEXT": "You can select an item from the history to restore",
-  "SETTINGS_TEXT": "Settings",
+  "SETTINGS_TEXT": "設定",
   "SETTINGS_SUB_TEXT": "You can adjust any of the settings below",
-  "SETTINGS_VERSION_TEXT": "App Version:",
-  "SETTINGS_THEME_TEXT": "Theme",
-  "SETTINGS_LANGUAGE_TEXT": "Language",
+  "SETTINGS_VERSION_TEXT": "應用版本：",
+  "SETTINGS_THEME_TEXT": "佈景主題",
+  "SETTINGS_LANGUAGE_TEXT": "語言",
   "SETTINGS_ADD_QUERY_DEPTH_LIMIT_TEXT": "Add Query Depth Limit",
-  "SETTINGS_TAB_SIZE_TEXT": "Tab Size",
+  "SETTINGS_TAB_SIZE_TEXT": "制表符寬度",
   "SETTINGS_HELP_WITH_TRANSLATIONS_TEXT": "Would you like to help with translations?",
   "SETTINGS_SHOW_EDITOR_HINT": "Press ctrl-space to show hint",
   "SETTINGS_KEYBOARD_SHORTCUTS": "Keyboard shortcuts",
   "SETTINGS_RESET_APPLICATION_DATA": "Reset application data (only use this if you know what you are doing).",
   "SETTINGS_TOGGLE_ADVANCED_MODE": "Toggle advanced mode",
-  "VIEW_ON_GITHUB_TEXT": "View on GitHub",
+  "VIEW_ON_GITHUB_TEXT": "在 GitHub 上檢視",
   "STAR_ON_GITHUB_TEXT": "Star on GitHub",
-  "REPORT_BUG_TEXT": "Report a bug",
-  "EDIT_WINDOW_TEXT": "Edit",
-  "CLOSE_WINDOW_TEXT": "Close",
+  "REPORT_BUG_TEXT": "回報錯誤",
+  "EDIT_WINDOW_TEXT": "編輯",
+  "CLOSE_WINDOW_TEXT": "關閉",
   "CLOSE_WINDOWS_TO_THE_RIGHT_TEXT": "Close to the Right",
   "CLOSE_OTHER_WINDOWS_TEXT": "Close others",
   "DUPLICATE_WINDOW_TEXT": "Duplicate",
@@ -83,7 +83,7 @@
   "EXPORT_WINDOW_TEXT": "Export Window",
   "IMPORT_CURL_TITLE_TEXT": "Import cURL",
   "IMPORT_CURL_TITLE_SUBTEXT": "Paste your cURL command below",
-  "IMPORT_BUTTON": "Import",
+  "IMPORT_BUTTON": "匯入",
   "COLLECTIONS_TEXT": "Collections",
   "COLLECTIONS_EMPTY_TEXT": "Your collections would appear here.",
   "SAVE_TO_COLLECTION_BUTTON": "Add to collection",

packages/altair-app/src/main.ts

@@ -50,5 +50,6 @@ let initialized = false;
     handleExternalLinks();
     handleDeprecations();
     initialized = true;
-  }
+  },
+  plugins: {},
 };