console: UI updates (hasura#5427)

- Schema page - Keep function sections expanded by default - Add Know more link for relationships - Table relationships page - Add tooltips / know more links - Update add table relationship UI - Remote relationships -> remote schema relationships - Make remote relationships UI consistent - Events pages - fix breadcrumbs - update scheduled trigger info image - add note regarding UTC timezone based events to tooltip for cron triggers
beerose · Jul 21, 2020 · ef213d4 · ef213d4
1 parent 0bd9e7e
commit ef213d4
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 50 deletions.
diff --git a/console/cypress/integration/data/functions/spec.ts b/console/cypress/integration/data/functions/spec.ts
@@ -47,7 +47,6 @@ export const unTrackFunction = () => {
 };
 
 export const trackFunction = () => {
-  cy.get(getElementFromAlias('toggle-trackable-functions')).click();
   cy.get(
     getElementFromAlias(`add-track-function-${getCustomFunctionName(1)}`)
   ).should('exist');

diff --git a/console/src/action-diagram.png b/console/src/action-diagram.png
diff --git a/console/src/components/Services/Data/Schema/Schema.js b/console/src/components/Services/Data/Schema/Schema.js
@@ -532,9 +532,13 @@ class Schema extends Component {
       };
 
       const heading = getSectionHeading(
-        'Untracked foreign-key relations',
+        'Untracked foreign-key relationships',
         'Relationships inferred via foreign-keys that are not exposed over the GraphQL API',
-        getTrackAllBtn()
+        <>
+          <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/table-relationships/index.html" />
+          &nbsp;
+          {getTrackAllBtn()}
+        </>
       );
 
       return (
@@ -621,14 +625,14 @@ class Schema extends Component {
       const heading = getSectionHeading(
         'Untracked custom functions',
         'Custom functions that are not exposed over the GraphQL API',
-        <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/queries/custom-functions.html" />
+        <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/custom-functions.html" />
       );
 
       return (
         <div className={styles.add_mar_top} key={'custom-functions-content'}>
           <CollapsibleToggle
             title={heading}
-            isOpen={!noTrackableFunctions}
+            isOpen
             testId={'toggle-trackable-functions'}
           >
             <div className={`${styles.padd_left_remove} col-xs-12`}>
@@ -689,7 +693,7 @@ class Schema extends Component {
           className={styles.add_mar_top}
           key={'non-trackable-custom-functions'}
         >
-          <CollapsibleToggle title={heading} isOpen={false}>
+          <CollapsibleToggle title={heading} isOpen>
             <div className={`${styles.padd_left_remove} col-xs-12`}>
               {getNonTrackableFuncList()}
             </div>

diff --git a/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js b/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js
@@ -68,7 +68,7 @@ const AddManualRelationship = ({
   return (
     <div key="add_manual_relationship">
       <div className={styles.add_mar_bottom}>
-        <label> Add a new relationship manually </label>
+        Add a new relationship <b>manually</b>
       </div>
       <ExpandableEditor
         editorExpanded={expandedContent}

diff --git a/console/src/components/Services/Data/TableRelationships/Relationships.js b/console/src/components/Services/Data/TableRelationships/Relationships.js
@@ -17,6 +17,8 @@ import gqlPattern, { gqlRelErrorNotif } from '../Common/GraphQLValidation';
 import { getRelDef, getObjArrRelList } from './utils';
 
 import Button from '../../../Common/Button/Button';
+import ToolTip from '../../../Common/Tooltip/Tooltip';
+import KnowMoreLink from '../../../Common/KnowMoreLink/KnowMoreLink';
 import AddManualRelationship from './AddManualRelationship';
 import RemoteRelationships from './RemoteRelationships/RemoteRelationships';
 import suggestedRelationshipsRaw from './autoRelations';
@@ -141,10 +143,9 @@ const AddRelationship = ({
     suggestedRelationshipsData.arrayRel.length < 1
   ) {
     return (
-      <div className={`${styles.remove_margin_bottom} form-group`}>
-        <label>
-          You have no new relationships that can be added via foreign-keys
-        </label>
+      <div className={styles.add_mar_bottom}>
+        You have <b>no new relationships</b> that can be added{' '}
+        <b>via foreign-keys</b>
       </div>
     );
   }
@@ -250,7 +251,7 @@ const AddRelationship = ({
   return (
     <div>
       <div>
-        <label> Add new relationships via foreign-keys </label>
+        Add new relationships <b>via foreign-keys</b>
       </div>
       <div className={tableStyles.tableContainer}>
         <table
@@ -428,7 +429,6 @@ const Relationships = ({
             cachedRelationshipData={relAdd}
             dispatch={dispatch}
           />
-          <hr />
           <AddManualRelationship
             tableSchema={tableSchema}
             allSchemas={allSchemas}
@@ -471,13 +471,16 @@ const Relationships = ({
         <div
           className={`${styles.padd_left_remove} col-xs-10 col-md-10 ${styles.add_mar_bottom}`}
         >
-          <h4 className={styles.subheading_text}>Table Relationships</h4>
+          <h4 className={styles.subheading_text}>
+            Table Relationships
+            <ToolTip message={'Relationships to tables / views'} />
+            &nbsp;
+            <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/table-relationships/index.html" />
+          </h4>
           {addedRelationshipsView}
-          <br />
           {getAddRelSection()}
         </div>
         <div className={`${styles.padd_left_remove} col-xs-10 col-md-10`}>
-          <h4 className={styles.subheading_text}>Remote Relationships</h4>
           <RemoteRelationships
             relationships={existingRemoteRelationships}
             reduxDispatch={dispatch}

diff --git a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
@@ -9,6 +9,8 @@ import RelationshipEditor from './RelationshipEditor';
 import { NotFoundError } from '../../../Error/PageNotFound';
 import RemoteRelationships from './RemoteRelationships/RemoteRelationships';
 import { fetchRemoteSchemas } from '../../RemoteSchema/Actions';
+import ToolTip from '../../../Common/Tooltip/Tooltip';
+import KnowMoreLink from '../../../Common/KnowMoreLink/KnowMoreLink';
 
 class RelationshipsView extends Component {
   componentDidMount() {
@@ -138,7 +140,6 @@ class RelationshipsView extends Component {
     const remoteRelationshipsSection = () => {
       return (
         <div className={`${styles.padd_left_remove} col-xs-10 col-md-10`}>
-          <h4 className={styles.subheading_text}>Remote Relationships</h4>
           <RemoteRelationships
             relationships={tableSchema.remote_relationships}
             reduxDispatch={dispatch}
@@ -160,18 +161,25 @@ class RelationshipsView extends Component {
         />
         <br />
         <div className={`${styles.padd_left_remove} container-fluid`}>
-          <div className={`${styles.padd_left_remove} col-xs-10 col-md-10`}>
-            <h4 className={styles.subheading_text}>Relationships</h4>
+          <div
+            className={`${styles.padd_left_remove} ${styles.add_mar_bottom} col-xs-10 col-md-10`}
+          >
+            <h4 className={styles.subheading_text}>
+              Table Relationships
+              <ToolTip message={'Relationships to tables / views'} />
+              &nbsp;
+              <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/table-relationships/index.html" />
+            </h4>
             {addedRelationshipsView}
-            <br />
-            <AddManualRelationship
-              tableSchema={tableSchema}
-              allSchemas={allSchemas}
-              schemaList={schemaList}
-              relAdd={manualRelAdd}
-              dispatch={dispatch}
-            />
-            <hr />
+            <div className={styles.activeEdit}>
+              <AddManualRelationship
+                tableSchema={tableSchema}
+                allSchemas={allSchemas}
+                schemaList={schemaList}
+                relAdd={manualRelAdd}
+                dispatch={dispatch}
+              />
+            </div>
           </div>
           {remoteRelationshipsSection()}
         </div>

diff --git a/...c/components/Services/Data/TableRelationships/RemoteRelationships/RemoteRelationships.tsx b/...c/components/Services/Data/TableRelationships/RemoteRelationships/RemoteRelationships.tsx
@@ -4,6 +4,8 @@ import { RemoteRelationshipServer } from './utils';
 import RemoteRelationshipList from './components/RemoteRelationshipList';
 import { fetchRemoteSchemas } from '../../../RemoteSchema/Actions';
 import { Table } from '../../../../Common/utils/pgUtils';
+import ToolTip from '../../../../Common/Tooltip/Tooltip';
+import KnowMoreLink from '../../../../Common/KnowMoreLink/KnowMoreLink';
 import { Dispatch } from '../../../../../types';
 
 type Props = {
@@ -24,17 +26,22 @@ const RemoteRelationships: React.FC<Props> = ({
   }, []);
 
   return (
-    <div>
-      <div className={styles.add_mar_bottom}>
-        Relationships to remote schemas
+    <>
+      <h4 className={styles.subheading_text}>
+        Remote Schema Relationships
+        <ToolTip message="Relationships to remote schemas" />
+        &nbsp;
+        <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/remote-relationships/remote-schema-relationships.html" />
+      </h4>
+      <div className={styles.activeEdit}>
+        <RemoteRelationshipList
+          relationships={relationships}
+          table={table}
+          remoteSchemas={remoteSchemas}
+          reduxDispatch={reduxDispatch}
+        />
       </div>
-      <RemoteRelationshipList
-        relationships={relationships}
-        table={table}
-        remoteSchemas={remoteSchemas}
-        reduxDispatch={reduxDispatch}
-      />
-    </div>
+    </>
   );
 };
 

diff --git a/...ervices/Data/TableRelationships/RemoteRelationships/components/RemoteRelEditorWrapper.tsx b/...ervices/Data/TableRelationships/RemoteRelationships/components/RemoteRelEditorWrapper.tsx
@@ -49,7 +49,7 @@ const EditorWrapper: React.FC<Props> = ({
       }
     : null;
 
-  const expandButtonText = isLast ? 'Add a remote relationship' : 'Edit';
+  const expandButtonText = isLast ? 'Add a remote schema relationship' : 'Edit';
   const collapseButtonText = isLast ? 'Cancel' : 'Close';
   return (
     <ExpandableEditor

diff --git a/console/src/components/Services/Events/AdhocEvents/Container.tsx b/console/src/components/Services/Events/AdhocEvents/Container.tsx
@@ -22,6 +22,19 @@ interface Props {
 }
 
 const STContainer: React.FC<Props> = ({ children, tabName }) => {
+  let activeTab = tabName as string;
+  if (tabName === 'processed') {
+    activeTab = 'Processed';
+  } else if (tabName === 'pending') {
+    activeTab = 'Pending';
+  } else if (tabName === 'add') {
+    activeTab = 'Create';
+  } else if (tabName === 'logs') {
+    activeTab = 'Invocation Logs';
+  } else if (tabName === 'info') {
+    activeTab = 'Info';
+  }
+
   const breadCrumbs = [
     {
       title: 'Events',
@@ -32,7 +45,7 @@ const STContainer: React.FC<Props> = ({ children, tabName }) => {
       url: getAdhocEventsRoute(),
     },
     {
-      title: tabName,
+      title: activeTab,
       url: '',
     },
   ];

diff --git a/console/src/components/Services/Events/AdhocEvents/Info/Info.tsx b/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/event-trigger.png`}
+          imgUrl={`${globals.assetsPath}/common/img/scheduled-trigger.png`}
           imgAlt={ADHOC_EVENTS_HEADING}
           description={topicDescription}
         />

diff --git a/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx b/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx
@@ -66,7 +66,7 @@ const Form: React.FC<Props> = props => {
       </FormSection>
       <FormSection
         id="trigger-schedule"
-        tooltip="Schedule for your cron"
+        tooltip="Schedule for your cron (events are created based on the UTC timezone)"
         heading="Cron Schedule"
       >
         <div className={`${styles.add_mar_bottom_mid} ${styles.display_flex}`}>

diff --git a/console/src/components/Services/Events/CronTriggers/Container.tsx b/console/src/components/Services/Events/CronTriggers/Container.tsx
@@ -73,21 +73,32 @@ const STContainer: React.FC<Props> = ({
     throw new NotFoundError();
   }
 
+  let activeTab = tabName as string;
+  if (tabName === 'processed') {
+    activeTab = 'Processed';
+  } else if (tabName === 'pending') {
+    activeTab = 'Pending';
+  } else if (tabName === 'modify') {
+    activeTab = 'Modify';
+  } else if (tabName === 'logs') {
+    activeTab = 'Invocation Logs';
+  }
+
   const breadCrumbs = [
     {
       title: 'Events',
       url: getDataEventsLandingRoute(),
     },
     {
-      title: 'Scheduled',
+      title: 'Cron Triggers',
       url: getScheduledEventsLandingRoute(),
     },
     {
       title: triggerName,
       url: tabInfo[tabName].getRoute(triggerName),
     },
     {
-      title: tabName,
+      title: activeTab,
       url: '',
     },
   ];

diff --git a/console/src/components/Services/Events/CronTriggers/Landing.tsx b/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/event-trigger.png`}
+            imgUrl={`${globals.assetsPath}/common/img/scheduled-trigger.png`}
             imgAlt={CRON_TRIGGER}
             description={topicDescription}
           />

diff --git a/console/src/components/Services/Events/EventTriggers/TableCommon/TableHeader.js b/console/src/components/Services/Events/EventTriggers/TableCommon/TableHeader.js
@@ -36,11 +36,7 @@ const TableHeader = ({ triggerName, tabName, count, readOnlyMode }) => {
         url: '',
       },
       {
-        title: 'Manage',
-        url: getDataEventsLandingRoute(),
-      },
-      {
-        title: 'Data Events',
+        title: 'Data Triggers',
         url: getDataEventsLandingRoute(),
       },
       {