Staging

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,6 +5,7 @@
 
 - [ ] Ran `yarn test-build`
 - [ ] Updated relevant documentations
+- [ ] Updated matching config options in altair-static
 
 ### Changes proposed in this pull request:
 <!-- Describe the changes being introduced in this PR -->

.github/workflows/firebase-hosting-pull-request.yml

@@ -5,6 +5,7 @@ name: Deploy to Firebase Hosting on PR
 'on': pull_request
 jobs:
   build_and_preview:
+    if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr.yml

@@ -19,7 +19,13 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn global add @angular/cli karma lerna surge
+    - name: restore lerna
+      uses: actions/cache@v2
+      with:
+        path: |
+          node_modules
+          */*/node_modules
+        key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
     - run: yarn --frozen-lockfile
     - uses: nick-invision/retry@v2
       with:
@@ -35,7 +41,6 @@ jobs:
       uses: GabrielBB/xvfb-action@v1
       with:
         run: yarn lerna run --scope altair-app e2e:ci
-
   # https://github.com/marketplace/actions/deployment-action
   deploy-surge:
     runs-on: ubuntu-latest

.github/workflows/release.yml

@@ -6,8 +6,18 @@ on:
     - '**'
 
 # TODO: Handle npm package release
+# https://github.com/apollo-elements/apollo-elements/blob/6e1bb2ab51a60cebbaed2c8aca86b2e8b2ec9336/.github/workflows/main.yml#L25
 # TODO: Handle browser extension release
 jobs:
+  release-draft:
+    name: Release draft
+    runs-on: ubuntu-latest
+    steps:
+    - uses: marvinpinto/action-automatic-releases@latest
+      with:
+        repo_token: ${{ secrets.github_token }}
+        prerelease: false
+        draft: true
   electron:
     strategy:
       matrix:
@@ -20,7 +30,6 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: yarn global add @angular/cli karma lerna surge
     - run: yarn --frozen-lockfile
     - uses: nick-invision/retry@v2
       with:
@@ -53,3 +62,19 @@ jobs:
         # macOS notarization API key
         API_KEY_ID: ${{ secrets.apple_api_key_id }}
         API_KEY_ISSUER_ID: ${{ secrets.apple_api_key_issuer_id }}
+  npm-publish:
+    runs-on: ubuntu-latest
+    needs: electron
+    steps:
+    - uses: actions/checkout@v2
+    - name: Authenticate with Registry
+      run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
+      env:
+        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    - run: yarn --frozen-lockfile
+    - uses: nick-invision/retry@v2
+      with:
+        timeout_minutes: 15
+        max_attempts: 3
+        command: yarn build:ci
+    - run: yarn lerna publish from-git --force-publish=* --no-git-tag-version --no-push --yes

README.md

@@ -122,10 +122,11 @@ $ composer require xkojimedia/laravel-altair-graphql
 *You can find other available integrations here: https://altair.sirmuel.design/docs/integrations*
 
 ### Configuration Options
-When using a custom instance of Altair, there are [couple of options](https://github.com/imolorhe/altair/blob/staging/packages/altair-app/src/app/config.ts#L7) you can use to customize Altair based on your needs:
+When using a custom instance of Altair, there are [couple of options](https://github.com/imolorhe/altair/blob/staging/packages/altair-app/src/app/modules/altair/config.ts#L9) you can use to customize Altair based on your needs:
 
 - `endpointURL` `string` - URL to set as the server endpoint
 - `subscriptionsEndpoint` `string` - URL to set as the subscription endpoint
+- `initialSubscriptionsProvider` `"websocket" | "graphql-ws" | "app-sync" | "action-cable"` - Initial subscriptions provider
 - `initialQuery` `string` - Initial query to be added
 - `initialVariables` `string` - Initial variables to be added (in JSON format) e.g. `'{ "var1": "first variable" }'`
 - `initialPreRequestScript` `string` - Initial pre-request script to be added e.g. `'altair.helpers.getEnvironment("api_key")'`

bin/deploy.js

@@ -72,8 +72,8 @@ async function main() {
     await createReleaseTag(newVersion);
     log('Pushing release tag...');
     await pushReleaseTag();
-    log('Running release command for release notes...');
-    await startReleaseNotes();
+    // log('Running release command for release notes...');
+    // await startReleaseNotes();
     log('Create a staging to master PR');
     log('Now wait till all the CI builds are completed, and the binaries have been published in Github release');
     await inquirer.prompt([
@@ -108,10 +108,10 @@ async function main() {
 }
 main();
 
-const exec = async(...args) => {
+const exec = async(file, arguments = [], options = {}) => {
   // @ts-ignore
-  const subprocess = execa(...args);
-  subprocess.stdout.pipe(process.stdout);
+  const subprocess = execa(file, arguments, { stdio: 'inherit', ...options });
+  // subprocess.stdout.pipe(process.stdout);
 
   await subprocess;
 };

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": "4.0.2",
+  "version": "4.0.3",
   "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: 4.0.2
+  version: 4.0.3
   icons:
     16: assets/img/altair_logo_128.png
     48: assets/img/altair_logo_128.png

docs/_config.yml

@@ -35,6 +35,10 @@ releases:
     unique_term: dmg
     link: https://github.com/imolorhe/altair/releases/latest
     extra: brew install --cask altair-graphql-client
+  -
+    name: macOS M1
+    image: osx_logo.svg
+    unique_term: _arm64_mac.dmg
   -
     name: linux
     image: linux_logo.svg

docs/docs/features/environment-variables.md

@@ -14,4 +14,32 @@ After defining your environment variables, you can use them using the double cur
 
 ![altair](https://miro.medium.com/max/5760/1*4FkypN32B8E1K9mJHoKaWA.png)
 
-Now you can easily test your GraphQL implementations across all your environments by just changing the environment you’re currently working with (instead of having to go to all the tabs to change the URLs and tokens 🤢).
+You can also access nested environment variables using the object dot notation.
+
+```json
+{
+  "meta": {
+    "env": "staging"
+  }
+}
+```
+
+Given the environment payload above, you can use the `env` variable by using `{{meta.env}}`.
+
+Now you can easily test your GraphQL implementations across all your environments by just changing the environment you’re currently working with (instead of having to go to all the tabs to change the URLs and tokens 🤢).
+
+While you can create an environment, there is also the **Global environment** which doesn't need to be selected to be active. If an environment is selected, the environment is merged (shallow merge) with whatever is set in the Global environment. If no environment is selected, only the environment variables in the Global environment can be used.
+
+### Special environment variables
+
+**headers** - If you specify a `headers` payload in any of the environments (including Global environment), the headers you specify there would be set for all requests sent from all the tabs.
+
+```json
+{
+  "headers": {
+    "X-Api-Token": "12345"
+  }
+}
+```
+
+For example given the environment above, every request sent in Altair would have the `X-Api-Token` header set to `12345`.

docs/docs/features/headers.md

@@ -8,5 +8,5 @@ parent: Features
 Altair provides flexibility by allowing you to set custom request headers. Also, the
 response status code and time taken are available upon completion of the request.
 
-You can also set global headers via the global environment. Just add a `headers` payload with your global headers there and these headers would be applied to all the windows.
-![global environment](https://i.imgur.com/uG98IHg.png)
+You can also set global headers via the [global environment](./environment-variables). Just add a `headers` payload with your global headers there and these headers would be applied to all the windows.
+![global environment](https://i.imgur.com/uG98IHg.png)

docs/docs/plugins/index.md

@@ -9,4 +9,34 @@ nav_order: 3
 
 Altair comes with the ability to be extended via plugins. These allow you customize the functionality provided by Altair to be able to do even more than what is directly available in Altair.
 
-> Plugins are still in beta. For that reason, they are not enabled by default. To use plugins, you need to enable experimental features from the settings, then restart Altair. After that, any plugins that are added should be enabled in the app.
+Plugins can be added by adding them to the `plugin.list` options in the settings. Alternatively, you can discover available plugins to use from the plugin manager and add the plugin from there (which does the same thing).
+
+![plugin manager icon](https://i.imgur.com/H0eqhvy.png)
+
+![plugin manager](https://i.imgur.com/8zTpbTq.png)
+
+Adding plugins to the settings uses the following format:
+
+`<plugin-source>:<plugin-name>@<version>::[<opt>]->[<opt-value>]`
+
+**Plugin source:** Altair supports several sources for plugins: `[npm](https://www.npmjs.com/)` (default), `[github](https://github.com/)` and `url`. Released plugins should be available in npm so all plugins are sourced from npm by default. If you specify the source as `url`, then you need to specify an `opt` for the url such as `[url]->[http://localhost:8080]`. If you specify the source as `github`, then you need to specify an `opt` for the repo to be used such as `[repo]->[imolorhe/altair]`
+
+**Plugin name:** Every plugin must have a name, used to uniquely identify the plugin. Every plugin name must begin with `altair-graphql-plugin-` else Altair would throw an error.
+
+**Version:** You can choose to specify the version of the plugin you want to use. If no version is specified, Altair defaults to use the latest version of the plugin available.
+
+**Extra options:** Depending on the plugin source specified, you can specify extra options as required. All options follow the format `[opt]->[value]`. For example, `[repo]->[imolorhe/altair]`.
+
+In its simplest form, you can retrieve a plugin by specifying only the plugin name, then the default version (latest) and source (npm) are used. The following are valid examples of ways to use plugins:
+
+```yaml
+# loads "altair-graphql-plugin-graphql-explorer" plugin from npm using the latest version
+altair-graphql-plugin-graphql-explorer
+
+# loads "altair-graphql-plugin-some-plugin" plugin from the localhost URL. Version is ignored
+url:altair-graphql-plugin-some-plugin@0.0.1::[url]->[http://localhost:8002]
+
+# loads "altair-graphql-plugin-json-to-csv" plugin from github from the specified repo
+github:altair-graphql-plugin-json-to-csv::[repo]->[isaachvazquez/altair-graphql-plugin-json-to-csv]
+
+```

lerna.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "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": "4.0.2",
+  "version": "4.0.3",
   "description": "Contains the altair app",
   "main": "dist/main.js",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "e2e:ci": "ng e2e --webdriver-update=false",
-    "generate-settings-schema": "typescript-json-schema --ignoreErrors src/app/modules/altair/store/settings/settings.reducer.ts State > src/app/modules/altair/utils/settings.schema.json",
+    "generate-settings-schema": "typescript-json-schema --ignoreErrors src/app/modules/altair/store/settings/settings.interfaces.ts SettingsState > src/app/modules/altair/utils/settings.schema.json",
     "compile-settings-schema-validator": "ajv compile -s src/app/modules/altair/utils/settings.schema.json -o src/app/modules/altair/utils/validate_settings_schema.js",
     "generate-settings-schema-validator": "yarn generate-settings-schema && yarn compile-settings-schema-validator",
     "analyze": "ng build --stats-json && npx webpack-bundle-analyzer dist/stats.json",
@@ -95,6 +95,7 @@
     "ngx-popper": "^7.0.0",
     "ngx-sortablejs": "^11.1.0",
     "ngx-take-until-destroy": "^5.4.0",
+    "object-path": "^0.11.5",
     "popper.js": "^1.15.0",
     "prettier": "^1.18.2",
     "rxjs": "^6.6.6",
@@ -126,6 +127,7 @@
     "@types/memoizee": "^0.4.3",
     "@types/mousetrap": "^1.6.3",
     "@types/node": "^12.11.1",
+    "@types/object-path": "^0.11.0",
     "@types/prettier": "^1.19.0",
     "@types/to-snake-case": "^1.0.0",
     "@types/uuid": "^3.4.6",

packages/altair-app/src/app/modules/altair/altair.module.ts

@@ -15,7 +15,7 @@ import { SortablejsModule } from 'ngx-sortablejs';
 import { CookieService } from 'ngx-cookie-service';
 import { SharedModule } from './modules/shared/shared.module';
 
-import { getReducer, metaReducers, reducerToken, State } from './store';
+import { getReducer, metaReducers, reducerToken } from './store';
 
 import { QueryEffects } from './effects/query.effect';
 import { WindowsEffects } from './effects/windows.effect';
@@ -42,6 +42,7 @@ import { AppOverlayContainer } from './overlay-container';
 import { environment } from 'environments/environment';
 import { AppInitAction } from './store/action';
 import { ReducerBootstrapper } from './store/reducer-bootstrapper';
+import { RootState } from './store/state.interfaces';
 
 registerLocaleData(en);
 
@@ -82,7 +83,6 @@ const providers = [
   services.ThemeRegistryService,
   services.SubscriptionProviderRegistryService,
   services.PluginContextService,
-  services.BackupService,
   // Setting the reducer provider in main.ts now (for proper config initialization)
   // reducerProvider,
   CookieService,
@@ -158,7 +158,7 @@ const providers = [
 export class AltairModule {
   constructor(
     applicationInitStatus: ApplicationInitStatus,
-    store: Store<State>,
+    store: Store<RootState>,
     reducerBootstrapper: ReducerBootstrapper,
   ) {
     applicationInitStatus.donePromise.then(() => store.dispatch(new AppInitAction({ initialState: reducerBootstrapper.initialState })));