feat: show launch plan information in workflow's schedules

packages/console/src/components/Entities/EntityDetails.tsx

@@ -38,7 +38,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   schedulesContainer: {
     flex: '1 2 auto',
-    marginRight: theme.spacing(30),
   },
   inputsContainer: {
     display: 'flex',

packages/console/src/components/Entities/EntitySchedules.tsx

@@ -1,4 +1,13 @@
-import { Typography } from '@material-ui/core';
+import {
+  Paper,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import {
   getScheduleFrequencyString,
@@ -11,6 +20,7 @@ import { ResourceIdentifier } from 'models/Common/types';
 import { identifierToString } from 'models/Common/utils';
 import { LaunchPlan } from 'models/Launch/types';
 import * as React from 'react';
+import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';
 import { entityStrings } from './constants';
 import t, { patternKey } from './strings';
 
@@ -25,26 +35,61 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     marginBottom: theme.spacing(1),
   },
+  headCell: {
+    color: theme.palette.grey[400],
+  },
 }));
 
 const RenderSchedules: React.FC<{
   launchPlans: LaunchPlan[];
 }> = ({ launchPlans }) => {
-  const commonStyles = useCommonStyles();
+  const styles = useStyles();
   return (
-    <ul className={commonStyles.listUnstyled}>
-      {launchPlans.map(launchPlan => {
-        const { schedule } = launchPlan.spec.entityMetadata;
-        const frequencyString = getScheduleFrequencyString(schedule);
-        const offsetString = getScheduleOffsetString(schedule);
-        const scheduleString = offsetString
-          ? `${frequencyString} (offset by ${offsetString})`
-          : frequencyString;
-        return (
-          <li key={identifierToString(launchPlan.id)}>{scheduleString}</li>
-        );
-      })}
-    </ul>
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'frequency'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'name'))}
+              </Typography>
+            </TableCell>
+            <TableCell className={styles.headCell}>
+              <Typography className={styles.headCell} variant="h4">
+                {t(patternKey('launchPlan', 'version'))}
+              </Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {launchPlans.map(launchPlan => {
+            const { schedule } = launchPlan.spec.entityMetadata;
+            const frequencyString = getScheduleFrequencyString(schedule);
+            const offsetString = getScheduleOffsetString(schedule);
+            const scheduleString = offsetString
+              ? `${frequencyString} (offset by ${offsetString})`
+              : frequencyString;
+
+            return (
+              <TableRow key={launchPlan.id.name}>
+                <TableCell>{scheduleString}</TableCell>
+                <TableCell>
+                  <LaunchPlanLink id={launchPlan.id} color="disabled">
+                    {launchPlan.id.name}
+                  </LaunchPlanLink>
+                </TableCell>
+                <TableCell>{launchPlan.id.version}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 };
 

packages/console/src/components/Entities/strings.ts

@@ -44,6 +44,9 @@ const str = {
   configTestSplitRatio: 'test_split_ratio',
   noExpectedInputs: 'This launch plan has no expected inputs.',
   noFixedInputs: 'This launch plan has no fixed inputs.',
+  launchPlan_frequency: 'Frequency',
+  launchPlan_name: 'Launch Plan',
+  launchPlan_version: 'Version',
 };
 
 export { patternKey } from '@flyteorg/locale';

packages/console/src/components/Entities/test/EntitySchedules.test.tsx

@@ -8,6 +8,7 @@ import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import { listLaunchPlans } from 'models/Launch/api';
 import { LaunchPlan, LaunchPlanState } from 'models/Launch/types';
 import * as React from 'react';
+import { MemoryRouter } from 'react-router';
 import { EntitySchedules } from '../EntitySchedules';
 import t from '../strings';
 
@@ -26,7 +27,11 @@ describe('EntitySchedules', () => {
   let launchPlans: LaunchPlan[];
 
   const renderSchedules = async () => {
-    const result = render(<EntitySchedules id={id} />);
+    const result = render(
+      <MemoryRouter>
+        <EntitySchedules id={id} />
+      </MemoryRouter>,
+    );
     await waitFor(() => result.getByText(t('schedulesHeader')));
     return result;
   };

packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx

@@ -0,0 +1,27 @@
+import classnames from 'classnames';
+import { useCommonStyles } from 'components/common/styles';
+import { LaunchPlanId } from 'models/Launch/types';
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Routes } from 'routes/routes';
+
+/** A simple component to render a link to a specific LaunchPlan */
+export const LaunchPlanLink: React.FC<{
+  className?: string;
+  color?: 'primary' | 'disabled';
+  id: LaunchPlanId;
+}> = ({ className, color = 'primary', id }) => {
+  const commonStyles = useCommonStyles();
+  const linkColor =
+    color === 'disabled'
+      ? commonStyles.secondaryLink
+      : commonStyles.primaryLink;
+  return (
+    <RouterLink
+      className={classnames(linkColor, className)}
+      to={`${Routes.LaunchPlanDetails.makeUrl(id.project, id.domain, id.name)}`}
+    >
+      {id.name}
+    </RouterLink>
+  );
+};