Rename; add some comments

Signed-off-by: Tyler Ohlsen <[email protected]>

public/pages/overview/overview.tsx

@@ -14,6 +14,14 @@ import {
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 
+/**
+ * The overview page. This contains a detailed description on what
+ * this plugin offers, and links to different resources (blogs, demos,
+ * documentation, etc.)
+ *
+ * This may be hidden for the initial release until we have sufficient content
+ * such that this page adds enough utility & user value.
+ */
 export function Overview() {
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([

public/pages/workflow_detail/workflow_detail.tsx

@@ -20,6 +20,11 @@ export interface WorkflowDetailRouterProps {
 interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
+/**
+ * The workflow details page. This is where users will configure, create, and
+ * test their created workflows. Additionally, can be used to load existing workflows
+ * to view details and/or make changes to them.
+ */
 export function WorkflowDetail(props: WorkflowDetailProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
 

public/pages/workflow_detail/workspace/component_details.tsx

@@ -26,6 +26,11 @@ interface ComponentDetailsProps {
   isOpen: boolean;
 }
 
+/**
+ * A panel that will be nested in a resizable container to dynamically show
+ * the details and user-required inputs based on the selected component
+ * in the flow workspace.
+ */
 export function ComponentDetails(props: ComponentDetailsProps) {
   // TODO: use this instance to update the internal node state. ex: update field data in the selected node based
   // on user input

public/pages/workflow_detail/workspace/resizable_workspace.tsx

@@ -14,6 +14,10 @@ interface ResizableWorkspaceProps {
   workflow?: Workflow;
 }
 
+/**
+ * The overall workspace component that maintains state related to the 2 resizable
+ * panels - the ReactFlow workspace panel and the selected component details panel.
+ */
 export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const collapseFn = useRef(

public/pages/workflows/new_workflow/new_workflow.tsx

@@ -10,6 +10,13 @@ import { UseCase } from './use_case';
 
 interface NewWorkflowProps {}
 
+/**
+ * TODO: may rename this later on.
+ *
+ * Contains the searchable library of templated workflows based
+ * on a variety of use cases. Can click on them to load in a pre-configured
+ * workflow for users to start with.
+ */
 export function NewWorkflow(props: NewWorkflowProps) {
   return (
     <EuiFlexGrid columns={3} gutterSize="l">

public/pages/workflows/workflow_list/workflow_list.tsx

@@ -12,6 +12,9 @@ import { columns } from './columns';
 
 interface WorkflowListProps {}
 
+/**
+ * The searchable list of created workflows.
+ */
 export function WorkflowList(props: WorkflowListProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
 

public/pages/workflows/workflows.tsx

@@ -41,6 +41,11 @@ function replaceActiveTab(activeTab: string, props: WorkflowsProps) {
   });
 }
 
+/**
+ * The base workflows page. From here, users can toggle between views to access
+ * existing created workflows, or explore the library of workflow templates
+ * to get started on a new workflow.
+ */
 export function Workflows(props: WorkflowsProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);