feat: added doc info #70 (#74)

JalexChen · Jaryt · web-flow · commit 5e09093ca56b · 2021-12-10T16:31:33.000-05:00
Co-authored-by: Jaryt Bustard &lt;jarytbustard@gmail.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
 build
-yarn-error.log
+yarn-error.log
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/atoms/ComponentInfo.tsx b/src/components/atoms/ComponentInfo.tsx
@@ -0,0 +1,12 @@
+import ComponentMapping from '../../mappings/ComponentMapping';
+
+const ComponentInfo = (props: { type: ComponentMapping }) => {
+  return (
+    <>
+    <p className="font-medium text-sm text-circle-gray-500">{props.type.docsInfo.description}</p>
+    <a className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium" href={props.type.docsInfo.link}>Learn More</a><br></br>
+    </>
+  );
+};
+
+export default ComponentInfo;
diff --git a/src/components/atoms/ConnectionLine.tsx b/src/components/atoms/ConnectionLine.tsx
@@ -15,7 +15,7 @@ const ConnectionLine = ({
   connectionLineStyle,
 }: ConnectionLineComponentProps) => {
   const connecting = useStoreState((state) => state.connecting);
-  const transform = flowState((state) => state.transform);
+  const transform = flowState((state: any) => state.transform);
   const handle = connecting?.start?.ref?.current as Element;
 
   if (!handle) {
diff --git a/src/components/atoms/nodes/JobNode.tsx b/src/components/atoms/nodes/JobNode.tsx
@@ -4,7 +4,6 @@ import React, { useRef } from 'react';
 import { Handle, isNode, NodeProps, Position } from 'react-flow-renderer';
 import JobIcon from '../../../icons/components/JobIcon';
 import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
-import DragItemIcon from '../../../icons/ui/DragItemIcon';
 import PlusIcon from '../../../icons/ui/PlusIcon';
 import JobMapping from '../../../mappings/JobMapping';
 import { useStoreActions, useStoreState } from '../../../state/Hooks';
diff --git a/src/components/containers/DefinitionsContainer.tsx b/src/components/containers/DefinitionsContainer.tsx
@@ -7,6 +7,7 @@ import {
   CreateDefinitionMenuNav,
 } from '../menus/definitions/CreateDefinitionMenu';
 import SubTypeMenuNav from '../menus/SubTypeMenu';
+import ComponentInfo from '../atoms/ComponentInfo';
 
 export interface DefinitionsProps {
   type: ComponentMapping;
@@ -18,6 +19,7 @@ const DefinitionsContainer = (props: DefinitionsProps) => {
   const items = useStoreState(props.type.store.get);
   const navigateTo = useStoreActions((actions) => actions.navigateTo);
 
+  console.log(props, 'props')
   return (
     <div className="w-full p-4 pb-0">
       <CollapsibleList
@@ -50,6 +52,7 @@ const DefinitionsContainer = (props: DefinitionsProps) => {
         }
       >
         <div className="w-full pl-2 pt-2">
+          <ComponentInfo type={props.type} />
           {(items || []).length > 0 ? (
             items?.map((item) => (
               <Definition data={item} key={item.name} type={props.type} />
diff --git a/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx b/src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx
@@ -4,7 +4,7 @@ import InspectorProperty from '../../../atoms/form/InspectorProperty';
 export interface ExecutorSubTypes {
   [type: string]: SubTypeMapping & {
     resourceClasses: string[];
-  };
+  };  
 }
 
 const executorSubtypes: ExecutorSubTypes = {
@@ -22,25 +22,29 @@ const executorSubtypes: ExecutorSubTypes = {
     fields: (
       <InspectorProperty label="Image" name="executor.image.image" required />
     ),
+    docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-docker',
     description: 'Steps run in container with provided image',
   },
   machine: {
     text: 'Machine',
     resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
     fields: <InspectorProperty label="Image" name="executor.image" required />,
+    docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-machine',
     description: 'Steps run on Linux Virtual Machine',
   },
   macos: {
     text: 'MacOS',
     resourceClasses: ['medium', 'large'],
     fields: <InspectorProperty label="Xcode" name="executor.xcode" required />,
+    docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-macos',
     description:
       'Steps run on macOS Virtual Machine with specific Xcode version',
   },
   windows: {
     text: 'Windows',
     resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
     fields: <InspectorProperty label="Image" name="executor.image" required />,
+    docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-the-windows-executor',
     description: 'Steps run on Windows Virtual Machine',
   },
 };
diff --git a/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx b/src/components/containers/inspector/subtypes/ParameterSubtypes.tsx
@@ -1,6 +1,4 @@
 import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
-import { AnyParameterLiteral } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters/types/CustomParameterLiterals.types';
-import { ReactElement } from 'react';
 import { SubTypeMapping } from '../../../../mappings/ComponentMapping';
 import InspectorProperty from '../../../atoms/form/InspectorProperty';
 
diff --git a/src/components/menus/definitions/subtypes/ExecutorTypePage.tsx b/src/components/menus/definitions/subtypes/ExecutorTypePage.tsx
@@ -32,7 +32,19 @@ const ExecutorTypePage = (props: SubTypeSelectPageProps<string>) => {
               props.setSubtype(subtype);
             }}
           >
-            <p className="font-bold">{executorSubtypes[subtype].text}</p>
+            
+            {/* TODO: break out into card components */}
+            <div className="flex flex-row">
+              <p className="font-bold">{executorSubtypes[subtype].text}</p>
+              {executorSubtypes[subtype].docsLink && (
+                <a
+                  className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
+                  href={executorSubtypes[subtype].docsLink}
+                >
+                  Learn More
+                </a>
+              )}
+            </div>
             <p className="text-sm mt-1 leading-4 text-circle-gray-500">
               {executorSubtypes[subtype].description}
             </p>
@@ -47,7 +59,9 @@ const ExecutorTypePage = (props: SubTypeSelectPageProps<string>) => {
 const ExecutorTypePageNav: NavigationComponent = {
   Component: ExecutorTypePage,
   Label: (props: SubTypeSelectPageProps<string>) => <p>New Executor</p>,
-  Icon: (props: SubTypeSelectPageProps<string>) => <ExecutorIcon className="w-6 h-8 py-2" />,
+  Icon: (props: SubTypeSelectPageProps<string>) => (
+    <ExecutorIcon className="w-6 h-8 py-2" />
+  ),
 };
 
 export default ExecutorTypePageNav;
diff --git a/src/components/menus/definitions/subtypes/ParameterTypePage.tsx b/src/components/menus/definitions/subtypes/ParameterTypePage.tsx
@@ -1,4 +1,3 @@
-import { AnyParameterLiteral } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters/types/CustomParameterLiterals.types';
 import ParameterIcon from '../../../../icons/components/ParameterIcon';
 import ComponentMapping from '../../../../mappings/ComponentMapping';
 import { NavigationComponent } from '../../../../state/Store';
@@ -9,7 +8,7 @@ import {
 } from '../../../containers/inspector/subtypes/ParameterSubtypes';
 import { SubTypeSelectPageProps } from '../../SubTypeMenu';
 
-const ParameterTypePage = <ParameterType extends AnyParameterLiteral>(
+const ParameterTypePage = (
   props: SubTypeSelectPageProps<string> & { component: ComponentMapping },
 ) => {
   const parameters =
diff --git a/src/index.css b/src/index.css
@@ -10,4 +10,4 @@ html {
 
 html, body, #root {
   @apply h-full m-0 p-0;
-}
+}
diff --git a/src/mappings/CommandMapping.tsx b/src/mappings/CommandMapping.tsx
@@ -34,6 +34,10 @@ const CommandMapping: ComponentMapping<CustomCommand> = {
     summary: CommandSummary,
     inspector: CommandInspector,
   },
+  docsInfo: {
+    description: "Sequenced steps to be executed",
+    link: "https://circleci.com/docs/2.0/reusing-config/#the-commands-key"
+  }
 };
 
 export default CommandMapping;
diff --git a/src/mappings/ComponentMapping.tsx b/src/mappings/ComponentMapping.tsx
@@ -31,6 +31,8 @@ export interface DataMapping {
 /**
  * Registry of circleci-config-sdk component to data maps.
  */
+
+// thinking of adding a docs link to Executor and description as a key to each Mapping
 const dataMappings: DataMapping[] = [
   {
     type: 'executors',
@@ -93,9 +95,15 @@ type KeysOfUnion<T> = T extends T ? keyof T : never;
 export interface SubTypeMapping {
   text: string;
   description?: string;
+  docsLink?: string;
   fields: ReactElement | React.FunctionComponent<any>;
 }
 
+export interface ComponentInfoType {
+  description: string
+  link: string
+}
+
 /**
  * circleci-config-sdk Component to Data Mapping
  *
@@ -123,6 +131,7 @@ export default interface ComponentMapping<
    * Is true when the component can accept parameters.
    */
   parameters?: ComponentParameterType;
+  docsInfo: ComponentInfoType;
   /** Transform field values into an instance of ConfigDataType */
   transform: (
     values: { [K: string]: any },
diff --git a/src/mappings/ExecutorMapping.tsx b/src/mappings/ExecutorMapping.tsx
@@ -113,6 +113,10 @@ const ExecutorMapping: ComponentMapping<ReusableExecutor, WorkflowJob> = {
     summary: ExecutorSummary,
     inspector: ExecutorInspector,
   },
+  docsInfo: {
+    description: "Technology/Environment to run with",
+    link: "https://circleci.com/docs/2.0/executor-types/"
+  }
 };
 
 export default ExecutorMapping;
diff --git a/src/mappings/JobMapping.tsx b/src/mappings/JobMapping.tsx
@@ -46,6 +46,10 @@ const JobMapping: ComponentMapping<Job, WorkflowJob> = {
     summary: JobSummary,
     inspector: JobInspector,
   },
+  docsInfo: {
+    description: "Collection of steps to run your config",
+    link: "https://circleci.com/docs/2.0/concepts/#jobs",
+  }
 };
 
 export default JobMapping;
diff --git a/src/mappings/ParameterMapping.tsx b/src/mappings/ParameterMapping.tsx
@@ -49,6 +49,10 @@ const ParameterMapping: ComponentMapping<
     summary: ParameterSummary,
     inspector: ParameterInspector,
   },
+  docsInfo: {
+    description: "Options to help describe a job, command, or executor",
+    link: "https://circleci.com/docs/2.0/reusing-config/#using-the-parameters-declaration"
+  }
 };
 
 export default ParameterMapping;
diff --git a/src/state/Store.tsx b/src/state/Store.tsx
@@ -3,7 +3,6 @@ import {
   Job,
   parameters,
   Workflow,
-  WorkflowJob,
 } from '@circleci/circleci-config-sdk';
 import { CustomCommand } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Commands/exports/Reusable';
 import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
diff --git a/yarn.lock b/yarn.lock
