doc: Lay out workflow changes for adding LMS Selector page

src/components/forms/data/reducer.ts

@@ -107,7 +107,8 @@ export function FormReducer<FormFields>(
         errorMap: {}
       };
     case SET_STEP:
-      const setStepArgs = action as SetStepArguments<FormFields>;
+    // TODO: Make sure LMSFormWorkflowConfig gets updated here with any LMS selection  
+    const setStepArgs = action as SetStepArguments<FormFields>;
       return { ...state, currentStep: setStepArgs.step };
     case SET_WORKFLOW_STATE:
       const setStateArgs = action as SetWorkflowStateArguments<any>;

src/components/settings/LMSFormWorkflowConfig.tsx

@@ -0,0 +1,130 @@
+import {
+  CANVAS_TYPE,
+  LMS_CONFIG_OAUTH_POLLING_INTERVAL,
+  LMS_CONFIG_OAUTH_POLLING_TIMEOUT,
+  SUBMIT_TOAST_MESSAGE,
+} from "../../../data/constants";
+import type {
+  FormWorkflowButtonConfig,
+  FormWorkflowConfig,
+  FormWorkflowStep,
+  FormWorkflowHandlerArgs,
+  // @ts-ignore
+} from "../../../../forms/FormWorkflow.tsx";
+import CanvasFormConfig, {
+  CanvasConfigCamelCase,
+  CanvasConfigSnakeCase,
+} from "./SettingsLMSTab/LMSConfigs/Canvas/CanvasConfig";
+import MoodleFormConfig, {
+  MoodleConfigCamelCase,
+  MoodleConfigSnakeCase,
+} from "./SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig";
+import BlackboardFormConfig from "./SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig";
+import CornerstoneFormConfig from "./SettingsLMSTab/LMSConfigs/Cornerstone/CornerstoneConfig";
+import DegreedFormConfig from "./SettingsLMSTab/LMSConfigs/Degreed/DegreedConfig";
+import SAPFormConfig from "./SettingsLMSTab/LMSConfigs/SAP/SAPConfig";
+import {
+  BLACKBOARD_TYPE,
+  CORNERSTONE_TYPE,
+  DEGREED2_TYPE,
+  MOODLE_TYPE,
+  SAP_TYPE,
+} from "./data/constants";
+import LMSSelectorPage, {validations} from "./SettingsLMSTab/LMSSelectorPage";
+
+const flowConfigs = {
+  [BLACKBOARD_TYPE]: BlackboardFormConfig,
+  [CANVAS_TYPE]: CanvasFormConfig,
+  [CORNERSTONE_TYPE]: CornerstoneFormConfig,
+  [DEGREED2_TYPE]: DegreedFormConfig,
+  [MOODLE_TYPE]: MoodleFormConfig,
+  [SAP_TYPE]: SAPFormConfig,
+};
+
+// TODO: Add remaining types
+export type LMSConfigCamelCase = CanvasConfigCamelCase | MoodleConfigCamelCase;
+export type LMSConfigSnakeCase = CanvasConfigSnakeCase | MoodleConfigSnakeCase;
+
+export type LMSFormConfigProps = {
+  enterpriseCustomerUuid: string;
+  existingData: LMSConfigCamelCase;
+  existingConfigNames: string[];
+  onSubmit: (LMSConfigCamelCase) => void;
+  onClickCancel: (submitted: boolean, status: string) => Promise<boolean>;
+  channelMap: Record<string, Record<string, any>>;
+  lms?: string;
+};
+
+export const LMSFormWorkflowConfig = ({
+  enterpriseCustomerUuid,
+  onSubmit,
+  onClickCancel,
+  existingData,
+  existingConfigNames,
+  channelMap,
+  lms,
+}: LMSFormConfigProps): FormWorkflowConfig<LMSConfigCamelCase> => {
+
+  const lmsConfig =
+    lms &&
+    flowConfigs[lms](
+      enterpriseCustomerUuid,
+      onSubmit,
+      onClickCancel,
+      existingData,
+      existingConfigNames,
+      channelMap
+    );
+
+  const saveChanges = () => {
+    // TODO: Handle saving LMS selection changes, if applicable
+  };
+
+  const handleSelectionSubmit = () => {
+    // TODO: Submit LMS selection
+  };
+
+  let steps: FormWorkflowStep<CanvasConfigCamelCase>[] = [
+    {
+      index: 0,
+      formComponent: LMSSelectorPage,
+      validations,
+      stepName: "Select LMS",
+      saveChanges,
+      nextButtonConfig: () => {
+        let config = {
+          buttonText: "Next",
+          opensNewWindow: false,
+          onClick: handleSelectionSubmit,
+        };
+        return config as FormWorkflowButtonConfig<LMSConfigCamelCase>;
+      },
+    },
+  ];
+
+  // If we've selected an LMS, add its steps.  Otherwise add a placeholder Activate step
+  if (lmsConfig) {
+    steps = steps.concat(lmsConfig.steps);
+  } else {
+    steps = steps.concat(
+      {
+        index: 0,
+        stepName: "Activate",
+      }
+    );
+  }
+
+  // Go to selector step if the config has not yet been created
+  const getCurrentStep = () => {
+    const startStep: number = existingData.id ? 1 : 0;
+    return steps[startStep];
+  };
+
+  return {
+    ...lmsConfig,
+    getCurrentStep,
+    steps,
+  };
+};
+
+export default LMSFormWorkflowConfig;

src/components/settings/SettingsLMSTab/LMSConfigPage.jsx

@@ -2,29 +2,11 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import {
-  BLACKBOARD_TYPE, CANVAS_TYPE, CORNERSTONE_TYPE, DEGREED2_TYPE, MOODLE_TYPE, SAP_TYPE,
-} from '../data/constants';
-import { BlackboardFormConfig } from './LMSConfigs/Blackboard/BlackboardConfig.tsx';
-import { CanvasFormConfig } from './LMSConfigs/Canvas/CanvasConfig.tsx';
-import { CornerstoneFormConfig } from './LMSConfigs/Cornerstone/CornerstoneConfig.tsx';
-import { DegreedFormConfig } from './LMSConfigs/Degreed/DegreedConfig.tsx';
-import { MoodleFormConfig } from './LMSConfigs/Moodle/MoodleConfig.tsx';
-import { SAPFormConfig } from './LMSConfigs/SAP/SAPConfig.tsx';
 import FormContextWrapper from '../../forms/FormContextWrapper.tsx';
 import { getChannelMap } from '../../../utils';
-
-const flowConfigs = {
-  [BLACKBOARD_TYPE]: BlackboardFormConfig,
-  [CANVAS_TYPE]: CanvasFormConfig,
-  [CORNERSTONE_TYPE]: CornerstoneFormConfig,
-  [DEGREED2_TYPE]: DegreedFormConfig,
-  [MOODLE_TYPE]: MoodleFormConfig,
-  [SAP_TYPE]: SAPFormConfig,
-};
+import LMSFormWorkflowConfig from '../LMSFormWorkflowConfig.tsx';
 
 const LMSConfigPage = ({
-  LMSType,
   onClick,
   enterpriseCustomerUuid,
   existingConfigFormData,
@@ -40,24 +22,24 @@ const LMSConfigPage = ({
     return true;
   };
 
+  const formWorkflowConfig = LMSFormWorkflowConfig({
+    enterpriseCustomerUuid,
+    onSubmit: setExistingConfigFormData,
+    onClickCancel: handleCloseWorkflow,
+    existingData: existingConfigFormData,
+    existingConfigNames: existingConfigs,
+    channelMap,
+  });
+
   return (
     <div>
-      {LMSType && (
-        <FormContextWrapper
-          formWorkflowConfig={flowConfigs[LMSType]({
-            enterpriseCustomerUuid,
-            onSubmit: setExistingConfigFormData,
-            onClickCancel: handleCloseWorkflow,
-            existingData: existingConfigFormData,
-            existingConfigNames: existingConfigs,
-            channelMap,
-          })}
-          onClickOut={handleCloseWorkflow}
-          onSubmit={setExistingConfigFormData}
-          formData={existingConfigFormData}
-          isStepperOpen={isLmsStepperOpen}
-        />
-      )}
+      <FormContextWrapper
+        formWorkflowConfig={formWorkflowConfig}
+        onClickOut={handleCloseWorkflow}
+        onSubmit={setExistingConfigFormData}
+        formData={existingConfigFormData}
+        isStepperOpen={isLmsStepperOpen}
+      />
     </div>
   );
 };
@@ -71,7 +53,6 @@ LMSConfigPage.defaultProps = {
 
 LMSConfigPage.propTypes = {
   enterpriseCustomerUuid: PropTypes.string.isRequired,
-  LMSType: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   existingConfigFormData: PropTypes.shape({}).isRequired,
   existingConfigs: PropTypes.arrayOf(PropTypes.string),

src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { Container, Form, Image } from "@edx/paragon";
+
+import {
+  useFormContext,
+  // @ts-ignore
+} from "../../../../forms/FormContext.tsx";
+import { FormFieldValidation } from "../../forms/FormContext";
+
+export const formFieldNames = {
+  LMS: "LMS",
+};
+
+export const validations: FormFieldValidation[] = [
+  {
+    formFieldId: formFieldNames.LMS,
+    validator: (fields) => {
+      const lmsSelection = fields[formFieldNames.LMS];
+      return !lmsSelection;
+    },
+  },
+];
+
+// LMS selector form page
+const LMSSelectorPage = () => {
+  const { dispatch, stateMap } = useFormContext();
+  return (
+    <Container size='md'>
+      <span className='d-flex pb-4'>
+        <h3>
+          Authorize connection to Canvas
+        </h3>
+      </span>
+      <Form style={{ maxWidth: "60rem" }}>
+        {/* TODO: Render the selector */}
+      </Form>
+    </Container>
+  );
+};
+
+export default LMSSelectorPage;