console: update sidebar icons for different action and trigger types (#5445)

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 (Add entries here in the order of: server, console, cli, docs, others)
 
+- console: update sidebar icons for different action and trigger types
 
 ## `v1.3.0`
 

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

@@ -53,6 +53,17 @@ 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) {
@@ -62,6 +73,8 @@ const LeftSidebarSection = ({
         </li>
       );
     } else {
+      const serviceIcon = getServiceIcon();
+
       childList = itemList.map(a => {
         let activeTableClass = '';
         if (currentItem && currentItem.name === a.name) {
@@ -76,7 +89,7 @@ const LeftSidebarSection = ({
           >
             <Link to={getServiceEntityLink(a.name)} data-test={a.name}>
               <i
-                className={`${styles.tableIcon} fa fa-wrench`}
+                className={`${styles.tableIcon} fa ${serviceIcon}`}
                 aria-hidden="true"
               />
               {a.name}

console/src/components/Services/Actions/Sidebar/LeftSidebar.js

@@ -41,6 +41,17 @@ const LeftSidebar = ({
     actionsList = [...actions];
   }
 
+  const getActionIcon = action => {
+    switch (action.action_defn.type) {
+      case 'mutation':
+        return 'fa-pencil-square-o';
+      case 'query':
+        return 'fa-book';
+      default:
+        return 'fa-wrench';
+    }
+  };
+
   const getChildList = () => {
     let childList;
     if (actionsList.length === 0) {
@@ -59,6 +70,8 @@ const LeftSidebar = ({
           activeTableClass = styles.activeLink;
         }
 
+        const actionIcon = getActionIcon(a);
+
         return (
           <li
             className={activeTableClass}
@@ -70,7 +83,7 @@ const LeftSidebar = ({
               data-test={a.action_name}
             >
               <i
-                className={styles.tableIcon + ' fa fa-wrench'}
+                className={styles.tableIcon + ' fa ' + actionIcon}
                 aria-hidden="true"
               />
               {a.action_name}

console/src/components/Services/Data/Schema/Schema.js

@@ -536,8 +536,7 @@ class Schema extends Component {
         'Relationships inferred via foreign-keys that are not exposed over the GraphQL API',
         <>
           <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/table-relationships/index.html" />
-          &nbsp;
-          {getTrackAllBtn()}
+          <span className={styles.add_mar_left}>{getTrackAllBtn()}</span>
         </>
       );
 

console/src/components/Services/Events/AdhocEvents/Info/Info.tsx

@@ -37,7 +37,7 @@ const Info: React.FC = () => {
       <div className={styles.padd_left}>
         <TopicDescription
           title="What are Scheduled events?"
-          imgUrl={`${globals.assetsPath}/common/img/scheduled-trigger.png`}
+          imgUrl={`${globals.assetsPath}/common/img/scheduled-event.png`}
           imgAlt={ADHOC_EVENTS_HEADING}
           description={topicDescription}
         />

console/src/components/Services/Events/CronTriggers/Landing.tsx

@@ -50,7 +50,7 @@ const Landing: React.FC<Props> = props => {
         <div>
           <TopicDescription
             title="What are Cron Triggers?"
-            imgUrl={`${globals.assetsPath}/common/img/scheduled-trigger.png`}
+            imgUrl={`${globals.assetsPath}/common/img/cron-trigger.png`}
             imgAlt={CRON_TRIGGER}
             description={topicDescription}
           />