console: misc updates (#5488)

console/src/components/Common/Layout/LeftSubSidebar/LeftSidebarSection.tsx

@@ -11,12 +11,14 @@ interface LeftSidebarSectionProps extends React.ComponentProps<'div'> {
   currentItem?: LeftSidebarItem;
   getServiceEntityLink: (s: string) => string;
   service: string;
+  sidebarIcon?: string;
 }
 
 const LeftSidebarSection = ({
   items = [],
   currentItem,
   service,
+  sidebarIcon,
   getServiceEntityLink,
 }: LeftSidebarSectionProps) => {
   // TODO needs refactor to accomodate other services
@@ -53,17 +55,6 @@ const LeftSidebarSection = ({
     itemList = [...items];
   }
 
-  const getServiceIcon = () => {
-    switch (service) {
-      case 'cron':
-        return 'fa-calendar';
-      case 'data':
-        return 'fa-database';
-      default:
-        return 'fa-wrench';
-    }
-  };
-
   const getChildList = () => {
     let childList;
     if (itemList.length === 0) {
@@ -73,8 +64,6 @@ const LeftSidebarSection = ({
         </li>
       );
     } else {
-      const serviceIcon = getServiceIcon();
-
       childList = itemList.map(a => {
         let activeTableClass = '';
         if (currentItem && currentItem.name === a.name) {
@@ -89,7 +78,9 @@ const LeftSidebarSection = ({
           >
             <Link to={getServiceEntityLink(a.name)} data-test={a.name}>
               <i
-                className={`${styles.tableIcon} fa ${serviceIcon}`}
+                className={`${styles.tableIcon} fa ${
+                  sidebarIcon || 'fa-wrench'
+                }`}
                 aria-hidden="true"
               />
               {a.name}

console/src/components/Services/Actions/Landing/Main.js

@@ -10,8 +10,6 @@ import styles from '../Actions.scss';
 
 // import TryItOut from '../../Common/Landing/TryItOut';
 
-const actionsArchDiagram = `${globals.assetsPath}/common/img/actions.png`;
-
 class Landing extends React.Component {
   render() {
     const { readOnlyMode } = this.props;
@@ -22,10 +20,10 @@ class Landing extends React.Component {
         <div>
           <TopicDescription
             title="What are Actions?"
-            // imgUrl={`${globals.assetsPath}/common/img/remote_schema.png`} // TODO: update image & description
-            imgUrl={actionsArchDiagram}
+            imgUrl={`${globals.assetsPath}/common/img/actions.png`}
             imgAlt="Actions"
             description="Actions are custom queries or mutations that are resolved via HTTP handlers. Actions can be used to carry out complex data validations, data enrichment from external sources or execute just about any custom business logic."
+            knowMoreHref="https://hasura.io/docs/1.0/graphql/manual/actions/index.html"
           />
           <hr className={styles.clear_fix} />
         </div>

console/src/components/Services/Common/Landing/TopicDescription.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from '../../RemoteSchema/RemoteSchema.scss';
+import KnowMoreLink from '../../../Common/KnowMoreLink/KnowMoreLink';
 
 const Rectangle = require('./images/Rectangle.svg');
 
@@ -7,11 +8,12 @@ type TopicDescriptionProps = {
   title: string;
   imgUrl: string;
   imgAlt: string;
+  knowMoreHref?: string;
   description: React.ReactNode;
 };
 
 const TopicDescription = (props: TopicDescriptionProps) => {
-  const { title, imgUrl, imgAlt, description } = props;
+  const { title, imgUrl, imgAlt, description, knowMoreHref } = props;
   return (
     <div>
       <div className={styles.subHeaderText}>
@@ -22,7 +24,7 @@ const TopicDescription = (props: TopicDescriptionProps) => {
         <img className="img-responsive" src={imgUrl} alt={imgAlt} />
       </div>
       <div className={`${styles.descriptionText} ${styles.wd60}`}>
-        {description}
+        {description} {knowMoreHref && <KnowMoreLink href={knowMoreHref} />}
       </div>
     </div>
   );

console/src/components/Services/Events/EventTriggers/Landing/EventTrigger.tsx

@@ -32,10 +32,11 @@ insert_user(objects: [{name: "testuser"}] ){
     return (
       <div>
         <TopicDescription
-          title="What are Data Triggers?"
+          title={`What are ${EVENT_TRIGGER}s?`}
           imgUrl={`${globals.assetsPath}/common/img/event-trigger.png`}
-          imgAlt="Data Triggers"
-          description="A Data Trigger atomically captures events (insert, update, delete) on a specified table and then reliably calls a HTTP webhook to run some custom business logic."
+          imgAlt={`${EVENT_TRIGGER}s`}
+          description={`An ${EVENT_TRIGGER} atomically captures events (insert, update, delete) on a specified table and then reliably calls a HTTP webhook to run some custom business logic.`}
+          knowMoreHref="https://hasura.io/docs/1.0/graphql/manual/event-triggers/index.html"
         />
         <hr className={styles.clear_fix} />
       </div>

console/src/components/Services/Events/Sidebar.tsx

@@ -18,6 +18,18 @@ interface Props {
 
 const LeftSidebar: React.FC<Props> = props => {
   const { triggers, currentTrigger, service } = props;
+
+  const getSidebarIcon = () => {
+    switch (service) {
+      case 'cron':
+        return 'fa-calendar';
+      case 'data':
+        return 'fa-database';
+      default:
+        return 'fa-wrench';
+    }
+  };
+
   const {
     getChildList: getTriggersList,
     getSearchInput,
@@ -38,7 +50,8 @@ const LeftSidebar: React.FC<Props> = props => {
     },
     items: triggers,
     currentItem: currentTrigger,
-    service,
+    service: 'triggers',
+    sidebarIcon: getSidebarIcon(),
   });
 
   // TODO, move to common utils

console/src/components/Services/Events/constants.ts

@@ -14,8 +14,8 @@ export const EVENTS_SERVICE_HEADING = 'Events';
 export const ADHOC_EVENTS_HEADING = 'One-off Scheduled Events';
 export const CRON_EVENTS_HEADING = 'Cron Triggers';
 export const CRON_TRIGGER = 'Cron Trigger';
-export const EVENT_TRIGGER = 'Data Trigger';
-export const DATA_EVENTS_HEADING = 'Data Triggers';
+export const EVENT_TRIGGER = 'Event Trigger';
+export const DATA_EVENTS_HEADING = 'Event Triggers';
 export const getSubserviceHeadings = (subservice: EventKind) => {
   switch (subservice) {
     case 'data':

console/src/components/Services/RemoteSchema/Landing/RemoteSchema.js

@@ -57,6 +57,7 @@ class RemoteSchema extends React.Component {
               imgUrl={`${globals.assetsPath}/common/img/remote_schema.png`}
               imgAlt="Remote Schema"
               description="Remote schemas are external GraphQL services which can be merged with Hasura to provide a unified GraphQL API. Think of it like automated schema stitching. All you need to do is build a GraphQL service and then provide its HTTP endpoint to Hasura. Your GraphQL service can be written in any language or framework."
+              knowMoreHref="https://hasura.io/docs/1.0/graphql/manual/remote-schemas/index.html"
             />
             <hr className={styles.clear_fix} />