From 6aff448bf96e7e88a526018520dfda81c0a2e446 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Mon, 6 Apr 2020 16:46:11 +0530
Subject: [PATCH 01/15] allow downloading framework starter kit

---
 .../src/components/Common/Icons/Download.js   |  9 +++++
 console/src/components/Common/Icons/Github.js |  7 ++++
 .../Services/Actions/Codegen/Codegen.js       | 38 ++++++++++++++-----
 .../Services/Actions/Codegen/utils.js         |  3 ++
 4 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 console/src/components/Common/Icons/Download.js
 create mode 100644 console/src/components/Common/Icons/Github.js

diff --git a/console/src/components/Common/Icons/Download.js b/console/src/components/Common/Icons/Download.js
new file mode 100644
index 0000000000000..941ac0db010ba
--- /dev/null
+++ b/console/src/components/Common/Icons/Download.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Download = ({ className }) => {
+  return (
+    <i className={`fa fa-download ${className || ''}`} aria-hidden="true" />
+  );
+};
+
+export default Download;
diff --git a/console/src/components/Common/Icons/Github.js b/console/src/components/Common/Icons/Github.js
new file mode 100644
index 0000000000000..d3100b62aafa4
--- /dev/null
+++ b/console/src/components/Common/Icons/Github.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Github = ({ className }) => {
+  return <i className={`fa fa-github ${className || ''}`} aria-hidden="true" />;
+};
+
+export default Github;
diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index ea8fb982bfe5f..e4bea13939fd3 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -4,12 +4,15 @@ 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 DownloadIcon from '../../../Common/Icons/Download';
+import GithubIcon from '../../../Common/Icons/Github';
 import CodeTabs from './CodeTabs';
 import DerivedFrom from './DerivedFrom';
 
@@ -110,16 +113,33 @@ 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_small}
+            title={`Download starter kit for ${selectedFramework}`}
+          >
+            <Button color="white">
+              <DownloadIcon className={styles.add_mar_right_small} /> Starter
+              Kit
+            </Button>
+          </a>
+          <a
+            href={getStarterKitPath(selectedFramework)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.add_mar_right_small}
+            title={`View the starter kit for ${selectedFramework} on GitHub`}
+          >
+            <Button color="white">
+              <GithubIcon />
+            </Button>
+          </a>
+        </React.Fragment>
       );
     };
 
diff --git a/console/src/components/Services/Actions/Codegen/utils.js b/console/src/components/Services/Actions/Codegen/utils.js
index ca486a9039b40..f6521d4159221 100644
--- 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';
 };

From 6e8943e4511cca077903d3a7f294ccd42d641107 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Mon, 6 Apr 2020 18:25:53 +0530
Subject: [PATCH 02/15] derive: improve error message for invalid query

---
 console/src/shared/utils/deriveAction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/console/src/shared/utils/deriveAction.js b/console/src/shared/utils/deriveAction.js
index d852843ed008b..483e2c609ba96 100644
--- a/console/src/shared/utils/deriveAction.js
+++ b/console/src/shared/utils/deriveAction.js
@@ -17,7 +17,7 @@ export const validateOperation = (operationString, clientSchema) => {
   try {
     operationAst = sdlParse(operationString);
   } catch (e) {
-    throw Error('invalid SDL');
+    throw Error('invalid GraphQL query');
   }
 
   const schemaValidationErrors = validate(clientSchema, operationAst);

From 3d6fe9a5bf943b054d2b7086f8454f5106705031 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Mon, 6 Apr 2020 18:46:13 +0530
Subject: [PATCH 03/15] move action buttons to extreme right

---
 console/src/components/Common/Common.scss     |  4 ++++
 .../components/Common/Icons/ExternalLink.js   | 12 ++++++++++
 .../Services/Actions/Codegen/Codegen.js       | 23 ++++++++++++++-----
 3 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 console/src/components/Common/Icons/ExternalLink.js

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 95fd6e15f981c..64df68c5345dd 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1404,6 +1404,10 @@ code {
   margin-right: 50px !important;
 }
 
+.marginLeftAuto {
+  margin-left: auto;
+}
+
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
 
diff --git a/console/src/components/Common/Icons/ExternalLink.js b/console/src/components/Common/Icons/ExternalLink.js
new file mode 100644
index 0000000000000..84f40407ed149
--- /dev/null
+++ b/console/src/components/Common/Icons/ExternalLink.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ExternalLink = ({ className }) => {
+  return (
+    <i
+      className={`fa fa-external-link ${className || ''}`}
+      aria-hidden="true"
+    />
+  );
+};
+
+export default ExternalLink;
diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index e4bea13939fd3..30b3dcd17d36c 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -12,6 +12,7 @@ import Spinner from '../../../Common/Spinner/Spinner';
 import styles from '../Common/components/Styles.scss';
 import Button from '../../../Common/Button/Button';
 import DownloadIcon from '../../../Common/Icons/Download';
+import ExternalLink from '../../../Common/Icons/ExternalLink';
 import GithubIcon from '../../../Common/Icons/Github';
 import CodeTabs from './CodeTabs';
 import DerivedFrom from './DerivedFrom';
@@ -95,9 +96,11 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
         >
           <Button
             color="white"
-            className={`${styles.add_mar_right_mid} ${styles.default_button}`}
+            size="xs"
+            className={`${styles.add_mar_right_mid}`}
           >
-            Try on glitch
+            <ExternalLink className={styles.add_mar_right_small} /> Try on
+            glitch
           </Button>
         </a>
       );
@@ -123,7 +126,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             className={styles.add_mar_right_small}
             title={`Download starter kit for ${selectedFramework}`}
           >
-            <Button color="white">
+            <Button color="white" size="xs">
               <DownloadIcon className={styles.add_mar_right_small} /> Starter
               Kit
             </Button>
@@ -135,7 +138,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             className={styles.add_mar_right_small}
             title={`View the starter kit for ${selectedFramework} on GitHub`}
           >
-            <Button color="white">
+            <Button color="white" size="xs">
               <GithubIcon />
             </Button>
           </a>
@@ -143,11 +146,19 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
       );
     };
 
+    const getButtons = () => {
+      return (
+        <div className={`${styles.display_flex} ${styles.marginLeftAuto}`}>
+          {getGlitchButton()}
+          {getStarterKitButton()}
+        </div>
+      );
+    };
+
     return (
       <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
         {getDrodown()}
-        {getGlitchButton()}
-        {getStarterKitButton()}
+        {getButtons()}
       </div>
     );
   };

From 5b7ebed644f6177df06c3e23a5b20bd929d7238a Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Tue, 7 Apr 2020 09:41:36 +0530
Subject: [PATCH 04/15] improve error message

---
 console/src/shared/utils/deriveAction.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/console/src/shared/utils/deriveAction.js b/console/src/shared/utils/deriveAction.js
index 483e2c609ba96..bd867a2d4c0db 100644
--- a/console/src/shared/utils/deriveAction.js
+++ b/console/src/shared/utils/deriveAction.js
@@ -17,7 +17,7 @@ export const validateOperation = (operationString, clientSchema) => {
   try {
     operationAst = sdlParse(operationString);
   } catch (e) {
-    throw Error('invalid GraphQL query');
+    throw Error('this seems to be an invalid GraphQL query');
   }
 
   const schemaValidationErrors = validate(clientSchema, operationAst);
@@ -32,7 +32,9 @@ export const validateOperation = (operationString, clientSchema) => {
   }
 
   if (operationAst.definitions.find(d => d.operation !== 'mutation')) {
-    throw Error('queries cannot be derived into actions');
+    throw Error(
+      'queries are not supported in actions yet; so you cannot derive an action from a query'
+    );
   }
 
   operationAst.definitions = operationAst.definitions.filter(

From 5d37b5822acd1deef99cab0dc8c27a3a2cf97b27 Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Thu, 9 Apr 2020 02:26:38 +0530
Subject: [PATCH 05/15] cli: actions_use_codegen, clone the starter kit before
 asking for output_dir

---
 cli/commands/actions_use_codegen.go | 22 +++++++++++-----------
 cli/util/prompt.go                  | 13 +------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/cli/commands/actions_use_codegen.go b/cli/commands/actions_use_codegen.go
index e066e2c496ddc..71a529b7aff64 100644
--- 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 {
@@ -159,6 +148,17 @@ func (o *actionsUseCodegenOptions) run() error {
 		o.EC.Logger.Info("Starter kit cloned at " + destinationDir)
 	}
 
+	// 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
 	err = o.EC.WriteConfig(newConfig)
diff --git a/cli/util/prompt.go b/cli/util/prompt.go
index 031f166fefe08..e63990c8c0746 100644
--- 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,15 +27,12 @@ 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) {
@@ -44,22 +40,15 @@ func GetSelectPrompt(message string, options []string) (selection string, err er
 		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()
 }

From c7c6ed7ccc97b1c96d8e038deb232086781bc333 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Thu, 9 Apr 2020 18:42:29 +0530
Subject: [PATCH 06/15] requested changes; hide clone type anchor

---
 .../Services/Actions/Codegen/CodeTabs.js      |  4 +-
 .../Services/Actions/Codegen/Codegen.js       | 28 ++++++-------
 .../Common/components/TypeDefinitionEditor.js | 39 ++++++++++---------
 .../src/components/UIKit/atoms/Icon/index.js  | 12 +++---
 4 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/console/src/components/Services/Actions/Codegen/CodeTabs.js b/console/src/components/Services/Actions/Codegen/CodeTabs.js
index 2486a84bda459..99294666b73da 100644
--- 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
index 30b3dcd17d36c..1aed45679ebd4 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -14,6 +14,7 @@ import Button from '../../../Common/Button/Button';
 import DownloadIcon from '../../../Common/Icons/Download';
 import ExternalLink from '../../../Common/Icons/ExternalLink';
 import GithubIcon from '../../../Common/Icons/Github';
+import { Icon } from '../../../UIKit/atoms'
 import CodeTabs from './CodeTabs';
 import DerivedFrom from './DerivedFrom';
 
@@ -35,6 +36,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
 
   const init = () => {
     setLoading(true);
+    setError(null);
     getAllCodegenFrameworks()
       .then(frameworks => {
         setAllFrameworks(frameworks);
@@ -58,7 +60,7 @@ 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>
     );
   }
@@ -97,9 +99,9 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
           <Button
             color="white"
             size="xs"
-            className={`${styles.add_mar_right_mid}`}
+            className={`${styles.add_mar_right_mid} ${styles.display_flex}`}
           >
-            <ExternalLink className={styles.add_mar_right_small} /> Try on
+            <Icon type="externalLink" className={styles.add_mar_right_small} /> Try on
             glitch
           </Button>
         </a>
@@ -126,8 +128,8 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             className={styles.add_mar_right_small}
             title={`Download starter kit for ${selectedFramework}`}
           >
-            <Button color="white" size="xs">
-              <DownloadIcon className={styles.add_mar_right_small} /> Starter
+            <Button color="white" size="xs" className={styles.display_flex}>
+              <Icon type="download" className={styles.add_mar_right_small} /> Starter
               Kit
             </Button>
           </a>
@@ -138,27 +140,21 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             className={styles.add_mar_right_small}
             title={`View the starter kit for ${selectedFramework} on GitHub`}
           >
-            <Button color="white" size="xs">
-              <GithubIcon />
+            <Button color="white" size="xs" className={styles.display_flex}>
+              <Icon type="github"/>
             </Button>
           </a>
         </React.Fragment>
       );
     };
 
-    const getButtons = () => {
-      return (
+    return (
+      <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
+        {getDrodown()}
         <div className={`${styles.display_flex} ${styles.marginLeftAuto}`}>
           {getGlitchButton()}
           {getStarterKitButton()}
         </div>
-      );
-    };
-
-    return (
-      <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
-        {getDrodown()}
-        {getButtons()}
       </div>
     );
   };
diff --git a/console/src/components/Services/Actions/Common/components/TypeDefinitionEditor.js b/console/src/components/Services/Actions/Common/components/TypeDefinitionEditor.js
index bb82dcedde814..7a61f4ae9e770 100644
--- 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/UIKit/atoms/Icon/index.js b/console/src/components/UIKit/atoms/Icon/index.js
index 544b5bcc17780..5aa2ebc55332f 100644
--- a/console/src/components/UIKit/atoms/Icon/index.js
+++ b/console/src/components/UIKit/atoms/Icon/index.js
@@ -10,6 +10,9 @@ import {
   FaCloud,
   FaCog,
   FaQuestion,
+  FaGithub,
+  FaExternalLinkAlt,
+  FaDownload
 } from 'react-icons/fa';
 
 import { theme } from '../../theme';
@@ -27,11 +30,11 @@ const iconReferenceMap = {
   settings: FaCog,
   question: FaQuestion,
   default: FaExclamationCircle,
+  github: FaGithub,
+  externalLink: FaExternalLinkAlt,
+  download: FaDownload
 };
 
-const iconWidth = 18;
-const iconHeight = 18;
-
 export const Icon = props => {
   const { type } = props;
 
@@ -45,10 +48,7 @@ export const Icon = props => {
 
   return (
     <StyledIcon
-      fontSize="icon"
       color={iconColor}
-      width={iconWidth}
-      height={iconHeight}
       as={CurrentActiveIcon}
       {...props}
     />

From e0bc4b2445e265e1be6f0c0bb047eb534d016bfa Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Thu, 9 Apr 2020 19:17:02 +0530
Subject: [PATCH 07/15] improve icon component; move github out of button

---
 .../Services/Actions/Codegen/Codegen.js       |  21 ++--
 .../src/components/UIKit/atoms/Icon/Icon.js   |   2 +
 .../src/components/UIKit/atoms/Icon/index.js  | 105 ++++++++++++++----
 3 files changed, 96 insertions(+), 32 deletions(-)

diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index 1aed45679ebd4..35dc0a41a5e51 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -11,10 +11,7 @@ import { getPersistedDerivedAction } from '../lsUtils';
 import Spinner from '../../../Common/Spinner/Spinner';
 import styles from '../Common/components/Styles.scss';
 import Button from '../../../Common/Button/Button';
-import DownloadIcon from '../../../Common/Icons/Download';
-import ExternalLink from '../../../Common/Icons/ExternalLink';
-import GithubIcon from '../../../Common/Icons/Github';
-import { Icon } from '../../../UIKit/atoms'
+import { Icon } from '../../../UIKit/atoms';
 import CodeTabs from './CodeTabs';
 import DerivedFrom from './DerivedFrom';
 
@@ -60,7 +57,9 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
     return (
       <div>
         Error fetching codegen assets.&nbsp;
-        <a onClick={init} className={styles.cursorPointer}>Try again</a>
+        <a onClick={init} className={styles.cursorPointer}>
+          Try again
+        </a>
       </div>
     );
   }
@@ -101,7 +100,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             size="xs"
             className={`${styles.add_mar_right_mid} ${styles.display_flex}`}
           >
-            <Icon type="externalLink" className={styles.add_mar_right_small} /> Try on
+            <Icon type="link" className={styles.add_mar_right_small} /> Try on
             glitch
           </Button>
         </a>
@@ -129,20 +128,18 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             title={`Download starter kit for ${selectedFramework}`}
           >
             <Button color="white" size="xs" className={styles.display_flex}>
-              <Icon type="download" className={styles.add_mar_right_small} /> Starter
-              Kit
+              <Icon type="download" className={styles.add_mar_right_small} />{' '}
+              Starter Kit
             </Button>
           </a>
           <a
             href={getStarterKitPath(selectedFramework)}
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.add_mar_right_small}
+            className={styles.display_flex}
             title={`View the starter kit for ${selectedFramework} on GitHub`}
           >
-            <Button color="white" size="xs" className={styles.display_flex}>
-              <Icon type="github"/>
-            </Button>
+            <Icon type="github" color="black.original" />
           </a>
         </React.Fragment>
       );
diff --git a/console/src/components/UIKit/atoms/Icon/Icon.js b/console/src/components/UIKit/atoms/Icon/Icon.js
index 6e84a6fead28e..fca92d7faff65 100644
--- a/console/src/components/UIKit/atoms/Icon/Icon.js
+++ b/console/src/components/UIKit/atoms/Icon/Icon.js
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { color, typography, layout, space } from 'styled-system';
 
 export const StyledIcon = styled.svg`
+  cursor: ${({ pointer }) => (pointer ? 'pointer' : '')};
+
   ${color}
   ${typography}
   ${layout}
diff --git a/console/src/components/UIKit/atoms/Icon/index.js b/console/src/components/UIKit/atoms/Icon/index.js
index 5aa2ebc55332f..4d0de2f001496 100644
--- a/console/src/components/UIKit/atoms/Icon/index.js
+++ b/console/src/components/UIKit/atoms/Icon/index.js
@@ -10,12 +10,48 @@ import {
   FaCloud,
   FaCog,
   FaQuestion,
-  FaGithub,
+  FaCogs,
+  FaExclamation,
+  FaTimes,
+  FaStar,
+  FaTwitter,
+  FaHeart,
+  FaChevronRight,
+  FaCompressArrowsAlt,
+  FaExpand,
+  FaEdit,
+  FaChevronDown,
+  FaSearch,
+  FaSpinner,
+  FaQuestionCircle,
+  FaPause,
+  FaPlay,
+  FaCheck,
+  FaRedoAlt,
+  FaChevronUp,
+  FaTrashAlt,
+  FaPencilAlt,
+  FaPlus,
+  FaEye,
+  FaUserSecret,
+  FaRegLightbulb,
+  FaSort,
+  FaCaretUp,
+  FaCaretDown,
+  FaCaretRight,
+  FaCaretLeft,
+  FaRegClone,
+  FaRegCaretSquareRight,
+  FaCopy,
   FaExternalLinkAlt,
-  FaDownload
+  FaTable,
+  FaFilter,
+  FaWrench,
+  FaRegPaperPlane,
+  FaCodeBranch,
+  FaGithub,
+  FaDownload,
 } from 'react-icons/fa';
-
-import { theme } from '../../theme';
 import { StyledIcon } from './Icon';
 
 const iconReferenceMap = {
@@ -23,34 +59,63 @@ const iconReferenceMap = {
   info: FaInfoCircle,
   warning: FaExclamationTriangle,
   error: FaExclamationCircle,
-  graphiql: FaFlask,
+  graphiQL: FaFlask,
   database: FaDatabase,
   schema: FaPlug,
   event: FaCloud,
   settings: FaCog,
   question: FaQuestion,
   default: FaExclamationCircle,
+  action: FaCogs,
+  exclamation: FaExclamation,
+  close: FaTimes,
+  star: FaStar,
+  twitter: FaTwitter,
+  love: FaHeart,
+  right: FaChevronRight,
+  down: FaChevronDown,
+  up: FaChevronUp,
+  compress: FaCompressArrowsAlt,
+  expand: FaExpand,
+  edit: FaEdit,
+  pencil: FaPencilAlt,
+  search: FaSearch,
+  spinner: FaSpinner,
+  questionCircle: FaQuestionCircle,
+  pause: FaPause,
+  play: FaPlay,
+  playBox: FaRegCaretSquareRight,
+  check: FaCheck,
+  reload: FaRedoAlt,
+  delete: FaTrashAlt,
+  add: FaPlus,
+  eye: FaEye,
+  secret: FaUserSecret,
+  lightBulb: FaRegLightbulb,
+  sort: FaSort,
+  caretUp: FaCaretUp,
+  caretDown: FaCaretDown,
+  caretRight: FaCaretRight,
+  caretLeft: FaCaretLeft,
+  clone: FaRegClone,
+  copy: FaCopy,
+  link: FaExternalLinkAlt,
+  table: FaTable,
+  filter: FaFilter,
+  wrench: FaWrench,
+  send: FaRegPaperPlane,
+  fork: FaCodeBranch,
   github: FaGithub,
-  externalLink: FaExternalLinkAlt,
-  download: FaDownload
+  download: FaDownload,
 };
 
 export const Icon = props => {
   const { type } = props;
-
-  const { icon } = theme;
-
-  const iconColor = icon[type] ? icon[type].color : icon.default.color;
-
   const CurrentActiveIcon = iconReferenceMap[type]
     ? iconReferenceMap[type]
     : iconReferenceMap.default;
-
-  return (
-    <StyledIcon
-      color={iconColor}
-      as={CurrentActiveIcon}
-      {...props}
-    />
-  );
+  return <StyledIcon as={CurrentActiveIcon} {...props} aria-hidden="true" />;
+};
+Icon.defaultProps = {
+  size: 14,
 };

From b1c54b966f1842bde3eee8d12f6279ab0e104fe6 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Fri, 10 Apr 2020 10:26:33 +0530
Subject: [PATCH 08/15] allow deriving actions from operations without
 variables

---
 console/src/shared/utils/deriveAction.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/console/src/shared/utils/deriveAction.js b/console/src/shared/utils/deriveAction.js
index bd867a2d4c0db..7b43c7762f862 100644
--- a/console/src/shared/utils/deriveAction.js
+++ b/console/src/shared/utils/deriveAction.js
@@ -66,11 +66,6 @@ export const validateOperation = (operationString, clientSchema) => {
     throw Error('the given operation must ask for at least one root field');
   }
 
-  // throw error if the operation does not have variables
-  if (!operationAst.definitions[0].variableDefinitions.length) {
-    throw Error('only operations using variables can be derived');
-  }
-
   return operationAst;
 };
 

From 65d9c94690556fde0937ab0ea2205f0702c265a6 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Fri, 10 Apr 2020 14:07:00 +0530
Subject: [PATCH 09/15] add helper text for codegen buttons

---
 .../Services/Actions/Codegen/Codegen.js       | 34 +++++++++----------
 .../Actions/Common/components/Styles.scss     |  5 +++
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index 35dc0a41a5e51..4d7ad7186b5fd 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -10,7 +10,6 @@ import {
 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';
@@ -94,15 +93,9 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
           href={getGlitchProjectURL()}
           target="_blank"
           rel="noopener noreferrer"
+          className={styles.add_mar_right}
         >
-          <Button
-            color="white"
-            size="xs"
-            className={`${styles.add_mar_right_mid} ${styles.display_flex}`}
-          >
-            <Icon type="link" className={styles.add_mar_right_small} /> Try on
-            glitch
-          </Button>
+          <Icon type="link" /> Try on glitch
         </a>
       );
     };
@@ -124,13 +117,10 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             href={getStarterKitDownloadPath(selectedFramework)}
             target="_blank"
             rel="noopener noreferrer"
-            className={styles.add_mar_right_small}
+            className={styles.add_mar_right}
             title={`Download starter kit for ${selectedFramework}`}
           >
-            <Button color="white" size="xs" className={styles.display_flex}>
-              <Icon type="download" className={styles.add_mar_right_small} />{' '}
-              Starter Kit
-            </Button>
+            <Icon type="download" /> Starter-kit.zip
           </a>
           <a
             href={getStarterKitPath(selectedFramework)}
@@ -139,7 +129,8 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             className={styles.display_flex}
             title={`View the starter kit for ${selectedFramework} on GitHub`}
           >
-            <Icon type="github" color="black.original" />
+            <Icon type="github" className={styles.add_mar_right_small} /> View
+            on GitHub
           </a>
         </React.Fragment>
       );
@@ -148,9 +139,16 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
     return (
       <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
         {getDrodown()}
-        <div className={`${styles.display_flex} ${styles.marginLeftAuto}`}>
-          {getGlitchButton()}
-          {getStarterKitButton()}
+        <div className={styles.marginLeftAuto}>
+          <div className={styles.add_mar_bottom_small}>
+            <b>Need help getting started quickly?</b>
+          </div>
+          <div
+            className={`${styles.display_flex} ${styles.codegenOnboardingButtons}`}
+          >
+            {getGlitchButton()}
+            {getStarterKitButton()}
+          </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
index 232d133ffd638..7e8e0e72f4bf7 100644
--- a/console/src/components/Services/Actions/Common/components/Styles.scss
+++ b/console/src/components/Services/Actions/Common/components/Styles.scss
@@ -32,3 +32,8 @@
   margin-left: auto;
 }
 
+.codegenOnboardingButtons {
+  a {
+    color: #FD9540;
+  }
+}
\ No newline at end of file

From 1769ba1c2b6d45b65d79343e7324320757400bfc Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Fri, 10 Apr 2020 17:08:27 +0530
Subject: [PATCH 10/15] remove unnecessary files

---
 console/src/components/Common/Icons/Download.js     |  9 ---------
 console/src/components/Common/Icons/ExternalLink.js | 12 ------------
 console/src/components/Common/Icons/Github.js       |  7 -------
 3 files changed, 28 deletions(-)
 delete mode 100644 console/src/components/Common/Icons/Download.js
 delete mode 100644 console/src/components/Common/Icons/ExternalLink.js
 delete mode 100644 console/src/components/Common/Icons/Github.js

diff --git a/console/src/components/Common/Icons/Download.js b/console/src/components/Common/Icons/Download.js
deleted file mode 100644
index 941ac0db010ba..0000000000000
--- a/console/src/components/Common/Icons/Download.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Download = ({ className }) => {
-  return (
-    <i className={`fa fa-download ${className || ''}`} aria-hidden="true" />
-  );
-};
-
-export default Download;
diff --git a/console/src/components/Common/Icons/ExternalLink.js b/console/src/components/Common/Icons/ExternalLink.js
deleted file mode 100644
index 84f40407ed149..0000000000000
--- a/console/src/components/Common/Icons/ExternalLink.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const ExternalLink = ({ className }) => {
-  return (
-    <i
-      className={`fa fa-external-link ${className || ''}`}
-      aria-hidden="true"
-    />
-  );
-};
-
-export default ExternalLink;
diff --git a/console/src/components/Common/Icons/Github.js b/console/src/components/Common/Icons/Github.js
deleted file mode 100644
index d3100b62aafa4..0000000000000
--- a/console/src/components/Common/Icons/Github.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Github = ({ className }) => {
-  return <i className={`fa fa-github ${className || ''}`} aria-hidden="true" />;
-};
-
-export default Github;

From 3ecbc5f2912957a169b4e81a0a84f33b24702921 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Mon, 13 Apr 2020 21:02:32 +0530
Subject: [PATCH 11/15] change cli-ext runtime to node12; stop cli spinner
 after cloning starter-kit

---
 cli-ext/package.json                | 4 ++--
 cli/commands/actions_use_codegen.go | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/cli-ext/package.json b/cli-ext/package.json
index 58ba9aad34960..3a62acb8f0cd4 100644
--- 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"
   }
-}
\ No newline at end of file
+}
diff --git a/cli/commands/actions_use_codegen.go b/cli/commands/actions_use_codegen.go
index 71a529b7aff64..62dc69ce4b6a2 100644
--- a/cli/commands/actions_use_codegen.go
+++ b/cli/commands/actions_use_codegen.go
@@ -147,6 +147,7 @@ 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 == "" {

From 22500148f1d86c1334bbfea57b5ee57bdb06d615 Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Tue, 14 Apr 2020 15:24:00 +0530
Subject: [PATCH 12/15] add helper comments for query type actions

---
 console/src/components/Services/Actions/Add/Add.js        | 8 +++++---
 .../Actions/Common/components/ActionDefinitionEditor.js   | 2 +-
 .../components/Services/Actions/Common/stateDefaults.js   | 8 ++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/console/src/components/Services/Actions/Add/Add.js b/console/src/components/Services/Actions/Add/Add.js
index 2ba341b416bf2..d4642457f4416 100644
--- 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;
+      }
     }
   }
 
diff --git a/console/src/components/Services/Actions/Common/components/ActionDefinitionEditor.js b/console/src/components/Services/Actions/Common/components/ActionDefinitionEditor.js
index b5588d24331cb..7b8667a146843 100644
--- 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/stateDefaults.js b/console/src/components/Services/Actions/Common/stateDefaults.js
index f53deb52e4973..b63d41018ccfe 100644
--- 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
 }
 `;

From 8a26e0889f88105bf36e4703e431d3cd643ec9aa Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Wed, 15 Apr 2020 17:26:04 +0530
Subject: [PATCH 13/15] show warning if operation without a variable is derived

---
 .../ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js       | 9 ++++++++-
 console/src/shared/utils/deriveAction.js                 | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/console/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js b/console/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
index 215c087cc7fd3..74f9d7fc96049 100644
--- a/console/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
+++ b/console/src/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js
@@ -20,6 +20,7 @@ import {
 } from '../../../../shared/utils/sdlUtils';
 import { showErrorNotification } from '../../Common/Notification';
 import { getActionsCreateRoute } from '../../../Common/utils/routesUtils';
+import { getConfirmation } from '../../../Common/utils/jsUtils';
 import {
   setActionDefinition,
   setTypeDefinition,
@@ -111,13 +112,19 @@ class GraphiQLWrapper extends Component {
         console.error(e);
         return;
       }
-      const { action, types } = derivedOperationMetadata;
+      const { action, types, variables } = derivedOperationMetadata;
       const actionsSdl = getActionDefinitionSdl(
         action.name,
         action.type,
         action.arguments,
         action.output_type
       );
+      if (variables && !variables.length) {
+        const ok = getConfirmation(
+          `Looks like your ${action.type} does not have variables. This means that the derived action will have no arguments.`
+        );
+        if (!ok) return;
+      }
       const typesSdl = getTypesSdl(types);
       dispatch(
         setActionDefinition(actionsSdl, null, null, sdlParse(actionsSdl))
diff --git a/console/src/shared/utils/deriveAction.js b/console/src/shared/utils/deriveAction.js
index a60bbfc906f3b..a7b6560085003 100644
--- a/console/src/shared/utils/deriveAction.js
+++ b/console/src/shared/utils/deriveAction.js
@@ -238,6 +238,7 @@ const deriveAction = (
       arguments: actionArguments,
       output_type: actionOutputTypename,
     },
+    variables,
   };
 };
 

From f3706b7856cefc613d793e90e19b1ee9a145011c Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Wed, 15 Apr 2020 17:39:07 +0530
Subject: [PATCH 14/15] hide the helper tools section if no helper tools exist

---
 console/src/components/Common/Common.scss     |  3 +++
 .../Services/Actions/Codegen/Codegen.js       | 21 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 64df68c5345dd..6de516a9ac711 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1408,6 +1408,9 @@ code {
   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/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index 4d7ad7186b5fd..aaf96b9a51c3b 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -136,11 +136,17 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
       );
     };
 
-    return (
-      <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
-        {getDrodown()}
+    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}>
+          <div
+            className={`${styles.add_mar_bottom_small} ${styles.textAlignRight}`}
+          >
             <b>Need help getting started quickly?</b>
           </div>
           <div
@@ -150,6 +156,13 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
             {getStarterKitButton()}
           </div>
         </div>
+      );
+    };
+
+    return (
+      <div className={`${styles.add_mar_bottom} ${styles.display_flex}`}>
+        {getDrodown()}
+        {getHelperToolsSection()}
       </div>
     );
   };

From dee24a16ac4063da3b033c6ce8abcec5be454fca Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishi@hasura.io>
Date: Wed, 15 Apr 2020 17:50:37 +0530
Subject: [PATCH 15/15] make helper links on codegen page blue

---
 console/src/components/Services/Actions/Codegen/Codegen.js  | 4 +---
 .../Services/Actions/Common/components/Styles.scss          | 6 ------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/console/src/components/Services/Actions/Codegen/Codegen.js b/console/src/components/Services/Actions/Codegen/Codegen.js
index aaf96b9a51c3b..1992b4b5c19bc 100644
--- a/console/src/components/Services/Actions/Codegen/Codegen.js
+++ b/console/src/components/Services/Actions/Codegen/Codegen.js
@@ -149,9 +149,7 @@ const Codegen = ({ allActions, allTypes, currentAction }) => {
           >
             <b>Need help getting started quickly?</b>
           </div>
-          <div
-            className={`${styles.display_flex} ${styles.codegenOnboardingButtons}`}
-          >
+          <div className={`${styles.display_flex}`}>
             {getGlitchButton()}
             {getStarterKitButton()}
           </div>
diff --git a/console/src/components/Services/Actions/Common/components/Styles.scss b/console/src/components/Services/Actions/Common/components/Styles.scss
index 7e8e0e72f4bf7..77b9140e12a60 100644
--- a/console/src/components/Services/Actions/Common/components/Styles.scss
+++ b/console/src/components/Services/Actions/Common/components/Styles.scss
@@ -31,9 +31,3 @@
 .cloneTypeText {
   margin-left: auto;
 }
-
-.codegenOnboardingButtons {
-  a {
-    color: #FD9540;
-  }
-}
\ No newline at end of file