feat: launch plans list & detail page #none;

packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx

@@ -0,0 +1,40 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { SvgIconProps } from '@material-ui/core';
+import * as React from 'react';
+
+const useStyles = makeStyles(() => ({
+  svg: {
+    marginTop: 0,
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    fontSize: '1.5rem',
+    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    flexShrink: 0,
+    userSelect: 'none',
+  },
+}));
+
+export const MuiLaunchPlanIcon: React.FunctionComponent = (props: SvgIconProps) => {
+  const { viewBox, fill, className } = props;
+  const styles = useStyles();
+  console.log(props);
+  return (
+    <svg
+      className={styles.svg + ' ' + className}
+      viewBox={viewBox || '0 0 16 16'}
+      fill={fill || 'currentColor'}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginRight: '16px',
+      }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 15V2C2 1.44772 2.44772 1 3 1H12.7391C13.2914 1 13.7391 1.44772 13.7391 2V11.4421H9.82593H9.32593V11.9421V16H3C2.44772 16 2 15.5523 2 15ZM10.3259 12.4421H13.384L10.3259 15.5002V12.4421ZM5.1307 5.93466H11.0003V4.93466H5.1307V5.93466ZM11.0004 8.83351H5.13079V7.83351H11.0004V8.83351ZM5.13079 11.732H8.02934V10.732H5.13079V11.732Z"
+        fill={fill || '#666666'}
+      />
+    </svg>
+  );
+};

packages/composites/ui-atoms/src/Icons/index.tsx

@@ -1,3 +1,4 @@
 export { FlyteLogo } from './FlyteLogo';
 export { InfoIcon } from './InfoIcon';
 export { RerunIcon } from './RerunIcon';
+export { MuiLaunchPlanIcon } from './MuiLaunchPlanIcon';

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

@@ -8,6 +8,7 @@ import { ResourceIdentifier } from 'models/Common/types';
 import * as React from 'react';
 import { entitySections } from './constants';
 import { EntityDetailsHeader } from './EntityDetailsHeader';
+import { EntityInputs } from './EntityInputs';
 import { EntityExecutions } from './EntityExecutions';
 import { EntitySchedules } from './EntitySchedules';
 import { EntityVersions } from './EntityVersions';
@@ -57,6 +58,8 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
   const styles = useStyles();
   const { chartIds, onToggle, clearCharts } = useChartState();
 
+  console.log(id, sections, project, chartIds);
+
   return (
     <WaitForData {...project}>
       <EntityDetailsHeader project={project.value} id={id} launchable={!!sections.launch} />
@@ -67,14 +70,27 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
             <EntityDescription id={id} />
           </div>
         ) : null}
-        {sections.schedules ? (
+        {!sections.inputs && sections.schedules ? (
           <div className={styles.schedulesContainer}>
             <EntitySchedules id={id} />
           </div>
         ) : null}
       </div>
 
-      {sections.versions ? (
+      <div className={styles.inputsContainer}>
+        {sections.inputs ? (
+          <div className={styles.descriptionContainer}>
+            <EntityInputs id={id} />
+          </div>
+        ) : null}
+        {!sections.inputs && sections.schedules ? (
+          <div className={styles.schedulesContainer}>
+            <EntitySchedules id={id} />
+          </div>
+        ) : null}
+      </div>
+
+      {/* {sections.versions ? (
         <div className={styles.versionsContainer}>
           <EntityVersions id={id} />
         </div>
@@ -86,7 +102,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
         <div className={styles.executionsContainer}>
           <EntityExecutions chartIds={chartIds} id={id} clearCharts={clearCharts} />
         </div>
-      ) : null}
+      ) : null} */}
     </WaitForData>
   );
 };

packages/zapp/console/src/components/Entities/EntityDetailsHeader.tsx

@@ -68,6 +68,7 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
 
   const domain = getProjectDomain(project, id.domain);
   const headerText = `${domain.name} / ${id.name}`;
+
   return (
     <>
       <div className={styles.headerContainer}>

packages/zapp/console/src/components/Entities/EntityInputs.tsx

@@ -0,0 +1,56 @@
+import { Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import classnames from 'classnames';
+import { useCommonStyles } from 'components/common/styles';
+import { WaitForData } from 'components/common/WaitForData';
+import { useNamedEntity } from 'components/hooks/useNamedEntity';
+import { NamedEntityMetadata, ResourceIdentifier, Variable } from 'models/Common/types';
+import * as React from 'react';
+import reactLoadingSkeleton from 'react-loading-skeleton';
+import { ReactJsonViewWrapper } from 'components/common/ReactJsonView';
+import { useEntityVersions } from 'components/hooks/Entity/useEntityVersions';
+import { executionSortFields } from 'models/Execution/constants';
+import { SortDirection } from 'models/AdminEntity/types';
+import { TaskClosure } from 'models/Task/types';
+import { executionFilterGenerator } from './generators';
+import { Row } from './Row';
+import t, { patternKey } from './strings';
+import { entityStrings, entitySections } from './constants';
+
+const Skeleton = reactLoadingSkeleton;
+
+const useStyles = makeStyles((theme: Theme) => ({
+  header: {
+    marginBottom: theme.spacing(1),
+  },
+  description: {
+    marginTop: theme.spacing(1),
+  },
+  divider: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+/** Fetches and renders the expected & fixed inputs for a given Entity (LaunchPlan) ID */
+export const EntityInputs: React.FC<{
+  id: ResourceIdentifier;
+}> = ({ id }) => {
+  const commonStyles = useCommonStyles();
+  const styles = useStyles();
+  const namedEntity = useNamedEntity(id);
+  const { closure, spec } = namedEntity.value;
+  const sections = entitySections[id.resourceType];
+
+  console.log(namedEntity.value);
+
+  return (
+    <>
+      <Typography className={styles.header} variant="h3">
+        {t('basicInformation')}
+      </Typography>
+      <div className={styles.divider} />
+      <Typography variant="body2" component="span" className={styles.description}></Typography>
+    </>
+  );
+};

packages/zapp/console/src/components/Entities/constants.ts

@@ -27,14 +27,15 @@ interface EntitySectionsFlags {
   schedules?: boolean;
   versions?: boolean;
   descriptionInputsAndOutputs?: boolean;
+  inputs?: boolean;
 }
 
 export const entitySections: { [k in ResourceType]: EntitySectionsFlags } = {
   [ResourceType.DATASET]: { description: true },
   [ResourceType.LAUNCH_PLAN]: {
-    description: true,
     executions: true,
-    launch: true,
+    launch: false,
+    inputs: true,
     schedules: true,
   },
   [ResourceType.TASK]: {

packages/zapp/console/src/components/Entities/generators.ts

@@ -29,6 +29,8 @@ export const executionFilterGenerator: {
 
 const workflowListGenerator = ({ project, domain }: ResourceIdentifier) =>
   Routes.ProjectDetails.sections.workflows.makeUrl(project, domain);
+const launchPlanListGenerator = ({ project, domain }: ResourceIdentifier) =>
+  Routes.ProjectDetails.sections.launchPlans.makeUrl(project, domain);
 const taskListGenerator = ({ project, domain }: ResourceIdentifier) =>
   Routes.ProjectDetails.sections.tasks.makeUrl(project, domain);
 const unspecifiedGenerator = ({ project, domain }: ResourceIdentifier | Identifier) => {
@@ -42,22 +44,24 @@ export const backUrlGenerator: {
   [k in ResourceType]: (id: ResourceIdentifier) => string;
 } = {
   [ResourceType.DATASET]: unimplementedGenerator,
-  [ResourceType.LAUNCH_PLAN]: unimplementedGenerator,
+  [ResourceType.LAUNCH_PLAN]: launchPlanListGenerator,
   [ResourceType.TASK]: taskListGenerator,
   [ResourceType.UNSPECIFIED]: unspecifiedGenerator,
   [ResourceType.WORKFLOW]: workflowListGenerator,
 };
 
 const workflowDetailGenerator = ({ project, domain, name }: ResourceIdentifier) =>
   Routes.WorkflowDetails.makeUrl(project, domain, name);
+const launchPlanDetailGenerator = ({ project, domain, name }: ResourceIdentifier) =>
+  Routes.LaunchPlanDetails.makeUrl(project, domain, name);
 const taskDetailGenerator = ({ project, domain, name }: ResourceIdentifier) =>
   Routes.TaskDetails.makeUrl(project, domain, name);
 
 export const backToDetailUrlGenerator: {
   [k in ResourceType]: (id: ResourceIdentifier) => string;
 } = {
   [ResourceType.DATASET]: unimplementedGenerator,
-  [ResourceType.LAUNCH_PLAN]: unimplementedGenerator,
+  [ResourceType.LAUNCH_PLAN]: launchPlanDetailGenerator,
   [ResourceType.TASK]: taskDetailGenerator,
   [ResourceType.UNSPECIFIED]: unspecifiedGenerator,
   [ResourceType.WORKFLOW]: workflowDetailGenerator,

packages/zapp/console/src/components/LaunchPlan/LaunchPlanDetails.tsx

@@ -0,0 +1,33 @@
+import { withRouteParams } from 'components/common/withRouteParams';
+import { EntityDetails } from 'components/Entities/EntityDetails';
+import { ResourceIdentifier, ResourceType } from 'models/Common/types';
+import * as React from 'react';
+
+export interface LaunchPlanDetailsRouteParams {
+  projectId: string;
+  domainId: string;
+  launchPlanName: string;
+}
+export type LaunchPlanDetailsProps = LaunchPlanDetailsRouteParams;
+
+/** The view component for the LaunchPlan landing page */
+export const LaunchPlanDetailsContainer: React.FC<LaunchPlanDetailsRouteParams> = ({
+  projectId,
+  domainId,
+  launchPlanName,
+}) => {
+  const id = React.useMemo<ResourceIdentifier>(
+    () => ({
+      resourceType: ResourceType.LAUNCH_PLAN,
+      project: projectId,
+      domain: domainId,
+      name: launchPlanName,
+    }),
+    [projectId, domainId, launchPlanName],
+  );
+  return <EntityDetails id={id} />;
+};
+
+export const LaunchPlanDetails = withRouteParams<LaunchPlanDetailsRouteParams>(
+  LaunchPlanDetailsContainer,
+);

packages/zapp/console/src/components/LaunchPlan/LaunchPlanVersionDetails.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { withRouteParams } from 'components/common/withRouteParams';
+import { ResourceIdentifier, ResourceType } from 'models/Common/types';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { WaitForData } from 'components/common/WaitForData';
+import { useProject } from 'components/hooks/useProjects';
+import { LaunchPlanId } from 'models/Launch/types';
+import { entitySections } from 'components/Entities/constants';
+import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader';
+import { EntityVersions } from 'components/Entities/EntityVersions';
+
+const useStyles = makeStyles((_theme: Theme) => ({
+  verionDetailsContatiner: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+    height: `calc(100vh - ${_theme.spacing(1)}rem)`,
+  },
+  staticGraphContainer: {
+    display: 'flex',
+    height: '60%',
+    width: '100%',
+    flex: '1',
+  },
+  versionsContainer: {
+    display: 'flex',
+    flex: '0 1 auto',
+    height: '40%',
+    flexDirection: 'column',
+    overflowY: 'scroll',
+  },
+}));
+
+interface LaunchPlanVersionDetailsRouteParams {
+  projectId: string;
+  domainId: string;
+  launchPlanName: string;
+  launchPlanVersion: string;
+}
+
+/**
+ * The view component for the LaunchPlan Versions page
+ * @param projectId
+ * @param domainId
+ * @param launchPlanName
+ */
+const LaunchPlanVersionDetailsContainer: React.FC<LaunchPlanVersionDetailsRouteParams> = ({
+  projectId,
+  domainId,
+  launchPlanName,
+  launchPlanVersion,
+}) => {
+  const launchPlanId = React.useMemo<LaunchPlanId>(
+    () => ({
+      resourceType: ResourceType.LAUNCH_PLAN,
+      project: projectId,
+      domain: domainId,
+      name: launchPlanName,
+      version: launchPlanVersion,
+    }),
+    [projectId, domainId, launchPlanName, launchPlanVersion],
+  );
+
+  const id = launchPlanId as ResourceIdentifier;
+  const sections = entitySections[ResourceType.LAUNCH_PLAN];
+  const project = useProject(launchPlanId.project);
+  const styles = useStyles();
+
+  return (
+    <WaitForData {...project}>
+      <EntityDetailsHeader
+        project={project.value}
+        id={id}
+        launchable={sections.launch}
+        backToWorkflow
+      />
+      <div className={styles.verionDetailsContatiner}>
+        <div className={styles.staticGraphContainer}>
+          {/* <StaticGraphContainer launchPlanId={launchPlanId} /> */}
+        </div>
+        <div className={styles.versionsContainer}>
+          <EntityVersions id={id} showAll />
+        </div>
+      </div>
+    </WaitForData>
+  );
+};
+
+export const LaunchPlanVersionDetails = withRouteParams<LaunchPlanVersionDetailsRouteParams>(
+  LaunchPlanVersionDetailsContainer,
+);