Added functionality to prettify variables

packages/altair-app/src/app/modules/altair/components/codemirror/codemirror.component.ts

@@ -48,6 +48,7 @@ import {
 
 import { tags as t } from '@lezer/highlight';
 import { InternalEditorError } from '../../utils/errors';
+import { debug } from '../../utils/logger';
 
 @Component({
   selector: 'app-codemirror',
@@ -405,9 +406,31 @@ export class CodemirrorComponent
       updateListener,
       exceptionSink,
       Prec.highest(extraExtensions),
+      // disable default behavior of used extension shortcuts
+      Prec.high(
+        keymap.of([
+          {
+            key: 'Cmd-Enter',
+            run: noOpCommand,
+          },
+          {
+            key: 'Ctrl-Enter',
+            run: noOpCommand,
+          },
+          {
+            key: 'Shift-Ctrl-p',
+            run: noOpCommand,
+          },
+        ])
+      ),
       !this.bare ? [...baseExtensions] : [],
 
       baseTheme,
     ];
   }
 }
+
+export const noOpCommand = () => {
+  debug.log('no op');
+  return true;
+};

packages/altair-app/src/app/modules/altair/components/query-editor/gql-extensions.ts

@@ -116,14 +116,6 @@ export const getCodemirrorGraphqlExtensions = (opts: ExtensionsOptions) => {
           key: 'Ctrl-d',
           run: showInDocsCommand,
         },
-        {
-          key: 'Cmd-Enter',
-          run: noOpCommand,
-        },
-        {
-          key: 'Ctrl-Enter',
-          run: noOpCommand,
-        },
       ])
     ),
     getRunActionPlugin(opts?.onRunActionClick || noOp),

packages/altair-app/src/app/modules/altair/components/variables-editor/utils.ts

@@ -70,7 +70,8 @@ export const graphqlInputTypeToJsonSchemaType = (
     if (isSpecifiedScalarType(type)) {
       return wrapWithAnyOfNull(
         {
-          type: specifiedScalarTypeToJSONSchemaType[type.toString()] ?? 'string',
+          type:
+            specifiedScalarTypeToJSONSchemaType[type.toString()] ?? 'string',
           description: type.description ?? undefined,
           default: defaultValue,
         },

packages/altair-app/src/app/modules/altair/components/variables-editor/variables-editor.component.ts

@@ -33,9 +33,10 @@ import { updateSchema } from 'codemirror-json-schema';
 import { vttToJsonSchema } from './utils';
 
 const AUTOCOMPLETE_CHARS = /^[a-zA-Z0-9_"']$/;
+export const VARIABLE_EDITOR_COMPONENT_ELEMENT_NAME = 'app-variables-editor';
 
 @Component({
-  selector: 'app-variables-editor',
+  selector: VARIABLE_EDITOR_COMPONENT_ELEMENT_NAME,
   templateUrl: './variables-editor.component.html',
   styleUrls: ['./variables-editor.component.scss'],
 })

packages/altair-app/src/app/modules/altair/effects/query.effect.ts

@@ -1165,6 +1165,52 @@ export class QueryEffects {
     { dispatch: false }
   );
 
+  prettifyVariables$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(variablesActions.PRETTIFY_VARIABLES),
+        withLatestFrom(
+          this.store,
+          (
+            action: variablesActions.PrettifyVariablesAction,
+            state: RootState
+          ) => {
+            return {
+              data: state.windows[action.windowId],
+              windowId: action.windowId,
+              action,
+              settings: state.settings,
+            };
+          }
+        ),
+        switchMap((res) => {
+          const variables = res.data?.variables.variables ?? '';
+          try {
+            const prettified = JSON.stringify(
+              JSON.parse(variables),
+              null,
+              res.settings.tabSize
+            );
+            this.store.dispatch(
+              new variablesActions.UpdateVariablesAction(
+                prettified,
+                res.windowId
+              )
+            );
+          } catch (err) {
+            this.notifyService.errorWithError(
+              err,
+              `Your variables does not appear to be valid. Please check it`
+            );
+          }
+
+          return EMPTY;
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   exportSDL$ = createEffect(
     () => {
       return this.actions$.pipe(

packages/altair-app/src/app/modules/altair/services/keybinder/keybinder.service.ts

@@ -7,12 +7,14 @@ import { WindowService } from '../window.service';
 import * as windowsActions from '../../store/windows/windows.action';
 import * as dialogsActions from '../../store/dialogs/dialogs.action';
 import * as queryActions from '../../store/query/query.action';
+import * as variablesActions from '../../store/variables/variables.action';
 import * as collectionActions from '../../store/collection/collection.action';
 import * as docsActions from '../../store/docs/docs.action';
 import { RootState } from 'altair-graphql-core/build/types/state/state.interfaces';
 import { take } from 'rxjs/operators';
 import { catchUselessObservableError } from '../../utils/errors';
 import { isElectronApp } from '../../utils';
+import { VARIABLE_EDITOR_COMPONENT_ELEMENT_NAME } from '../../components/variables-editor/variables-editor.component';
 
 export interface KeyboardShortcutCategory {
   title: string;
@@ -83,10 +85,21 @@ export class KeybinderService {
 
     this.bindShortcut(
       ['Ctrl+Shift+P'],
-      () =>
-        this.store.dispatch(
-          new queryActions.PrettifyQueryAction(this.activeWindowId)
-        ),
+      () => {
+        if (
+          document.activeElement?.closest(
+            VARIABLE_EDITOR_COMPONENT_ELEMENT_NAME
+          )
+        ) {
+          this.store.dispatch(
+            new variablesActions.PrettifyVariablesAction(this.activeWindowId)
+          );
+        } else {
+          this.store.dispatch(
+            new queryActions.PrettifyQueryAction(this.activeWindowId)
+          );
+        }
+      },
       'Prettify Query'
     );
 

packages/altair-app/src/app/modules/altair/store/variables/variables.action.ts

@@ -10,6 +10,8 @@ export const UPDATE_FILE_VARIABLE_IS_MULTIPLE =
   'UPDATE_FILE_VARIABLE_IS_MULTIPLE';
 export const UPDATE_FILE_VARIABLE_DATA = 'UPDATE_FILE_VARIABLE_DATA';
 
+export const PRETTIFY_VARIABLES = 'PRETTIFY_VARIABLES';
+
 export class UpdateVariablesAction implements NGRXAction {
   readonly type = UPDATE_VARIABLES;
 
@@ -58,10 +60,17 @@ export class UpdateFileVariableDataAction implements NGRXAction {
   ) {}
 }
 
+export class PrettifyVariablesAction implements NGRXAction {
+  readonly type = PRETTIFY_VARIABLES;
+
+  constructor(public windowId: string) {}
+}
+
 export type Action =
   | UpdateVariablesAction
   | AddFileVariableAction
   | DeleteFileVariableAction
   | UpdateFileVariableNameAction
   | UpdateFileVariableIsMultipleAction
-  | UpdateFileVariableDataAction;
+  | UpdateFileVariableDataAction
+  | PrettifyVariablesAction;