feat: adding route and navigation to the task details page (#97)

src/components/Entities/EntityDetails.tsx

@@ -52,46 +52,44 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
     const onCancelLaunch = () => setShowLaunchForm(false);
 
     return (
-        <>
-            <WaitForData {...project}>
-                <EntityDetailsHeader
-                    project={project.value}
-                    id={id}
-                    launchable={!!sections.launch}
-                    onClickLaunch={onLaunch}
-                />
-                <div className={styles.metadataContainer}>
-                    {!!sections.description ? (
-                        <div className={styles.descriptionContainer}>
-                            <EntityDescription id={id} />
-                        </div>
-                    ) : null}
-                    {!!sections.schedules ? (
-                        <div className={styles.schedulesContainer}>
-                            <EntitySchedules id={id} />
-                        </div>
-                    ) : null}
-                </div>
-                {!!sections.executions ? (
-                    <div className={styles.executionsContainer}>
-                        <EntityExecutions id={id} />
+        <WaitForData {...project}>
+            <EntityDetailsHeader
+                project={project.value}
+                id={id}
+                launchable={!!sections.launch}
+                onClickLaunch={onLaunch}
+            />
+            <div className={styles.metadataContainer}>
+                {!!sections.description ? (
+                    <div className={styles.descriptionContainer}>
+                        <EntityDescription id={id} />
                     </div>
                 ) : null}
-                {/* TODO: LaunchWorkflowForm needs to be made generic */}
-                {!!sections.launch ? (
-                    <Dialog
-                        scroll="paper"
-                        maxWidth="sm"
-                        fullWidth={true}
-                        open={showLaunchForm}
-                    >
-                        <LaunchWorkflowForm
-                            onClose={onCancelLaunch}
-                            workflowId={id}
-                        />
-                    </Dialog>
+                {!!sections.schedules ? (
+                    <div className={styles.schedulesContainer}>
+                        <EntitySchedules id={id} />
+                    </div>
                 ) : null}
-            </WaitForData>
-        </>
+            </div>
+            {!!sections.executions ? (
+                <div className={styles.executionsContainer}>
+                    <EntityExecutions id={id} />
+                </div>
+            ) : null}
+            {/* TODO: LaunchWorkflowForm needs to be made generic */}
+            {!!sections.launch ? (
+                <Dialog
+                    scroll="paper"
+                    maxWidth="sm"
+                    fullWidth={true}
+                    open={showLaunchForm}
+                >
+                    <LaunchWorkflowForm
+                        onClose={onCancelLaunch}
+                        workflowId={id}
+                    />
+                </Dialog>
+            ) : null}
+        </WaitForData>
     );
 };

src/components/Entities/EntityDetailsHeader.tsx

@@ -7,8 +7,8 @@ import { Project, ResourceIdentifier } from 'models';
 import { getProjectDomain } from 'models/Project/utils';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Routes } from 'routes';
 import { launchStrings } from './constants';
+import { backUrlGenerator } from './generators';
 
 const useStyles = makeStyles((theme: Theme) => ({
     actionsContainer: {},
@@ -36,7 +36,7 @@ interface EntityDetailsHeaderProps {
     onClickLaunch?(): void;
 }
 
-/** Renders the workflow name and actions shown on the workflow details page */
+/** Renders the entity name and any applicable actions.  */
 export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
     id,
     onClickLaunch,
@@ -57,10 +57,7 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
             >
                 <Link
                     className={commonStyles.linkUnstyled}
-                    to={Routes.ProjectDetails.sections.workflows.makeUrl(
-                        project.id,
-                        id.domain
-                    )}
+                    to={backUrlGenerator[id.resourceType](id)}
                 >
                     <ArrowBack color="inherit" />
                 </Link>

src/components/Entities/EntityExecutions.tsx

@@ -10,7 +10,7 @@ import { ResourceIdentifier } from 'models';
 import { SortDirection } from 'models/AdminEntity';
 import { executionSortFields } from 'models/Execution';
 import * as React from 'react';
-import { executionFilterGenerator } from './executionFilterGenerator';
+import { executionFilterGenerator } from './generators';
 
 const useStyles = makeStyles((theme: Theme) => ({
     filtersContainer: {

src/components/Entities/executionFilterGenerator.ts → src/components/Entities/generators.ts

@@ -4,6 +4,7 @@ import {
     ResourceIdentifier,
     ResourceType
 } from 'models';
+import { Routes } from 'routes/routes';
 
 const noFilters = () => [];
 
@@ -28,3 +29,18 @@ export const executionFilterGenerator: {
         }
     ]
 };
+
+const workflowListGenerator = ({ project, domain }: ResourceIdentifier) =>
+    Routes.ProjectDetails.sections.workflows.makeUrl(project, domain);
+const taskListGenerator = ({ project, domain }: ResourceIdentifier) =>
+    Routes.ProjectDetails.sections.tasks.makeUrl(project, domain);
+
+export const backUrlGenerator: {
+    [k in ResourceType]: (id: ResourceIdentifier) => string;
+} = {
+    [ResourceType.DATASET]: workflowListGenerator,
+    [ResourceType.LAUNCH_PLAN]: workflowListGenerator,
+    [ResourceType.TASK]: taskListGenerator,
+    [ResourceType.UNSPECIFIED]: workflowListGenerator,
+    [ResourceType.WORKFLOW]: workflowListGenerator
+};

src/components/Task/SearchableTaskNameList.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
+import ChevronRight from '@material-ui/icons/ChevronRight';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import * as classnames from 'classnames';
 import { noDescriptionString } from 'common/constants';
@@ -15,6 +16,8 @@ import { NamedEntity } from 'models';
 import * as React from 'react';
 import { IntersectionOptions, useInView } from 'react-intersection-observer';
 import reactLoadingSkeleton from 'react-loading-skeleton';
+import { Link } from 'react-router-dom';
+import { Routes } from 'routes/routes';
 import { SimpleTaskInterface } from './SimpleTaskInterface';
 import { useLatestTaskVersion } from './useLatestTask';
 const Skeleton = reactLoadingSkeleton;
@@ -91,6 +94,7 @@ const TaskNameRow: React.FC<TaskNameRowProps> = ({ label, entityName }) => {
                 </Typography>
                 {!!inView && <TaskInterface taskName={entityName} />}
             </div>
+            <ChevronRight className={listStyles.itemChevron} />
         </div>
     );
 };
@@ -100,14 +104,23 @@ export const SearchableTaskNameList: React.FC<Omit<
     SearchableNamedEntityListProps,
     'renderItem'
 >> = props => {
+    const commonStyles = useCommonStyles();
     const renderItem = ({
         key,
         value,
         content
     }: SearchResult<SearchableNamedEntity>) => (
-        <li key={key}>
+        <Link
+            key={key}
+            className={commonStyles.linkUnstyled}
+            to={Routes.TaskDetails.makeUrl(
+                value.id.project,
+                value.id.domain,
+                value.id.name
+            )}
+        >
             <TaskNameRow label={content} entityName={value} />
-        </li>
+        </Link>
     );
     return <SearchableNamedEntityList {...props} renderItem={renderItem} />;
 };

src/routes/ApplicationRouter.tsx

@@ -44,6 +44,10 @@ export const ApplicationRouter: React.FC<{}> = () => (
                     { detailsPanel: true }
                 )}
             />
+            <Route
+                path={Routes.TaskDetails.path}
+                component={withSideNavigation(components.taskDetails)}
+            />
             <Route
                 path={Routes.WorkflowDetails.path}
                 component={withSideNavigation(components.workflowDetails)}

src/routes/components.ts

@@ -3,6 +3,7 @@ import { TaskExecutionDetails } from 'components/Executions/TaskExecutionDetails
 import { NotFound } from 'components/NotFound';
 import { ProjectDetails } from 'components/Project';
 import { SelectProject } from 'components/SelectProject';
+import { TaskDetails } from 'components/Task/TaskDetails';
 import { WorkflowVersionDetails } from 'components/Workflow';
 import { WorkflowDetails } from 'components/Workflow/WorkflowDetails';
 
@@ -15,6 +16,7 @@ export const components = {
     projectDetails: ProjectDetails,
     selectProject: SelectProject,
     taskExecutionDetails: TaskExecutionDetails,
+    taskDetails: TaskDetails,
     workflowDetails: WorkflowDetails,
     workflowVersionDetails: WorkflowVersionDetails
 };