cli, console: actions dx improvements (close hasura#4306, hasura#4311) (

hasura#4308)
everpay · Apr 16, 2020 · 8a5cc73 · 8a5cc73
1 parent 5116e16
commit 8a5cc73
Show file tree

Hide file tree

Showing 22 changed files with 236 additions and 128 deletions.
diff --git a/cli-ext/package.json b/cli-ext/package.json
@@ -8,7 +8,7 @@
     "pretranspile": "npm run get-shared-modules",
     "transpile": "rm -rf build/* && babel ./src ./tests --out-dir build",
     "prebuild": "npm run transpile",
-    "build": "rm -rf ./bin/* && pkg ./build/command.js --output ./bin/cli-ext-hasura -t node8-linux-x64,node8-macos-x64,node8-win-x64",
+    "build": "rm -rf ./bin/* && pkg ./build/command.js --output ./bin/cli-ext-hasura -t node12-linux-x64,node12-macos-x64,node12-win-x64",
     "pretest": "npm run transpile && babel ./tests --out-dir _tmptests",
     "posttest": "rm -rf _tmptests",
     "test": "node ./_tmptests/index.js"
@@ -29,4 +29,4 @@
     "@babel/plugin-transform-async-to-generator": "^7.7.4",
     "@babel/preset-env": "^7.7.6"
   }
-}
+}
diff --git a/cli/commands/actions_use_codegen.go b/cli/commands/actions_use_codegen.go
@@ -120,17 +120,6 @@ func (o *actionsUseCodegenOptions) run() error {
 		o.withStarterKit = shouldCloneStarterKit == "y"
 	}
 
-	// if output directory is not provided, make them enter it
-	if o.outputDir == "" {
-		outputDir, err := util.GetFSPathPrompt("Where do you want to place the codegen files?", o.EC.Config.ActionConfig.Codegen.OutputDir)
-		if err != nil {
-			return errors.Wrap(err, "error in getting output directory input")
-		}
-		newCodegenExecutionConfig.OutputDir = outputDir
-	} else {
-		newCodegenExecutionConfig.OutputDir = o.outputDir
-	}
-
 	// clone the starter kit
 	o.EC.Spin("Clonning the starter kit...")
 	if o.withStarterKit && hasStarterKit {
@@ -158,6 +147,18 @@ func (o *actionsUseCodegenOptions) run() error {
 		}
 		o.EC.Logger.Info("Starter kit cloned at " + destinationDir)
 	}
+	o.EC.Spinner.Stop()
+
+	// if output directory is not provided, make them enter it
+	if o.outputDir == "" {
+		outputDir, err := util.GetFSPathPrompt("Where do you want to place the codegen files?", o.EC.Config.ActionConfig.Codegen.OutputDir)
+		if err != nil {
+			return errors.Wrap(err, "error in getting output directory input")
+		}
+		newCodegenExecutionConfig.OutputDir = outputDir
+	} else {
+		newCodegenExecutionConfig.OutputDir = o.outputDir
+	}
 
 	newConfig := o.EC.Config
 	newConfig.ActionConfig.Codegen = newCodegenExecutionConfig

diff --git a/cli/util/prompt.go b/cli/util/prompt.go
@@ -12,7 +12,6 @@ const (
 )
 
 func GetYesNoPrompt(message string) (promptResp string, err error) {
-
 	prompt := promptui.Prompt{
 		Label: message + " (y/n)",
 		Validate: func(_resp string) (err error) {
@@ -28,38 +27,28 @@ func GetYesNoPrompt(message string) (promptResp string, err error) {
 		},
 		Default: "y",
 	}
-
 	promptResp, err = prompt.Run()
 	if err != nil {
 		return
 	}
 	promptResp = string(strings.ToLower(promptResp)[0])
-
 	return
-
 }
 
 func GetSelectPrompt(message string, options []string) (selection string, err error) {
 	prompt := promptui.Select{
 		Label: message,
 		Items: options,
 	}
-
 	_, selection, err = prompt.Run()
-
 	return
 }
 
 func GetFSPathPrompt(message string, def string) (input string, err error) {
-
 	prompt := promptui.Prompt{
 		Label:    message,
 		Validate: FSCheckIfDirPathExists,
 		Default:  def,
 	}
-
-	input, err = prompt.Run()
-
-	return
-
+	return prompt.Run()
 }
diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
@@ -1404,6 +1404,13 @@ code {
   margin-right: 50px !important;
 }
 
+.marginLeftAuto {
+  margin-left: auto;
+}
+
+.textAlignRight {
+  text-align: right;
+}
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
 

diff --git a/console/src/components/Services/Actions/Add/Add.js b/console/src/components/Services/Actions/Add/Add.js
@@ -86,9 +86,11 @@ const AddAction = ({
   let actionType;
   if (!actionDefinitionError) {
     // TODO optimise
-    const { type, error } = getActionDefinitionFromSdl(actionDefinitionSdl);
-    if (!error) {
-      actionType = type;
+    if (!actionParseTimer) {
+      const { type, error } = getActionDefinitionFromSdl(actionDefinitionSdl);
+      if (!error) {
+        actionType = type;
+      }
     }
   }
 
@@ -120,18 +122,16 @@ const AddAction = ({
         service="create-action"
       />
       <hr />
-      {
-        actionType === "query" ? null : (
-          <React.Fragment>
-            <KindEditor
-              value={kind}
-              onChange={kindOnChange}
-              className={styles.add_mar_bottom_mid}
-            />
-            <hr />
-          </React.Fragment>
-        )
-      }
+      {actionType === 'query' ? null : (
+        <React.Fragment>
+          <KindEditor
+            value={kind}
+            onChange={kindOnChange}
+            className={styles.add_mar_bottom_mid}
+          />
+          <hr />
+        </React.Fragment>
+      )}
       <HeadersConfEditor
         forwardClientHeaders={forwardClientHeaders}
         toggleForwardClientHeaders={toggleForwardClientHeaders}

diff --git a/console/src/components/Services/Actions/Codegen/CodeTabs.js b/console/src/components/Services/Actions/Codegen/CodeTabs.js
@@ -5,6 +5,7 @@ import TSEditor from '../../../Common/AceEditor/TypescriptEditor';
 import { getFrameworkCodegen } from './utils';
 import { getFileExtensionFromFilename } from '../../../Common/utils/jsUtils';
 import { Tabs, Tab } from 'react-bootstrap';
+import styles from '../Actions.scss';
 
 const CodeTabs = ({
   framework,
@@ -19,6 +20,7 @@ const CodeTabs = ({
 
   const init = () => {
     setLoading(true);
+    setError(null);
     getFrameworkCodegen(
       framework,
       currentAction.action_name,
@@ -45,7 +47,7 @@ const CodeTabs = ({
     return (
       <div>
         Error generating code.&nbsp;
-        <a onClick={init}>Try again</a>
+        <a onClick={init} className={styles.cursorPointer}>Try again</a>
       </div>
     );
   }

diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -4,12 +4,13 @@ import { getSdlComplete } from '../../../../shared/utils/sdlUtils';
 import {
   getAllCodegenFrameworks,
   getStarterKitPath,
+  getStarterKitDownloadPath,
   getGlitchProjectURL,
 } from './utils';
 import { getPersistedDerivedAction } from '../lsUtils';
 import Spinner from '../../../Common/Spinner/Spinner';
 import styles from '../Common/components/Styles.scss';
-import Button from '../../../Common/Button/Button';
+import { Icon } from '../../../UIKit/atoms';
 import CodeTabs from './CodeTabs';
 import DerivedFrom from './DerivedFrom';
 
@@ -31,6 +32,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
 
   const init = () => {
     setLoading(true);
+    setError(null);
     getAllCodegenFrameworks()
       .then(frameworks => {
         setAllFrameworks(frameworks);
@@ -54,7 +56,9 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
     return (
       <div>
         Error fetching codegen assets.&nbsp;
-        <a onClick={init}>Try again</a>
+        <a onClick={init} className={styles.cursorPointer}>
+          Try again
+        </a>
       </div>
     );
   }
@@ -89,13 +93,9 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
           href={getGlitchProjectURL()}
           target="_blank"
           rel="noopener noreferrer"
+          className={styles.add_mar_right}
         >
-          <Button
-            color="white"
-            className={`${styles.add_mar_right_mid} ${styles.default_button}`}
-          >
-            Try on glitch
-          </Button>
+          <Icon type="link" /> Try on glitch
         </a>
       );
     };
@@ -110,24 +110,57 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
       ) {
         return null;
       }
+
       return (
-        <a
-          href={getStarterKitPath(selectedFramework)}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button color="white" className={`${styles.add_mar_right_mid}`}>
-            Get starter kit
-          </Button>
-        </a>
+        <React.Fragment>
+          <a
+            href={getStarterKitDownloadPath(selectedFramework)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.add_mar_right}
+            title={`Download starter kit for ${selectedFramework}`}
+          >
+            <Icon type="download" /> Starter-kit.zip
+          </a>
+          <a
+            href={getStarterKitPath(selectedFramework)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.display_flex}
+            title={`View the starter kit for ${selectedFramework} on GitHub`}
+          >
+            <Icon type="github" className={styles.add_mar_right_small} /> View
+            on GitHub
+          </a>
+        </React.Fragment>
+      );
+    };
+
+    const getHelperToolsSection = () => {
+      const glitchButton = getGlitchButton();
+      const starterKitButtons = getStarterKitButton();
+      if (!glitchButton && !starterKitButtons) {
+        return null;
+      }
+      return (
+        <div className={styles.marginLeftAuto}>
+          <div
+            className={`${styles.add_mar_bottom_small} ${styles.textAlignRight}`}
+          >
+            <b>Need help getting started quickly?</b>
+          </div>
+          <div className={`${styles.display_flex}`}>
+            {getGlitchButton()}
+            {getStarterKitButton()}
+          </div>
+        </div>
       );
     };
 
     return (
       <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
         {getDrodown()}
-        {getGlitchButton()}
-        {getStarterKitButton()}
+        {getHelperToolsSection()}
       </div>
     );
   };

diff --git a/console/src/components/Services/Actions/Codegen/utils.js b/console/src/components/Services/Actions/Codegen/utils.js
@@ -24,6 +24,9 @@ export const getStarterKitPath = framework => {
   return `https://github.com/${CODEGEN_REPO}/tree/master/${framework}/starter-kit/`;
 };
 
+export const getStarterKitDownloadPath = framework => {
+  return `https://github.com/${CODEGEN_REPO}/raw/master/${framework}/${framework}.zip`;
+};
 export const getGlitchProjectURL = () => {
   return 'https://glitch.com/edit/?utm_content=project_hasura-actions-starter-kit&utm_source=remix_this&utm_medium=button&utm_campaign=glitchButton#!/remix/hasura-actions-starter-kit';
 };

diff --git a/console/src/components/Services/Actions/Common/components/ActionDefinitionEditor.js b/console/src/components/Services/Actions/Common/components/ActionDefinitionEditor.js
@@ -69,7 +69,7 @@ const ActionDefinitionEditor = ({
           {error && (
             <div className={`${styles.display_flex}  ${styles.errorMessage}`}>
               <CrossIcon className={styles.add_mar_right_small} />
-              <p>{errorMessage}</p>
+              <div>{errorMessage}</div>
             </div>
           )}
         </div>

diff --git a/console/src/components/Services/Actions/Common/components/Styles.scss b/console/src/components/Services/Actions/Common/components/Styles.scss
@@ -31,4 +31,3 @@
 .cloneTypeText {
   margin-left: auto;
 }
-
diff --git a/console/src/components/Services/Actions/Common/components/TypeDefinitionEditor.js b/console/src/components/Services/Actions/Common/components/TypeDefinitionEditor.js
@@ -79,24 +79,27 @@ const ActionDefinitionEditor = ({
               <div>{errorMessage}</div>
             </div>
           )}
-          <a
-            className={`${styles.cloneTypeText} ${styles.cursorPointer} ${styles.add_mar_right}`}
-            onClick={toggleModal}
-          >
-            <CopyIcon className={styles.add_mar_right_small} />
-            Clone an existing type
-          </a>
-          <Modal
-            show={modalOpen}
-            title={'Clone an existing type'}
-            onClose={toggleModal}
-            customClass={styles.modal}
-          >
-            <CloneTypeModal
-              handleClonedTypes={handleClonedTypes}
-              toggleModal={toggleModal}
-            />
-          </Modal>
+          {/*
+            <a
+              className={`${styles.cloneTypeText} ${styles.cursorPointer} ${styles.add_mar_right}`}
+              onClick={toggleModal}
+            >
+              <CopyIcon className={styles.add_mar_right_small} />
+              Clone an existing type
+            </a>
+            <Modal
+              show={modalOpen}
+              title={'Clone an existing type'}
+              onClose={toggleModal}
+              customClass={styles.modal}
+            >
+              <CloneTypeModal
+                handleClonedTypes={handleClonedTypes}
+                toggleModal={toggleModal}
+              />
+            </Modal>
+
+          */}
         </div>
         <SDLEditor
           name="sdl-editor"

diff --git a/console/src/components/Services/Actions/Common/stateDefaults.js b/console/src/components/Services/Actions/Common/stateDefaults.js
@@ -39,8 +39,12 @@ export const defaultEnumType = {
   values: [{ ...defaultEnumValue }],
 };
 
-export const defaultActionDefSdl = `type Mutation {
-  ## Define your action as a mutation here
+export const defaultActionDefSdl = `## Use "type Query" for query type actions
+## Use "type Mutation" for mutation type actions
+
+#type Query {
+type Mutation {
+  # Define your action here
   actionName (arg1: SampleInput!): SampleOutput
 }
 `;

diff --git a/console/src/components/Services/Actions/Common/utils.js b/console/src/components/Services/Actions/Common/utils.js
@@ -292,4 +292,3 @@ export const getOverlappingTypeConfirmation = (
 
   return isOk;
 };
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,4 +31,3 @@
		.cloneTypeText {
		margin-left: auto;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -292,4 +292,3 @@ export const getOverlappingTypeConfirmation = (

		return isOk;
		};