@@ -53,12 +58,12 @@ class Footer extends React.Component {
@@ -83,6 +88,7 @@ Footer.propTypes = {
enterpriseName: PropTypes.string,
enterpriseSlug: PropTypes.string,
enterpriseLogo: PropTypes.string,
+ intl: intlShape.isRequired, // injected by injectIntl
};
Footer.defaultProps = {
@@ -91,4 +97,4 @@ Footer.defaultProps = {
enterpriseLogo: null,
};
-export default Footer;
+export default injectIntl(Footer);
diff --git a/src/components/Footer/messages.js b/src/components/Footer/messages.js
new file mode 100644
index 0000000000..4ca7a4ad9c
--- /dev/null
+++ b/src/components/Footer/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ termsOfService: {
+ id: 'adminPortal.emailTemplateForm.termsOfService',
+ defaultMessage: 'Terms of Service',
+ },
+ privacyPolicy: {
+ id: 'adminPortal.emailTemplateForm.privacyPolicy',
+ defaultMessage: 'Privacy Policy',
+ },
+ support: {
+ id: 'adminPortal.emailTemplateForm.support',
+ defaultMessage: 'Support',
+ },
+});
+
+export default messages;
diff --git a/src/components/NotFoundPage/index.jsx b/src/components/NotFoundPage/index.jsx
index 485d0be7b9..d1cdc71b04 100644
--- a/src/components/NotFoundPage/index.jsx
+++ b/src/components/NotFoundPage/index.jsx
@@ -1,14 +1,6 @@
import React from 'react';
import Helmet from 'react-helmet';
-const NotFoundPage = () => (
-
-
-
-
-
-);
-
export const NotFound = () => (
<>
@@ -22,4 +14,12 @@ export const NotFound = () => (
);
+const NotFoundPage = () => (
+
+
+
+
+
+);
+
export default NotFoundPage;
diff --git a/src/components/UserActivationPage/index.jsx b/src/components/UserActivationPage/index.jsx
index 59a3951a2b..9bb89fd1be 100644
--- a/src/components/UserActivationPage/index.jsx
+++ b/src/components/UserActivationPage/index.jsx
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
import {
@@ -6,6 +7,7 @@ import {
} from '@edx/paragon';
import { getAuthenticatedUser, hydrateAuthenticatedUser } from '@edx/frontend-platform/auth';
import { LoginRedirect } from '@edx/frontend-enterprise-logistration';
+import { configuration } from '../../config';
import { useInterval } from '../../hooks';
import EnterpriseAppSkeleton from '../EnterpriseApp/EnterpriseAppSkeleton';
@@ -63,7 +65,10 @@ const UserActivationPage = ({ match }) => {
onClose={() => setShowToast(false)}
show={showToast}
>
- Your edX administrator account was successfully activated.
+
);
@@ -78,16 +83,21 @@ const UserActivationPage = ({ match }) => {
- In order to continue, you must verify your email address to activate
- your edX account. Please stay on this page as it will automatically refresh
- once your account is activated.
+
- If you run into further issues, please contact the edX Customer
- Success team at{' '}
-
- customersuccess@edx.org
- .
+ {configuration.CUSTOMER_SUPPORT_EMAIL},
+ }}
+ />
diff --git a/src/components/forms/FormContext.tsx b/src/components/forms/FormContext.tsx
index a6f1b6e7ce..9ff41f7cb1 100644
--- a/src/components/forms/FormContext.tsx
+++ b/src/components/forms/FormContext.tsx
@@ -1,6 +1,9 @@
-import React, { createContext, useContext, Context, ReactNode, Dispatch } from "react";
-import type { FormActionArguments } from "./data/actions";
-import type { FormWorkflowStep } from "./FormWorkflow";
+import React, {
+ Context, Dispatch, createContext, ReactNode, useContext, useMemo,
+} from 'react';
+
+import type { FormActionArguments } from './data/actions';
+import type { FormWorkflowStep } from './FormWorkflow';
export type FormFields = { [name: string]: any };
export type FormValidatorResult = boolean | string;
@@ -39,8 +42,11 @@ const FormContextProvider = ({
dispatch,
formContext,
}: FormContextProps) => {
+ const memoValue = useMemo(() => (
+ { ...formContext, dispatch }
+ ), [formContext, dispatch]);
return (
-
+
{children}
);
diff --git a/src/components/forms/FormContextWrapper.tsx b/src/components/forms/FormContextWrapper.tsx
index 25a9da6b04..cec05e1483 100644
--- a/src/components/forms/FormContextWrapper.tsx
+++ b/src/components/forms/FormContextWrapper.tsx
@@ -1,35 +1,29 @@
-import React, { useReducer } from "react";
-// @ts-ignore
-import FormContextProvider from "./FormContext.tsx";
-import type { FormFields } from "./FormContext";
-// @ts-ignore
-import FormWorkflow from "./FormWorkflow.tsx";
-import type { FormWorkflowProps } from "./FormWorkflow";
-// @ts-ignore
-import {FormReducer, initializeForm } from "./data/reducer.ts";
-import type { FormActionArguments } from "./data/actions";
+import React, { useReducer } from 'react';
+import FormContextProvider from './FormContext';
+import FormWorkflow, { FormWorkflowProps } from './FormWorkflow';
+import {
+ FormReducer, FormReducerType, initializeForm, InitializeFormArguments,
+} from './data/reducer';
-// Context wrapper for multi-step form container
-function FormContextWrapper({
+type FormWrapperProps = FormWorkflowProps & { formData: FormConfigData };
+
+const FormContextWrapper = ({
formWorkflowConfig,
onClickOut,
- onSubmit,
formData,
isStepperOpen,
-}: FormWorkflowProps) {
+}: FormWrapperProps) => {
+ const initializeAction: InitializeFormArguments = {
+ formFields: formData as FormConfigData,
+ currentStep: formWorkflowConfig.getCurrentStep(),
+ };
const [formFieldsState, dispatch] = useReducer<
- FormReducer,
- FormActionArguments
+ FormReducerType,
+ InitializeFormArguments
>(
FormReducer,
- initializeForm(
- {},
- {
- formFields: formData as FormFields,
- currentStep: formWorkflowConfig.getCurrentStep(),
- }
- ),
- initializeForm
+ initializeAction,
+ initializeForm,
);
return (
({
formContext={formFieldsState || {}}
>
);
-}
+};
export default FormContextWrapper;
diff --git a/src/components/forms/FormWaitModal.tsx b/src/components/forms/FormWaitModal.tsx
index 9c59e122ac..d73b0b6344 100644
--- a/src/components/forms/FormWaitModal.tsx
+++ b/src/components/forms/FormWaitModal.tsx
@@ -1,10 +1,9 @@
-import React from "react";
-import { AlertModal, Spinner } from "@edx/paragon";
-// @ts-ignore
-import { useFormContext } from "./FormContext.tsx";
-import type { FormContext } from "./FormContext";
+import React from 'react';
+import { AlertModal, Spinner } from '@edx/paragon';
+import { useFormContext } from './FormContext';
+import type { FormContext } from './FormContext';
-type FormWaitModal = {
+type FormWaitModalProps = {
// FormContext state that when truthy, shows the modal
triggerState: string;
onClose: () => void;
@@ -18,9 +17,8 @@ const FormWaitModal = ({
onClose,
header,
text,
-}: FormWaitModal) => {
+}: FormWaitModalProps) => {
const { stateMap }: FormContext = useFormContext();
-
const isOpen = stateMap && stateMap[triggerState];
return (
diff --git a/src/components/forms/FormWorkflow.tsx b/src/components/forms/FormWorkflow.tsx
index e3dc45b042..e87c12a931 100644
--- a/src/components/forms/FormWorkflow.tsx
+++ b/src/components/forms/FormWorkflow.tsx
@@ -1,24 +1,21 @@
-import React, { useEffect, useState } from "react";
-import type { Dispatch } from "react";
-import { ActionRow, Button, FullscreenModal, Hyperlink, Stepper, useToggle } from "@edx/paragon";
-import { Launch } from "@edx/paragon/icons";
-
-// @ts-ignore
-import { FormFields, useFormContext } from "./FormContext.tsx";
-import type { FormFieldValidation, FormContext } from "./FormContext";
-// @ts-ignore
-import { setStepAction, setWorkflowStateAction, FORM_ERROR_MESSAGE, setShowErrorsAction } from "./data/actions.ts";
-import { HELP_CENTER_LINK, SUBMIT_TOAST_MESSAGE } from "../settings/data/constants";
-import { FormActionArguments } from "./data/actions";
-// @ts-ignore
-import UnsavedChangesModal from "../settings/SettingsLMSTab/UnsavedChangesModal.tsx";
-// @ts-ignore
-import ConfigErrorModal from "../settings/ConfigErrorModal.tsx";
-import { channelMapping, pollAsync } from "../../utils";
-// @ts-ignore
-import { InitializeFormArguments, initializeForm } from "./data/reducer.ts";
-
-export const WAITING_FOR_ASYNC_OPERATION = "WAITING FOR ASYNC OPERATION";
+import React, { useEffect, useState } from 'react';
+import type { Dispatch } from 'react';
+import {
+ ActionRow, Button, FullscreenModal, Hyperlink, Stepper, useToggle,
+} from '@edx/paragon';
+import { Launch } from '@edx/paragon/icons';
+
+import { useFormContext } from './FormContext';
+import type { FormFieldValidation, FormContext } from './FormContext';
+import {
+ FORM_ERROR_MESSAGE, FormActionArguments, setStepAction, setWorkflowStateAction, setShowErrorsAction,
+} from './data/actions';
+import { HELP_CENTER_LINK, SUBMIT_TOAST_MESSAGE } from '../settings/data/constants';
+import UnsavedChangesModal from '../settings/SettingsLMSTab/UnsavedChangesModal';
+import ConfigErrorModal from '../settings/ConfigErrorModal';
+import { channelMapping, pollAsync } from '../../utils';
+
+export const WAITING_FOR_ASYNC_OPERATION = 'WAITING FOR ASYNC OPERATION';
export type FormWorkflowErrorHandler = (errMsg: string) => void;
@@ -39,7 +36,7 @@ export type FormWorkflowAwaitHandler = {
export type FormWorkflowButtonConfig = {
buttonText: string;
opensNewWindow: boolean;
- onClick: (args: FormWorkflowHandlerArgs) => Promise;
+ onClick?: (args: FormWorkflowHandlerArgs) => Promise | void;
awaitSuccess?: FormWorkflowAwaitHandler;
};
@@ -50,7 +47,7 @@ export type FormWorkflowStep = {
stepName: string;
formComponent: DynamicComponent;
validations: FormFieldValidation[];
- saveChanges: (
+ saveChanges?: (
formData: FormData,
errHandler: FormWorkflowErrorHandler
) => Promise;
@@ -62,27 +59,24 @@ export type FormWorkflowConfig = {
getCurrentStep: () => FormWorkflowStep;
};
-export type FormWorkflowProps = {
- formWorkflowConfig: FormWorkflowConfig;
+export type FormWorkflowProps = {
+ formWorkflowConfig: FormWorkflowConfig;
onClickOut: (edited: boolean, msg?: string) => null;
- formData: FormData;
dispatch: Dispatch;
- onSubmit: (FormData: FormData) => void;
isStepperOpen: boolean;
};
// Modal container for multi-step forms
-function FormWorkflow({
+const FormWorkflow = ({
formWorkflowConfig,
onClickOut,
isStepperOpen,
dispatch,
-}: FormWorkflowProps) {
+}: FormWorkflowProps) => {
const {
formFields,
currentStep: step,
hasErrors,
- showErrors,
isEdited,
stateMap,
}: FormContext = useFormContext();
@@ -98,7 +92,7 @@ function FormWorkflow({
const setFormError = (msg: string) => {
dispatch(setWorkflowStateAction(FORM_ERROR_MESSAGE, msg));
};
- const clearFormError = () => setFormError("");
+ const clearFormError = () => setFormError('');
const onCancel = () => {
if (isEdited) {
@@ -111,12 +105,12 @@ function FormWorkflow({
const onNext = async () => {
if (hasErrors && step) {
dispatch(setShowErrorsAction({ showErrors: true }));
- //triggers rerender to have errors show up with
- dispatch(setStepAction({ step: step }));
+ // triggers rerender to have errors show up with
+ dispatch(setStepAction({ step }));
} else {
let advance = true;
- if (nextButtonConfig) {
- let newFormFields: FormData = await nextButtonConfig.onClick({
+ if (nextButtonConfig && nextButtonConfig.onClick) {
+ const newFormFields: FormConfigData = await nextButtonConfig.onClick({
formFields,
errHandler: setFormError,
dispatch,
@@ -124,15 +118,14 @@ function FormWorkflow({
});
if (nextButtonConfig?.awaitSuccess) {
advance = await pollAsync(
- () =>
- nextButtonConfig.awaitSuccess?.awaitCondition?.({
- formFields: newFormFields,
- errHandler: setFormError,
- dispatch,
- formFieldsChanged: !!isEdited,
- }),
+ () => nextButtonConfig.awaitSuccess?.awaitCondition?.({
+ formFields: newFormFields,
+ errHandler: setFormError,
+ dispatch,
+ formFieldsChanged: !!isEdited,
+ }),
nextButtonConfig.awaitSuccess.awaitTimeout,
- nextButtonConfig.awaitSuccess.awaitInterval
+ nextButtonConfig.awaitSuccess.awaitInterval,
);
if (!advance && nextButtonConfig?.awaitSuccess) {
nextButtonConfig.awaitSuccess?.onAwaitTimeout?.({
@@ -156,19 +149,23 @@ function FormWorkflow({
}
};
- const stepBody = (step: FormWorkflowStep) => {
- const FormComponent: DynamicComponent = step?.formComponent;
- return (
-
- {/* there's a bug in paragon that reorders the steps when there's an error
+ const stepBody = (currentStep: FormWorkflowStep) => {
+ if (currentStep) {
+ const FormComponent: DynamicComponent = currentStep?.formComponent;
+ return (
+
+ {/* there's a bug in paragon that reorders the steps when there's an error
so we can't comment this back in until that is fixed
hasError={showError}
description={showError ? 'Error' : ''}> */}
- {step && step?.formComponent && }
-
- );
+ {step && step?.formComponent && }
+
+ );
+ }
+ return null;
};
useEffect(() => {
@@ -189,17 +186,19 @@ function FormWorkflow({
close={closeSavedChangesModal}
exitWithoutSaving={() => onClickOut(false)}
saveDraft={async () => {
- await step?.saveChanges(formFields as FormData, setFormError);
- onClickOut(true, SUBMIT_TOAST_MESSAGE);
+ if (step?.saveChanges) {
+ await step?.saveChanges(formFields as FormConfigData, setFormError);
+ onClickOut(true, SUBMIT_TOAST_MESSAGE);
+ }
}}
/>
{formWorkflowConfig.steps && (
({
)}
);
-}
+};
export default FormWorkflow;
diff --git a/src/components/forms/ValidatedFormControl.tsx b/src/components/forms/ValidatedFormControl.tsx
index f642ddbb01..df996ca0f1 100644
--- a/src/components/forms/ValidatedFormControl.tsx
+++ b/src/components/forms/ValidatedFormControl.tsx
@@ -1,19 +1,18 @@
-import React from "react";
-import omit from "lodash/omit";
-import isString from "lodash/isString";
+import React, { useEffect } from 'react';
+import omit from 'lodash/omit';
+import isString from 'lodash/isString';
-import { Form } from "@edx/paragon";
+import { Form } from '@edx/paragon';
-// @ts-ignore
-import { setFormFieldAction } from "./data/actions.ts";
-// @ts-ignore
-import { useFormContext } from "./FormContext.tsx";
+import { setFormFieldAction } from './data/actions';
+import { useFormContext } from './FormContext';
type InheritedParagonControlProps = {
+ autoFocus?: boolean;
className?: string;
type: string;
maxLength?: number;
- floatingLabel: string;
+ floatingLabel?: string;
};
export type ValidatedFormControlProps = {
@@ -25,29 +24,41 @@ export type ValidatedFormControlProps = {
// Control that reads from/writes to form context store
const ValidatedFormControl = (props: ValidatedFormControlProps) => {
- const { showErrors, formFields, errorMap, dispatch } = useFormContext();
+ const {
+ showErrors, formFields, errorMap, dispatch,
+ } = useFormContext();
const onChange = (e: React.ChangeEvent) => {
- dispatch && dispatch(
- setFormFieldAction({ fieldId: props.formId, value: e.target.value })
- );
+ if (dispatch) {
+ dispatch(
+ setFormFieldAction({ fieldId: props.formId, value: e.target.value }),
+ );
+ }
};
const errors = errorMap?.[props.formId];
// Show error message if an error message was part of any detected errors
const showError = errors?.find?.(error => isString(error));
const formControlProps = {
- ...omit(props, ["formId"]),
+ ...omit(props, ['formId']),
onChange,
isInvalid: showErrors && showError,
id: props.formId,
value: formFields && formFields[props.formId],
};
+ // we need to set the original values on load in order to trigger the validation
+ useEffect(() => {
+ if (dispatch) {
+ dispatch(
+ setFormFieldAction({ fieldId: props.formId, value: formControlProps.value }),
+ );
+ }
+ }, [dispatch, props.formId, formControlProps.value]);
return (
<>
- {props.fieldInstructions && (
+ {props.fieldInstructions && !(showError && showErrors) && (
{props.fieldInstructions}
)}
- {showErrors && showError && (
+ {showErrors && showError && (
{showError}
)}
diff --git a/src/components/forms/ValidatedFormRadio.tsx b/src/components/forms/ValidatedFormRadio.tsx
index c7d7d20602..5d8e48ad65 100644
--- a/src/components/forms/ValidatedFormRadio.tsx
+++ b/src/components/forms/ValidatedFormRadio.tsx
@@ -1,13 +1,11 @@
-import React from "react";
-import omit from "lodash/omit";
-import isString from "lodash/isString";
+import React, { ReactElement, useEffect } from 'react';
+import omit from 'lodash/omit';
+import isString from 'lodash/isString';
-import { Form } from "@edx/paragon";
+import { Form } from '@edx/paragon';
-// @ts-ignore
-import { setFormFieldAction } from "./data/actions.ts";
-// @ts-ignore
-import { useFormContext } from "./FormContext.tsx";
+import { setFormFieldAction } from './data/actions';
+import { useFormContext } from './FormContext';
type InheritedParagonRadioProps = {
className?: string;
@@ -18,46 +16,56 @@ export type ValidatedFormRadioProps = {
formId: string;
// Inline Instructions inside form field when blank
fieldInstructions?: string;
- label: string;
- options: string[][]
+ label?: string;
+ options?: string[][];
} & InheritedParagonRadioProps;
const ValidatedFormRadio = (props: ValidatedFormRadioProps) => {
- const { showErrors, formFields, errorMap, dispatch } = useFormContext();
+ const {
+ showErrors, formFields, errorMap, dispatch,
+ } = useFormContext();
const onChange = (e: React.ChangeEvent) => {
- dispatch && dispatch(
- setFormFieldAction({ fieldId: props.formId, value: e.target.value })
- );
+ if (dispatch) {
+ dispatch(setFormFieldAction({ fieldId: props.formId, value: e.target.value }));
+ }
};
const errors = errorMap?.[props.formId];
// Show error message if an error message was part of any detected errors
const showError = errors?.find?.(error => isString(error));
const formRadioProps = {
- ...omit(props, ["formId"]),
+ ...omit(props, ['formId']),
onChange,
isInvalid: showErrors && showError,
id: props.formId,
value: formFields && formFields[props.formId],
};
+ // we need to set the original values on load in order to trigger the validation
+ useEffect(() => {
+ if (dispatch) {
+ dispatch(
+ setFormFieldAction({ fieldId: props.formId, value: formRadioProps.value }),
+ );
+ }
+ }, [dispatch, props.formId, formRadioProps.value]);
- const createOptions = (options: string[][]) => {
- const optionList: any = []
- options?.forEach(option => {
- const radioLabel = option[0]
- const radioValue = option[1]
+ const createOptions = (options: [string, string][]) => {
+ const optionList: ReactElement[] = [];
+ options?.forEach(option => {
+ const radioLabel = option[0];
+ const radioValue = option[1];
optionList.push(
{radioLabel}
-
- )
- })
- return optionList
- }
+ ,
+ );
+ });
+ return optionList;
+ };
return (
<>
- {formRadioProps.label}
+ {formRadioProps.label}
= {
formFields: FormData;
} & FormActionArguments;
@@ -35,7 +35,7 @@ export function updateFormFieldsAction({
};
}
-export const SET_SHOW_ERRORS = "SET SHOW ERRORS";
+export const SET_SHOW_ERRORS = 'SET SHOW ERRORS';
export type SetShowErrorsArguments = {
showErrors: boolean;
} & FormActionArguments;
@@ -45,7 +45,7 @@ export const setShowErrorsAction = ({ showErrors }: SetShowErrorsArguments) => (
showErrors,
});
-export const SET_STEP = "SET STEP";
+export const SET_STEP = 'SET STEP';
export type SetStepArguments = {
step: FormWorkflowStep;
} & FormActionArguments;
@@ -56,9 +56,9 @@ export const setStepAction = ({ step }: SetStepArguments) => ({
});
// Global Workflow state keys
-export const FORM_ERROR_MESSAGE = "FORM ERROR MESSAGE";
+export const FORM_ERROR_MESSAGE = 'FORM ERROR MESSAGE';
-export const SET_WORKFLOW_STATE = "SET WORKFLOW STATE";
+export const SET_WORKFLOW_STATE = 'SET WORKFLOW STATE';
export type SetWorkflowStateArguments = {
name: string;
state: StateType;
@@ -66,7 +66,7 @@ export type SetWorkflowStateArguments = {
// Construct action for setting a flag for the workflow
export function setWorkflowStateAction(
name: string,
- state: StateType
+ state: StateType,
): SetWorkflowStateArguments {
return {
type: SET_WORKFLOW_STATE,
diff --git a/src/components/forms/data/reducer.test.ts b/src/components/forms/data/reducer.test.ts
index 4e12169486..6c3838d6fa 100644
--- a/src/components/forms/data/reducer.test.ts
+++ b/src/components/forms/data/reducer.test.ts
@@ -1,20 +1,14 @@
-import { Component } from "react";
-import type { FormContext, FormFieldValidation } from "../FormContext";
+import { Component } from 'react';
+import type { FormFieldValidation } from '../FormContext';
import {
- FormWorkflowButtonConfig,
- FormWorkflowHandlerArgs,
- FormWorkflowStep,
-} from "../FormWorkflow";
+ FormWorkflowButtonConfig, FormWorkflowHandlerArgs, FormWorkflowStep,
+} from '../FormWorkflow';
import {
- setFormFieldAction,
- updateFormFieldsAction,
- setStepAction,
- setWorkflowStateAction,
- // @ts-ignore
-} from "./actions.ts";
-import type { InitializeFormArguments } from "./reducer";
-// @ts-ignore
-import { FormReducer, initializeForm } from "./reducer.ts";
+ setFormFieldAction, updateFormFieldsAction, setStepAction, setWorkflowStateAction,
+ UPDATE_FORM_FIELDS, SET_FORM_FIELD, SET_WORKFLOW_STATE, SET_STEP,
+} from './actions';
+import type { InitializeFormArguments } from './reducer';
+import { FormReducer, initializeForm } from './reducer';
type DummyFormFields = {
address: string;
@@ -22,16 +16,15 @@ type DummyFormFields = {
};
const dummyButtonConfig: FormWorkflowButtonConfig = {
- buttonText: "Unimportant",
- onClick: ({ formFields }: FormWorkflowHandlerArgs) =>
- Promise.resolve(formFields as DummyFormFields),
+ buttonText: 'Unimportant',
+ onClick: ({ formFields }: FormWorkflowHandlerArgs) => Promise.resolve(formFields as DummyFormFields),
opensNewWindow: false,
};
const createDummyStep = (
index: number,
stepName: string,
- validations: FormFieldValidation[]
+ validations: FormFieldValidation[],
): FormWorkflowStep => ({
index,
stepName,
@@ -43,29 +36,29 @@ const createDummyStep = (
const dummyFormFieldsValidations: FormFieldValidation[] = [
{
- formFieldId: "address",
+ formFieldId: 'address',
validator: (fields) => {
- const address = fields.address;
+ const { address } = fields;
const error = address?.length > 20;
- return error && "Address should be 20 characters or less";
+ return error && 'Address should be 20 characters or less';
},
},
{
- formFieldId: "zip",
+ formFieldId: 'zip',
validator: (fields) => {
- const zip = fields.zip;
+ const { zip } = fields;
const error = zip <= 0;
- return error && "Zip code should be positive nonzero number";
+ return error && 'Zip code should be positive nonzero number';
},
},
];
const steps: FormWorkflowStep[] = [
- createDummyStep(0, "Fill Form", dummyFormFieldsValidations),
- createDummyStep(1, "Review Form", []),
+ createDummyStep(0, 'Fill Form', dummyFormFieldsValidations),
+ createDummyStep(1, 'Review Form', []),
];
-const testFormFields = { address: "123 45th st", zip: 12345 };
+const testFormFields = { address: '123 45th st', zip: 12345 };
const getTestInitializeFormArguments = () => {
const testArgs = {
@@ -76,92 +69,74 @@ const getTestInitializeFormArguments = () => {
return testArgs;
};
-const getTestExpectedState = () => ({
- formFields: testFormFields,
- validations: dummyFormFieldsValidations,
- currentStep: steps[0],
- isEdited: false,
-});
-
-describe("Form reducer tests", () => {
- test("Initialize Workflow State", () => {
- const formFields: DummyFormFields = { address: "123 45th st", zip: 12345 };
+describe('Form reducer tests', () => {
+ test('Initialize Workflow State', () => {
+ const formFields: DummyFormFields = { address: '123 45th st', zip: 12345 };
const initializeFormArguments: InitializeFormArguments = {
formFields: { ...formFields },
validations: dummyFormFieldsValidations,
currentStep: steps[0],
};
- expect(initializeForm({}, initializeFormArguments)).toEqual({
+ expect(initializeForm(initializeFormArguments)).toEqual({
formFields,
currentStep: steps[0],
isEdited: false,
- hasErrors: false,
- errorMap: {},
});
});
- test("Set form field with errors", () => {
- const action = setFormFieldAction({ fieldId: "zip", value: 0 });
+ test('Set form field with errors', () => {
+ const action = setFormFieldAction({ fieldId: 'zip', value: 0 });
const expected = {
- ...getTestExpectedState(),
- formFields: { address: "123 45th st", zip: 0 },
- isEdited: true,
- hasErrors: true,
- errorMap: {
- zip: ["Zip code should be positive nonzero number"],
- },
+ type: SET_FORM_FIELD,
+ fieldId: 'zip',
+ value: 0,
};
expect(
- FormReducer(initializeForm(getTestInitializeFormArguments()), action)
+ FormReducer(action, initializeForm(getTestInitializeFormArguments())),
).toStrictEqual(expected);
});
- test("Update form fields", async () => {
+ test('Update form fields', async () => {
const action = updateFormFieldsAction({
- formFields: { zip: 54321, address: "543 21st st" },
+ formFields: { zip: 54321, address: '543 21st st' },
});
const expected = {
- ...getTestExpectedState(),
- formFields: { zip: 54321, address: "543 21st st" },
- hasErrors: false,
- errorMap: {},
+ formFields: { zip: 54321, address: '543 21st st' },
+ type: UPDATE_FORM_FIELDS,
};
expect(
- FormReducer(initializeForm(getTestInitializeFormArguments()), action)
+ FormReducer(action, initializeForm(getTestInitializeFormArguments())),
).toStrictEqual(expected);
});
- test("Set workflow state", () => {
- const action = setWorkflowStateAction("TEST_STATE", "Test State");
+ test('Set workflow state', () => {
+ const action = setWorkflowStateAction('TEST_STATE', 'Test State');
const expected = {
- ...getTestExpectedState(),
- stateMap: { TEST_STATE: "Test State" },
- hasErrors: false,
- errorMap: {},
+ name: 'TEST_STATE',
+ state: 'Test State',
+ type: SET_WORKFLOW_STATE,
};
expect(
- FormReducer(initializeForm(getTestInitializeFormArguments()), action)
+ FormReducer(action, initializeForm(getTestInitializeFormArguments())),
).toStrictEqual(expected);
});
- test("Set workflow step", () => {
+ test('Set workflow step', () => {
const action = setStepAction({ step: steps[1] });
const expected = {
- ...getTestExpectedState(),
- currentStep: steps[1],
- hasErrors: false,
- errorMap: {},
+ step: steps[1],
+ type: SET_STEP,
};
expect(
- FormReducer(initializeForm(getTestInitializeFormArguments()), action)
+ FormReducer(action, initializeForm(getTestInitializeFormArguments())),
).toStrictEqual(expected);
});
});
diff --git a/src/components/forms/data/reducer.ts b/src/components/forms/data/reducer.ts
index baf0fddb2d..1aa424be21 100644
--- a/src/components/forms/data/reducer.ts
+++ b/src/components/forms/data/reducer.ts
@@ -1,26 +1,23 @@
-import groupBy from "lodash/groupBy";
-import isEmpty from "lodash/isEmpty";
-import keys from "lodash/keys"
-// @ts-ignore
-import { SET_FORM_FIELD, SET_SHOW_ERRORS, SET_STEP, SET_WORKFLOW_STATE, SetShowErrorsArguments, UPDATE_FORM_FIELDS } from "./actions.ts";
+import groupBy from 'lodash/groupBy';
+import isEmpty from 'lodash/isEmpty';
+import keys from 'lodash/keys';
+import {
+ SetShowErrorsArguments, SET_FORM_FIELD, SET_SHOW_ERRORS, SET_STEP, SET_WORKFLOW_STATE, UPDATE_FORM_FIELDS,
+} from './actions';
import type {
- FormActionArguments,
- SetFormFieldArguments,
- SetStepArguments,
- SetWorkflowStateArguments,
- UpdateFormFieldArguments,
-} from "./actions";
-import type { FormContext, FormFieldValidation } from "../FormContext";
-import type { FormWorkflowStep } from "../FormWorkflow";
+ FormActionArguments, SetFormFieldArguments, SetStepArguments, SetWorkflowStateArguments, UpdateFormFieldArguments,
+} from './actions';
+import { FormContext, FormFields, FormFieldValidation } from '../FormContext';
+import type { FormWorkflowStep } from '../FormWorkflow';
const processFormErrors = (state: FormContext): FormContext => {
// Get all form errors
- let errorState: Pick = {
+ let errorState: Pick = {
hasErrors: false,
errorMap: {},
};
- if (typeof state.currentStep?.validations == "boolean") {
- errorState = {hasErrors: state.currentStep?.validations, errorMap: {}};
+ if (typeof state.currentStep?.validations === 'boolean') {
+ errorState = { hasErrors: state.currentStep?.validations, errorMap: {} };
} else if (state.formFields) {
// Generate list of errors with their formFieldIds
// const formFieldsCopy = {...state.formFields};
@@ -32,17 +29,17 @@ const processFormErrors = (state: FormContext): FormContext => {
.filter((err) => !!err[1]);
if (!isEmpty(errors)) {
// Convert to map of errors indexed by formFieldId
- let errorMap = groupBy(errors, (error) => error[0]);
+ const errorMap = groupBy(errors, (error) => error[0]);
keys(errorMap).forEach((key) => {
// Remove unneeded key from values now that we're grouping by it.
errorMap[key] = errorMap[key].map(kvp => kvp[1]);
- })
+ });
errorState = {
hasErrors: true,
errorMap,
};
} else {
- errorState = {hasErrors: false, errorMap: {}};
+ errorState = { hasErrors: false, errorMap: {} };
}
}
@@ -54,16 +51,17 @@ const processFormErrors = (state: FormContext): FormContext => {
export type InitializeFormArguments = {
formFields: FormFields;
- validations: FormFieldValidation[];
+ validations?: FormFieldValidation[];
currentStep: FormWorkflowStep;
};
-export function initializeForm(
+
+export function initializeFormImpl(
state: FormContext,
- action: InitializeFormArguments
-) {
+ action: InitializeFormArguments,
+): FormContext {
const additions: Pick<
- FormContext,
- "isEdited" | "formFields" | "currentStep"
+ FormContext,
+ 'isEdited' | 'formFields' | 'currentStep'
> = { isEdited: false };
if (action?.formFields) {
additions.formFields = action.formFields;
@@ -77,12 +75,30 @@ export function initializeForm(
};
}
-export function FormReducer(
+export function initializeForm(action: InitializeFormArguments) {
+ const initialFormState: Pick<
+ FormContext,
+ 'isEdited' | 'formFields' | 'currentStep'
+ > = { isEdited: false };
+ if (action?.formFields) {
+ initialFormState.formFields = action.formFields;
+ }
+ if (action?.currentStep) {
+ initialFormState.currentStep = action.currentStep;
+ }
+ return {
+ ...initialFormState,
+ };
+}
+
+export type FormReducerType = (FormActionArguments, FormContext) => FormContext;
+
+export const FormReducer: FormReducerType = (
state: FormContext = { formFields: {} },
- action: FormActionArguments
-) {
+ action: FormActionArguments,
+) => {
switch (action.type) {
- case SET_FORM_FIELD:
+ case SET_FORM_FIELD: {
const setFormFieldArgs = action as SetFormFieldArguments;
let newState = state ? { ...state } : { formFields: {} };
if (newState.formFields) {
@@ -93,23 +109,22 @@ export function FormReducer(
isEdited: true,
});
return newState;
- case UPDATE_FORM_FIELDS:
- const updateFormFieldsArgs =
- action as UpdateFormFieldArguments;
+ } case UPDATE_FORM_FIELDS: {
+ const updateFormFieldsArgs = action as UpdateFormFieldArguments;
return {
...state,
formFields: updateFormFieldsArgs.formFields,
isEdited: false,
hasErrors: false,
- errorMap: {}
+ errorMap: {},
};
- case SET_STEP:
+ } case SET_STEP: {
const setStepArgs = action as SetStepArguments;
return { ...state, currentStep: setStepArgs.step };
- case SET_SHOW_ERRORS:
+ } case SET_SHOW_ERRORS: {
const SetShowErrorsArgs = action as SetShowErrorsArguments;
return { ...state, showErrors: SetShowErrorsArgs.showErrors };
- case SET_WORKFLOW_STATE:
+ } case SET_WORKFLOW_STATE: {
const setStateArgs = action as SetWorkflowStateArguments;
const oldStateMap = state.stateMap || {};
const newStateMap = {
@@ -117,7 +132,7 @@ export function FormReducer(
[setStateArgs.name]: setStateArgs.state,
};
return { ...state, stateMap: newStateMap };
- default:
+ } default:
return state;
}
-}
+};
diff --git a/src/components/forms/tests/FormWaitModal.test.tsx b/src/components/forms/tests/FormWaitModal.test.tsx
index 5cbebe888f..1ad0c514c7 100644
--- a/src/components/forms/tests/FormWaitModal.test.tsx
+++ b/src/components/forms/tests/FormWaitModal.test.tsx
@@ -3,10 +3,8 @@ import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { screen, render } from '@testing-library/react';
-// @ts-ignore
-import FormWaitModal from '../FormWaitModal.tsx';
-// @ts-ignore
-import FormContextProvider from '../FormContext.tsx';
+import FormWaitModal from '../FormWaitModal';
+import FormContextProvider from '../FormContext';
const FormWaitModalWrapper = ({
mockDispatch,
@@ -14,6 +12,7 @@ const FormWaitModalWrapper = ({
triggerState,
header,
text,
+ onClose,
}) => {
const contextValue = {
stateMap: { SHOW_MODAL: showModal },
@@ -25,6 +24,7 @@ const FormWaitModalWrapper = ({
>
', () => {
it('renders if flag set', () => {
const mockDispatch = jest.fn();
+ const mockOnClose = jest.fn();
render(
', () => {
triggerState="SHOW_MODAL"
header="Test FormWaitModal"
text="Some text to test with"
+ onClose={mockOnClose}
/>,
);
@@ -52,6 +54,7 @@ describe('', () => {
});
it('does not render if flag not set', () => {
const mockDispatch = jest.fn();
+ const mockOnClose = jest.fn();
render(
', () => {
triggerState="SHOW_MODAL"
header="Test FormWaitModal"
text="Some text to test with"
+ onClose={mockOnClose}
/>,
);
diff --git a/src/components/forms/tests/ValidatedFormControl.test.tsx b/src/components/forms/tests/ValidatedFormControl.test.tsx
index 734a20f016..e3df1207c9 100644
--- a/src/components/forms/tests/ValidatedFormControl.test.tsx
+++ b/src/components/forms/tests/ValidatedFormControl.test.tsx
@@ -1,16 +1,13 @@
/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { screen, render } from '@testing-library/react';
import userEvent, { TargetElement } from '@testing-library/user-event';
-// @ts-ignore
-import FormContextProvider, { FormFieldValidation } from '../FormContext.tsx';
+import FormContextProvider from '../FormContext';
import type { FormContext } from '../FormContext';
-// @ts-ignore
-import ValidatedFormControl from '../ValidatedFormControl.tsx';
-import type {ValidatedFormControlProps} from '../ValidatedFormControl';
-import { FormWorkflowStep } from '../FormWorkflow.js';
+import ValidatedFormControl from '../ValidatedFormControl';
+import type { ValidatedFormControlProps } from '../ValidatedFormControl';
type ValidatedFormControlWrapperProps = {
mockDispatch: () => void;
diff --git a/src/components/forms/tests/ValidatedFormRadio.test.tsx b/src/components/forms/tests/ValidatedFormRadio.test.tsx
index 7ca7f29d70..f98d770ee5 100644
--- a/src/components/forms/tests/ValidatedFormRadio.test.tsx
+++ b/src/components/forms/tests/ValidatedFormRadio.test.tsx
@@ -2,14 +2,11 @@
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { screen, render } from '@testing-library/react';
-import userEvent, { TargetElement } from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
-// @ts-ignore
-import FormContextProvider from '../FormContext.tsx';
+import FormContextProvider from '../FormContext';
import type { FormContext } from '../FormContext';
-// @ts-ignore
-import ValidatedFormRadio from '../ValidatedFormRadio.tsx';
-import { ValidatedFormRadioProps } from '../ValidatedFormRadio';
+import ValidatedFormRadio, { ValidatedFormRadioProps } from '../ValidatedFormRadio';
type ValidatedFormRadioWrapperProps = {
mockDispatch: () => void;
@@ -18,14 +15,13 @@ type ValidatedFormRadioWrapperProps = {
formId: string;
} & Partial;
-
const ValidatedFormRadioWrapper = ({
mockDispatch,
formId,
formValue,
fieldInstructions,
label,
- options,
+ options,
formError,
}: ValidatedFormRadioWrapperProps) => {
let contextValue: FormContext = {
@@ -42,7 +38,6 @@ const ValidatedFormRadioWrapper = ({
>
', () => {
mockDispatch={mockDispatch}
formId="TEST_FORM_FIELD"
label="Test Label"
- options={[["Label1", "1"],["Label2", "2"]]}
+ options={[['Label1', '1'], ['Label2', '2']]}
fieldInstructions="Test Instructions"
/>,
);
@@ -73,11 +68,11 @@ describe('', () => {
mockDispatch={mockDispatch}
formId="TEST_FORM_FIELD"
label="Test Label"
- options={[["Label1", "1"],["Label2", "2"]]}
+ options={[['Label1', '1'], ['Label2', '2']]}
fieldInstructions="Test Instructions"
/>,
);
- userEvent.click(screen.getByText('Label1'))
+ userEvent.click(screen.getByText('Label1'));
expect(mockDispatch).toBeCalledWith({ type: 'SET FORM FIELD', fieldId: 'TEST_FORM_FIELD', value: '1' });
});
it('renders with error populated from context', () => {
@@ -87,7 +82,7 @@ describe('', () => {
mockDispatch={mockDispatch}
formId="TEST_FORM_FIELD"
label="Test Label"
- options={[["Label1", "1"],["Label2", "2"]]}
+ options={[['Label1', '1'], ['Label2', '2']]}
formError="Something is wrong with this field"
/>,
);
diff --git a/src/components/settings/ConfigError.jsx b/src/components/settings/ConfigError.jsx
deleted file mode 100644
index 1a7162f87c..0000000000
--- a/src/components/settings/ConfigError.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
- AlertModal, ActionRow, Button, Hyperlink,
-} from '@edx/paragon';
-import { HELP_CENTER_LINK } from './data/constants';
-
-const cardText = 'We were unable to process your request to submit a new LMS configuration. Please try submitting again or contact support for help.';
-
-// TODO: Remove once use has been completely supplanted by ConfigErrorModal
-const ConfigError = ({
- isOpen,
- close,
- configTextOverride,
-}) => (
-
-
-
-
- )}
- >
- {configTextOverride && (
-
- {configTextOverride}
-
- )}
- {!configTextOverride && (
-
- {cardText}
-
- )}
-
-);
-
-ConfigError.defaultProps = {
- configTextOverride: '',
-};
-
-ConfigError.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- close: PropTypes.func.isRequired,
- configTextOverride: PropTypes.string,
-};
-export default ConfigError;
diff --git a/src/components/settings/ConfigError.test.jsx b/src/components/settings/ConfigError.test.jsx
deleted file mode 100644
index e48b539bac..0000000000
--- a/src/components/settings/ConfigError.test.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import ConfigError from './ConfigError';
-
-const mockClose = jest.fn();
-
-const overrideText = 'ayylmao';
-
-describe('', () => {
- test('renders Error Modal', () => {
- render(
- ,
- );
- expect(screen.queryByText('We were unable to process your request to submit a new LMS configuration. Please try submitting again or contact support for help.'));
- expect(screen.queryByText('Contact Support'));
- });
- test('renders Error Modal with text override', () => {
- render(
- ,
- );
- expect(screen.queryByText('ayylmao'));
- expect(screen.queryByText('Contact Support'));
- });
-});
diff --git a/src/components/settings/ConfigErrorModal.test.tsx b/src/components/settings/ConfigErrorModal.test.tsx
index fad080dbee..4305ff3a97 100644
--- a/src/components/settings/ConfigErrorModal.test.tsx
+++ b/src/components/settings/ConfigErrorModal.test.tsx
@@ -2,8 +2,7 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
-// @ts-ignore
-import ConfigErrorModal from './ConfigErrorModal.tsx';
+import ConfigErrorModal from './ConfigErrorModal';
const mockClose = jest.fn();
diff --git a/src/components/settings/ConfigErrorModal.tsx b/src/components/settings/ConfigErrorModal.tsx
index 834f786e23..150983eb87 100644
--- a/src/components/settings/ConfigErrorModal.tsx
+++ b/src/components/settings/ConfigErrorModal.tsx
@@ -17,8 +17,7 @@ const ConfigErrorModal = ({
isOpen,
close,
configTextOverride,
-}: ConfigErrorProps) => {
- return (
+}: ConfigErrorProps) => (
- {/* @ts-ignore */}
@@ -45,6 +43,6 @@ const ConfigErrorModal = ({
)}
-)};
+);
export default ConfigErrorModal;
diff --git a/src/components/settings/SettingsLMSTab/ConfigModal.jsx b/src/components/settings/SettingsLMSTab/ConfigModal.jsx
deleted file mode 100644
index fcc4fbbbef..0000000000
--- a/src/components/settings/SettingsLMSTab/ConfigModal.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ModalDialog, ActionRow, Button } from '@edx/paragon';
-
-const MODAL_TITLE = 'Do you want to save your work?';
-const MODAL_TEXT = 'Your changes will be lost without saving.';
-
-// will have to pass in individual saveDraft method and config when
-// drafting is allowed
-// TODO: Delete once UnsavedChangesModal fully replaces it
-const ConfigModal = ({
- isOpen, close, onClick, saveDraft,
-}) => (
-
-
-
- {MODAL_TITLE}
-
-
-
- {MODAL_TEXT}
-
-
-
-
-
-
-
-
-);
-
-ConfigModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- close: PropTypes.func.isRequired,
- onClick: PropTypes.func.isRequired,
- saveDraft: PropTypes.func.isRequired,
-};
-export default ConfigModal;
diff --git a/src/components/settings/SettingsLMSTab/ErrorReporting/ContentMetadataTable.jsx b/src/components/settings/SettingsLMSTab/ErrorReporting/ContentMetadataTable.jsx
index 1b62df38e6..c2cba45a7c 100644
--- a/src/components/settings/SettingsLMSTab/ErrorReporting/ContentMetadataTable.jsx
+++ b/src/components/settings/SettingsLMSTab/ErrorReporting/ContentMetadataTable.jsx
@@ -1,6 +1,7 @@
import _ from 'lodash';
import React, { useCallback, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
+
import { DataTable, TextFilter } from '@edx/paragon';
import { logError } from '@edx/frontend-platform/logging';
import LmsApiService from '../../../../data/services/LmsApiService';
diff --git a/src/components/settings/SettingsLMSTab/ErrorReporting/DownloadCsvButton.jsx b/src/components/settings/SettingsLMSTab/ErrorReporting/DownloadCsvButton.jsx
index 4f60c5dca5..7867a2fbf6 100644
--- a/src/components/settings/SettingsLMSTab/ErrorReporting/DownloadCsvButton.jsx
+++ b/src/components/settings/SettingsLMSTab/ErrorReporting/DownloadCsvButton.jsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { saveAs } from 'file-saver';
import PropTypes from 'prop-types';
+
import {
Toast, StatefulButton, Icon, Spinner, useToggle,
} from '@edx/paragon';
diff --git a/src/components/settings/SettingsLMSTab/ErrorReporting/ErrorReportingTable.jsx b/src/components/settings/SettingsLMSTab/ErrorReporting/ErrorReportingTable.jsx
index d2027111d8..1f9f8d1b4f 100644
--- a/src/components/settings/SettingsLMSTab/ErrorReporting/ErrorReportingTable.jsx
+++ b/src/components/settings/SettingsLMSTab/ErrorReporting/ErrorReportingTable.jsx
@@ -1,8 +1,6 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import {
- Tab, Tabs,
-} from '@edx/paragon';
+import { Tab, Tabs } from '@edx/paragon';
import ContentMetadataTable from './ContentMetadataTable';
import LearnerMetadataTable from './LearnerMetadataTable';
diff --git a/src/components/settings/SettingsLMSTab/ErrorReporting/SyncHistory.jsx b/src/components/settings/SettingsLMSTab/ErrorReporting/SyncHistory.jsx
index 11d2707ea6..f3516e6630 100644
--- a/src/components/settings/SettingsLMSTab/ErrorReporting/SyncHistory.jsx
+++ b/src/components/settings/SettingsLMSTab/ErrorReporting/SyncHistory.jsx
@@ -9,8 +9,8 @@ import { CheckCircle, Error, Sync } from '@edx/paragon/icons';
import { getStatus } from '../utils';
import { getTimeAgo } from './utils';
import handleErrors from '../../utils';
+import ConfigErrorModal from '../../ConfigErrorModal';
import { channelMapping, formatTimestamp } from '../../../../utils';
-import ConfigError from '../../ConfigError';
import LmsApiService from '../../../../data/services/LmsApiService';
import {
@@ -207,7 +207,7 @@ const SyncHistory = () => {
Once deleted, any saved integration data will be lost.
- ({
+ ...jest.requireActual('../../../../../utils'),
+ getChannelMap: jest.fn(),
+}));
+
+getChannelMap.mockReturnValue(channelMapReturn);
+
+const enterpriseId = 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee';
+const enterpriseSlug = 'test-slug';
+const enableSamlConfigurationScreen = false;
+const identityProvider = '';
+
+const initialState = {
+ portalConfiguration: {
+ enterpriseId, enterpriseSlug, enableSamlConfigurationScreen, identityProvider,
+ },
+};
+
+const existingConfigData = {
+ data: [{
+ channelCode: 'BLACKBOARD',
+ id: 1,
+ isValid: [{ missing: [] }, { incorrect: [] }],
+ active: true,
+ displayName: 'squish',
+ enterpriseCustomer: enterpriseId,
+ lastSyncAttemptedAt: '2022-11-22T20:59:56Z',
+ lastContentSyncAttemptedAt: '2022-11-22T20:59:56Z',
+ lastLearnerSyncAttemptedAt: null,
+ lastSyncErroredAt: null,
+ lastContentSyncErroredAt: null,
+ lastLearnerSyncErroredAt: null,
+ lastModifiedAt: '2023-05-05T14:51:53.473144Z',
+ }],
+};
+
+const configData = {
+ data: {
+ channelCode: 'BLACKBOARD',
+ id: 1,
+ isValid: [{ missing: [] }, { incorrect: [] }],
+ active: true,
+ displayName: 'foobar',
+ enterpriseCustomer: enterpriseId,
+ lastSyncAttemptedAt: '2022-11-22T20:59:56Z',
+ lastContentSyncAttemptedAt: '2022-11-22T20:59:56Z',
+ lastLearnerSyncAttemptedAt: null,
+ lastSyncErroredAt: null,
+ lastContentSyncErroredAt: null,
+ lastLearnerSyncErroredAt: null,
+ lastModifiedAt: '2023-05-05T14:51:53.473144Z',
+ },
+};
+
+const mockStore = configureMockStore([thunk]);
+window.open = jest.fn();
+
+describe('Test sync history page full flow', () => {
+ afterEach(() => {
+ cleanup();
+ jest.clearAllMocks();
+ });
+
+ test('Test opening sync history page', async () => {
+ getAuthenticatedUser.mockReturnValue({
+ administrator: true,
+ });
+ features.FEATURE_INTEGRATION_REPORTING = true;
+
+ const mockFetchSingleConfig = jest.spyOn(LmsApiService, 'fetchSingleBlackboardConfig');
+ const mockFetchExistingConfigs = jest.spyOn(LmsApiService, 'fetchEnterpriseCustomerIntegrationConfigs');
+ mockFetchSingleConfig.mockResolvedValue(configData);
+ mockFetchExistingConfigs.mockResolvedValue(existingConfigData);
+
+ const SettingsLMSWrapper = () => (
+
+
+
+
+
+ );
+
+ renderWithRouter();
+ const skeleton = screen.getAllByTestId('skeleton');
+ await waitForElementToBeRemoved(skeleton);
+ await (expect(screen.getByText('squish')));
+
+ const syncHistoryButton = screen.getByText('View sync history');
+ expect(syncHistoryButton.getAttribute('href')).toBe(`/${configData.data.channelCode}/${configData.data.id}`);
+ });
+ test('Test configure action from sync history', async () => {
+ const mockFetchSingleConfig = jest.spyOn(LmsApiService, 'fetchSingleBlackboardConfig');
+ mockFetchSingleConfig.mockResolvedValue(configData);
+
+ const location = {
+ ...window.location,
+ search: `?lms=${configData.data.channelCode}&id=${configData.data.id}`,
+ };
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: location,
+ });
+
+ const SettingsLMSWrapper = () => (
+
+
+
+
+
+ );
+
+ renderWithRouter();
+ expect(window.location.search).toEqual(`?lms=${configData.data.channelCode}&id=${configData.data.id}`);
+ await waitFor(() => expect(mockFetch).toHaveBeenCalledWith('1'));
+ // opens stepper
+ await waitFor(() => expect(screen.getByText('New learning platform integration')));
+ screen.debug(undefined, 100000);
+ });
+});
diff --git a/src/components/settings/SettingsLMSTab/ErrorReporting/utils.jsx b/src/components/settings/SettingsLMSTab/ErrorReporting/utils.jsx
index b0c807d277..ee5c9643f2 100644
--- a/src/components/settings/SettingsLMSTab/ErrorReporting/utils.jsx
+++ b/src/components/settings/SettingsLMSTab/ErrorReporting/utils.jsx
@@ -1,10 +1,6 @@
import * as timeago from 'timeago.js';
-import {
- Hyperlink, OverlayTrigger, Popover,
-} from '@edx/paragon';
-import {
- CheckCircle, Error, Sync,
-} from '@edx/paragon/icons';
+import { Hyperlink, OverlayTrigger, Popover } from '@edx/paragon';
+import { CheckCircle, Error, Sync } from '@edx/paragon/icons';
timeago.register('time-locale');
/**
diff --git a/src/components/settings/SettingsLMSTab/ExistingCard.jsx b/src/components/settings/SettingsLMSTab/ExistingCard.jsx
index 773d3397b2..1a3ae049e1 100644
--- a/src/components/settings/SettingsLMSTab/ExistingCard.jsx
+++ b/src/components/settings/SettingsLMSTab/ExistingCard.jsx
@@ -1,10 +1,9 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
+import { useRouteMatch } from 'react-router-dom';
import {
- useRouteMatch,
-} from 'react-router-dom';
-import {
- ActionRow, AlertModal, Badge, Button, Card, Dropdown, Icon, IconButton, Image, OverlayTrigger, Popover,
+ ActionRow, AlertModal, Badge, Button, Card, Dropdown, Icon,
+ IconButton, Image, OverlayTrigger, Popover,
} from '@edx/paragon';
import {
CheckCircle, Error, MoreVert, Sync,
diff --git a/src/components/settings/SettingsLMSTab/ExistingLMSCardDeck.jsx b/src/components/settings/SettingsLMSTab/ExistingLMSCardDeck.jsx
index a34236d0db..b0434a9926 100644
--- a/src/components/settings/SettingsLMSTab/ExistingLMSCardDeck.jsx
+++ b/src/components/settings/SettingsLMSTab/ExistingLMSCardDeck.jsx
@@ -1,11 +1,9 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import {
- CardGrid, useToggle,
-} from '@edx/paragon';
+import { CardGrid, useToggle } from '@edx/paragon';
import { getStatus } from './utils';
-import ConfigError from '../ConfigError';
import ExistingCard from './ExistingCard';
+import ConfigErrorModal from '../ConfigErrorModal';
const ExistingLMSCardDeck = ({
configData,
@@ -44,7 +42,7 @@ const ExistingLMSCardDeck = ({
return (
-
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx
index 36011111fd..cb3e9252a1 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx
@@ -1,48 +1,17 @@
-import { useEffect } from "react";
import _ from 'lodash';
-import { snakeCaseDict } from "../../../../../utils";
+import { snakeCaseDict } from '../../../../../utils';
import {
- BLACKBOARD_TYPE,
- LMS_CONFIG_OAUTH_POLLING_INTERVAL,
- LMS_CONFIG_OAUTH_POLLING_TIMEOUT,
-} from "../../../data/constants";
-// @ts-ignore
-import ConfigActivatePage from "../ConfigBasePages/ConfigActivatePage.tsx";
-// @ts-ignore
-import BlackboardConfigAuthorizePage, { validations } from "./BlackboardConfigAuthorizePage.tsx";
+ BLACKBOARD_TYPE, LMS_CONFIG_OAUTH_POLLING_INTERVAL, LMS_CONFIG_OAUTH_POLLING_TIMEOUT,
+} from '../../../data/constants';
+import ConfigActivatePage from '../ConfigBasePages/ConfigActivatePage';
+import BlackboardConfigAuthorizePage, { validations } from './BlackboardConfigAuthorizePage';
import type {
- FormWorkflowButtonConfig,
- FormWorkflowConfig,
- FormWorkflowStep,
- FormWorkflowHandlerArgs,
- // @ts-ignore
-} from "../../../../forms/FormWorkflow.tsx";
-// @ts-ignore
-import { activateConfig, afterSubmitHelper, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper, onTimeoutHelper } from "../utils.tsx";
-
-export type BlackboardConfigCamelCase = {
- lms: string;
- blackboardAccountId: string;
- blackboardBaseUrl: string;
- displayName: string;
- clientId: string;
- clientSecret: string;
- id: string;
- active: boolean;
- uuid: string;
- refreshToken: string;
-};
-
-export type BlackboardConfigSnakeCase = {
- lms: string;
- blackboard_base_url: string;
- display_name: string;
- id: string;
- active: boolean;
- uuid: string;
- enterprise_customer: string;
- refresh_token: string;
-};
+ FormWorkflowButtonConfig, FormWorkflowConfig, FormWorkflowStep, FormWorkflowHandlerArgs,
+} from '../../../../forms/FormWorkflow';
+import { BlackboardConfigCamelCase, BlackboardConfigSnakeCase } from './BlackboardTypes';
+import {
+ activateConfig, afterSubmitHelper, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper, onTimeoutHelper,
+} from '../utils';
export type BlackboardFormConfigProps = {
enterpriseCustomerUuid: string;
@@ -61,16 +30,15 @@ export const BlackboardFormConfig = ({
existingConfigNames,
channelMap,
}: BlackboardFormConfigProps): FormWorkflowConfig => {
-
const saveChanges = async (
formFields: BlackboardConfigCamelCase,
- errHandler: (errMsg: string) => void
+ errHandler: (errMsg: string) => void,
) => {
- const transformedConfig: BlackboardConfigSnakeCase = snakeCaseDict(
- formFields
+ const snakeConfig: BlackboardConfigSnakeCase = snakeCaseDict(
+ formFields,
) as BlackboardConfigSnakeCase;
- transformedConfig.enterprise_customer = enterpriseCustomerUuid;
- return handleSaveHelper(transformedConfig, existingData, formFields, onSubmit, BLACKBOARD_TYPE, channelMap, errHandler);
+ snakeConfig.enterprise_customer = enterpriseCustomerUuid;
+ return handleSaveHelper(snakeConfig, existingData, formFields, onSubmit, BLACKBOARD_TYPE, channelMap, errHandler);
};
const handleSubmit = async ({
@@ -79,14 +47,23 @@ export const BlackboardFormConfig = ({
errHandler,
dispatch,
}: FormWorkflowHandlerArgs) => {
- let currentFormFields = formFields;
+ const currentFormFields = formFields;
const transformedConfig: BlackboardConfigSnakeCase = snakeCaseDict(
- formFields
+ formFields,
) as BlackboardConfigSnakeCase;
transformedConfig.enterprise_customer = enterpriseCustomerUuid;
return handleSubmitHelper(
- enterpriseCustomerUuid, transformedConfig, existingData, onSubmit, formFieldsChanged,
- currentFormFields, BLACKBOARD_TYPE, channelMap, errHandler, dispatch);
+ enterpriseCustomerUuid,
+ transformedConfig,
+ existingData,
+ onSubmit,
+ formFieldsChanged,
+ currentFormFields,
+ BLACKBOARD_TYPE,
+ channelMap,
+ dispatch,
+ errHandler,
+ );
};
const awaitAfterSubmit = async ({
@@ -94,7 +71,7 @@ export const BlackboardFormConfig = ({
errHandler,
dispatch,
}: FormWorkflowHandlerArgs) => {
- const response = await afterSubmitHelper(BLACKBOARD_TYPE, formFields, channelMap, errHandler, dispatch);
+ const response = await afterSubmitHelper(BLACKBOARD_TYPE, formFields, channelMap, dispatch, errHandler);
return response;
};
@@ -108,23 +85,22 @@ export const BlackboardFormConfig = ({
formFields,
errHandler,
}: FormWorkflowHandlerArgs) => {
- activateConfig(enterpriseCustomerUuid, channelMap, BLACKBOARD_TYPE, formFields?.id, handleCloseClick, errHandler);
+ activateConfig(enterpriseCustomerUuid, channelMap, BLACKBOARD_TYPE, handleCloseClick, formFields?.id, errHandler);
return formFields;
};
const activatePage = () => ConfigActivatePage(BLACKBOARD_TYPE);
-
const steps: FormWorkflowStep[] = [
{
index: 1,
formComponent: BlackboardConfigAuthorizePage,
validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
- stepName: "Authorize",
+ stepName: 'Configure',
saveChanges,
nextButtonConfig: (formFields: BlackboardConfigCamelCase) => {
let config = {
- buttonText: "Authorize",
+ buttonText: 'Authorize',
opensNewWindow: false,
onClick: handleSubmit,
};
@@ -138,7 +114,7 @@ export const BlackboardFormConfig = ({
awaitCondition: awaitAfterSubmit,
awaitInterval: LMS_CONFIG_OAUTH_POLLING_INTERVAL,
awaitTimeout: LMS_CONFIG_OAUTH_POLLING_TIMEOUT,
- onAwaitTimeout: onAwaitTimeout,
+ onAwaitTimeout,
},
},
};
@@ -150,16 +126,16 @@ export const BlackboardFormConfig = ({
index: 2,
formComponent: activatePage,
validations: [],
- stepName: "Activate",
+ stepName: 'Activate',
saveChanges,
nextButtonConfig: () => {
- let config = {
- buttonText: "Activate",
+ const config = {
+ buttonText: 'Activate',
opensNewWindow: false,
onClick: activate,
};
return config as FormWorkflowButtonConfig;
- }
+ },
},
];
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx
index 188d1976f6..3d3555ed02 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx
@@ -1,26 +1,22 @@
-import React, { useEffect, useState } from "react";
-import { Alert, Container, Form, Image } from "@edx/paragon";
-import { Info } from "@edx/paragon/icons";
+import React from 'react';
+import {
+ Alert, Container, Form, Image,
+} from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
-// @ts-ignore
-import ValidatedFormControl from "../../../../forms/ValidatedFormControl.tsx";
-import { BLACKBOARD_TYPE, INVALID_LINK, INVALID_NAME } from "../../../data/constants";
-import { channelMapping, urlValidation } from "../../../../../utils";
-import type { FormFieldValidation } from "../../../../forms/FormContext";
-// @ts-ignore
-import { useFormContext } from "../../../../forms/FormContext.tsx";
-// @ts-ignore
-import FormWaitModal from "../../../../forms/FormWaitModal.tsx";
-// @ts-ignore
-import { WAITING_FOR_ASYNC_OPERATION } from "../../../../forms/FormWorkflow.tsx";
-// @ts-ignore
-import { setWorkflowStateAction } from "../../../../forms/data/actions.ts";
-// @ts-ignore
-import { LMS_AUTHORIZATION_FAILED } from "../utils.tsx";
+import ValidatedFormControl from '../../../../forms/ValidatedFormControl';
+import { BLACKBOARD_TYPE, INVALID_LINK, INVALID_NAME } from '../../../data/constants';
+import { channelMapping, urlValidation } from '../../../../../utils';
+import type { FormFieldValidation } from '../../../../forms/FormContext';
+import { useFormContext } from '../../../../forms/FormContext';
+import FormWaitModal from '../../../../forms/FormWaitModal';
+import { WAITING_FOR_ASYNC_OPERATION } from '../../../../forms/FormWorkflow';
+import { setWorkflowStateAction } from '../../../../forms/data/actions';
+import { LMS_AUTHORIZATION_FAILED } from '../utils';
export const formFieldNames = {
- DISPLAY_NAME: "displayName",
- BLACKBOARD_BASE_URL: "blackboardBaseUrl",
+ DISPLAY_NAME: 'displayName',
+ BLACKBOARD_BASE_URL: 'blackboardBaseUrl',
};
export const validationMessages = {
@@ -63,15 +59,10 @@ export const validations: FormFieldValidation[] = [
// Settings page of Blackboard LMS config workflow
const BlackboardConfigAuthorizePage = () => {
const { formFields, dispatch, stateMap } = useFormContext();
- const [isExisting, setIsExisting] = useState(false);
- useEffect(() => {
- if (formFields?.id) {
- setIsExisting(true);
- }
- }, []);
+
return (
-
-
+
+
{
Authorize connection to Blackboard
-
+
+);
export default DegreedConfigEnablePage;
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedTypes.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedTypes.tsx
new file mode 100644
index 0000000000..8d6f6543ee
--- /dev/null
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedTypes.tsx
@@ -0,0 +1,25 @@
+export type DegreedConfigCamelCase = {
+ lms: string;
+ displayName: string;
+ clientId: string;
+ clientSecret: string;
+ degreedBaseUrl: string;
+ degreedTokenFetchBaseUrl: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+};
+
+export type DegreedConfigSnakeCase = {
+ lms: string;
+ display_name: string;
+ client_id: string;
+ client_secret: string;
+ degreed_base_url: string;
+ degreed_token_fetch_base_url: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+ enterprise_customer: string;
+ refresh_token: string;
+};
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx
index e63f833664..c5253ff735 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx
@@ -1,42 +1,14 @@
-import { snakeCaseDict } from "../../../../../utils";
-import { MOODLE_TYPE } from "../../../data/constants";
-// @ts-ignore
-import ConfigActivatePage from "../ConfigBasePages/ConfigActivatePage.tsx";
- // @ts-ignore
-import MoodleConfigEnablePage, { validations } from "./MoodleConfigEnablePage.tsx";
+import { snakeCaseDict } from '../../../../../utils';
+import { MOODLE_TYPE } from '../../../data/constants';
+import ConfigActivatePage from '../ConfigBasePages/ConfigActivatePage';
+import MoodleConfigEnablePage, { validations } from './MoodleConfigEnablePage';
import type {
FormWorkflowButtonConfig, FormWorkflowConfig, FormWorkflowStep, FormWorkflowHandlerArgs,
- // @ts-ignore
-} from "../../../../forms/FormWorkflow.tsx";
-// @ts-ignore
-import { activateConfig, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper } from "../utils.tsx";
-
-export type MoodleConfigCamelCase = {
- lms: string;
- displayName: string;
- moodleBaseUrl: string;
- serviceShortName: string;
- token: string;
- username: string;
- password: string;
- id: string;
- active: boolean;
- uuid: string;
-};
-
-export type MoodleConfigSnakeCase = {
- lms: string;
- display_name: string;
- moodle_base_url: string;
- service_short_name: string;
- token: string;
- username: string;
- password: string;
- id: string;
- active: boolean;
- uuid: string;
- enterprise_customer: string;
-};
+} from '../../../../forms/FormWorkflow';
+import {
+ activateConfig, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper,
+} from '../utils';
+import type { MoodleConfigCamelCase, MoodleConfigSnakeCase } from './MoodleTypes';
export type MoodleFormConfigProps = {
enterpriseCustomerUuid: string;
@@ -53,15 +25,14 @@ export const MoodleFormConfig = ({
handleCloseClick,
existingData,
existingConfigNames,
- channelMap,
+ channelMap,
}: MoodleFormConfigProps): FormWorkflowConfig => {
-
const saveChanges = async (
formFields: MoodleConfigCamelCase,
- errHandler: (errMsg: string) => void
+ errHandler: (errMsg: string) => void,
) => {
const transformedConfig: MoodleConfigSnakeCase = snakeCaseDict(
- formFields
+ formFields,
) as MoodleConfigSnakeCase;
transformedConfig.enterprise_customer = enterpriseCustomerUuid;
return handleSaveHelper(transformedConfig, existingData, formFields, onSubmit, MOODLE_TYPE, channelMap, errHandler);
@@ -73,21 +44,30 @@ export const MoodleFormConfig = ({
errHandler,
dispatch,
}: FormWorkflowHandlerArgs) => {
- let currentFormFields = formFields;
+ const currentFormFields = formFields;
const transformedConfig: MoodleConfigSnakeCase = snakeCaseDict(
- formFields
+ formFields,
) as MoodleConfigSnakeCase;
transformedConfig.enterprise_customer = enterpriseCustomerUuid;
return handleSubmitHelper(
- enterpriseCustomerUuid, transformedConfig, existingData, onSubmit, formFieldsChanged,
- currentFormFields, MOODLE_TYPE, channelMap, errHandler, dispatch)
+ enterpriseCustomerUuid,
+ transformedConfig,
+ existingData,
+ onSubmit,
+ formFieldsChanged,
+ currentFormFields,
+ MOODLE_TYPE,
+ channelMap,
+ dispatch,
+ errHandler,
+ );
};
const activate = async ({
formFields,
errHandler,
}: FormWorkflowHandlerArgs) => {
- activateConfig(enterpriseCustomerUuid, channelMap, MOODLE_TYPE, formFields?.id, handleCloseClick, errHandler);
+ activateConfig(enterpriseCustomerUuid, channelMap, MOODLE_TYPE, handleCloseClick, formFields?.id, errHandler);
return formFields;
};
@@ -98,11 +78,11 @@ export const MoodleFormConfig = ({
index: 1,
formComponent: MoodleConfigEnablePage,
validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
- stepName: "Enable",
+ stepName: 'Configure',
saveChanges,
nextButtonConfig: () => {
- let config = {
- buttonText: "Enable",
+ const config = {
+ buttonText: 'Enable',
opensNewWindow: false,
onClick: handleSubmit,
};
@@ -113,16 +93,16 @@ export const MoodleFormConfig = ({
index: 2,
formComponent: activatePage,
validations: [],
- stepName: "Activate",
+ stepName: 'Activate',
saveChanges,
nextButtonConfig: () => {
- let config = {
- buttonText: "Activate",
+ const config = {
+ buttonText: 'Activate',
opensNewWindow: false,
onClick: activate,
};
return config as FormWorkflowButtonConfig;
- }
+ },
},
];
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx
index 13c494c492..412d5b66fd 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx
@@ -1,22 +1,21 @@
-import React from "react";
+import React from 'react';
-import { Container, Form, Image } from "@edx/paragon";
+import { Container, Form, Image } from '@edx/paragon';
-// @ts-ignore
-import ValidatedFormControl from "../../../../forms/ValidatedFormControl.tsx";
-import { channelMapping, urlValidation } from "../../../../../utils";
-import { INVALID_LINK, INVALID_NAME, MOODLE_TYPE } from "../../../data/constants";
+import ValidatedFormControl from '../../../../forms/ValidatedFormControl';
+import { channelMapping, urlValidation } from '../../../../../utils';
+import { INVALID_LINK, INVALID_NAME, MOODLE_TYPE } from '../../../data/constants';
import type {
FormFieldValidation,
-} from "../../../../forms/FormContext";
+} from '../../../../forms/FormContext';
export const formFieldNames = {
- DISPLAY_NAME: "displayName",
- MOODLE_BASE_URL: "moodleBaseUrl",
- SERVICE_SHORT_NAME: "serviceShortName",
- TOKEN: "token",
- USERNAME: "username",
- PASSWORD: "password",
+ DISPLAY_NAME: 'displayName',
+ MOODLE_BASE_URL: 'moodleBaseUrl',
+ SERVICE_SHORT_NAME: 'serviceShortName',
+ TOKEN: 'token',
+ USERNAME: 'username',
+ PASSWORD: 'password',
};
export const validationMessages = {
@@ -34,9 +33,8 @@ export const validations: FormFieldValidation[] = [
if (moodleUrl) {
const error = !urlValidation(moodleUrl);
return error ? INVALID_LINK : false;
- } else {
- return true;
}
+ return true;
},
},
{
@@ -74,93 +72,80 @@ export const validations: FormFieldValidation[] = [
const token = fields[formFieldNames.TOKEN];
const username = fields[formFieldNames.USERNAME];
const password = fields[formFieldNames.PASSWORD];
+ let error: boolean;
if (!token) {
- if (username && password) {
- return false;
- }
+ error = !(username && password);
} else {
- if (!username && !password) {
- return false;
- }
- }
- if (!token && !username && !password) {
- return true;
+ error = !!(username || password);
}
- return validationMessages.verificationRequired;
+ return error && validationMessages.verificationRequired;
},
},
];
// Settings page of Moodle LMS config workflow
-const MoodleConfigEnablePage = () => {
- return (
-
-
- (
+
+
+
+
+ Enable connection to Moodle
+
+
+
-
-
- );
-};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
export default MoodleConfigEnablePage;
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleTypes.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleTypes.tsx
new file mode 100644
index 0000000000..83a1ed982e
--- /dev/null
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleTypes.tsx
@@ -0,0 +1,26 @@
+export type MoodleConfigCamelCase = {
+ lms: string;
+ displayName: string;
+ moodleBaseUrl: string;
+ serviceShortName: string;
+ token: string;
+ username: string;
+ password: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+};
+
+export type MoodleConfigSnakeCase = {
+ lms: string;
+ display_name: string;
+ moodle_base_url: string;
+ service_short_name: string;
+ token: string;
+ username: string;
+ password: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+ enterprise_customer: string;
+};
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx
index e533446282..d1b9452994 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx
@@ -1,44 +1,14 @@
-import { snakeCaseDict } from "../../../../../utils";
-import { SAP_TYPE } from "../../../data/constants";
-// @ts-ignore
-import ConfigActivatePage from "../ConfigBasePages/ConfigActivatePage.tsx";
-// @ts-ignore
-import SAPConfigEnablePage, { validations } from "./SAPConfigEnablePage.tsx";
+import { snakeCaseDict } from '../../../../../utils';
+import { SAP_TYPE } from '../../../data/constants';
+import ConfigActivatePage from '../ConfigBasePages/ConfigActivatePage';
+import SAPConfigEnablePage, { validations } from './SAPConfigEnablePage';
import type {
FormWorkflowButtonConfig, FormWorkflowConfig, FormWorkflowStep, FormWorkflowHandlerArgs,
- // @ts-ignore
-} from "../../../../forms/FormWorkflow.tsx";
-// @ts-ignore
-import { activateConfig, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper } from "../utils.tsx";
-
-export type SAPConfigCamelCase = {
- lms: string;
- displayName: string;
- sapsfBaseUrl: string;
- sapsfCompanyId: string;
- sapsfUserId: string;
- key: string;
- secret: string;
- userType: string;
- id: string;
- active: boolean;
- uuid: string;
-};
-
-export type SAPConfigSnakeCase = {
- lms: string;
- display_name: string;
- sapsf_base_url: string;
- sapsf_company_id: string;
- sapsf_user_id: string;
- key: string;
- secret: string;
- user_type: string;
- id: string;
- active: boolean;
- uuid: string;
- enterprise_customer: string;
-};
+} from '../../../../forms/FormWorkflow';
+import {
+ activateConfig, checkForDuplicateNames, handleSaveHelper, handleSubmitHelper,
+} from '../utils';
+import type { SAPConfigCamelCase, SAPConfigSnakeCase } from './SAPTypes';
export type SAPFormConfigProps = {
enterpriseCustomerUuid: string;
@@ -57,13 +27,12 @@ export const SAPFormConfig = ({
existingConfigNames,
channelMap,
}: SAPFormConfigProps): FormWorkflowConfig => {
-
const saveChanges = async (
formFields: SAPConfigCamelCase,
- errHandler: (errMsg: string) => void
+ errHandler: (errMsg: string) => void,
) => {
const transformedConfig: SAPConfigSnakeCase = snakeCaseDict(
- formFields
+ formFields,
) as SAPConfigSnakeCase;
transformedConfig.enterprise_customer = enterpriseCustomerUuid;
return handleSaveHelper(transformedConfig, existingData, formFields, onSubmit, SAP_TYPE, channelMap, errHandler);
@@ -75,25 +44,33 @@ export const SAPFormConfig = ({
errHandler,
dispatch,
}: FormWorkflowHandlerArgs) => {
- let currentFormFields = formFields;
+ const currentFormFields = formFields;
const transformedConfig: SAPConfigSnakeCase = snakeCaseDict(
- formFields
+ formFields,
) as SAPConfigSnakeCase;
transformedConfig.enterprise_customer = enterpriseCustomerUuid;
return handleSubmitHelper(
- enterpriseCustomerUuid, transformedConfig, existingData, onSubmit, formFieldsChanged,
- currentFormFields, SAP_TYPE, channelMap, errHandler, dispatch);
+ enterpriseCustomerUuid,
+ transformedConfig,
+ existingData,
+ onSubmit,
+ formFieldsChanged,
+ currentFormFields,
+ SAP_TYPE,
+ channelMap,
+ dispatch,
+ errHandler,
+ );
};
const activate = async ({
formFields,
errHandler,
}: FormWorkflowHandlerArgs) => {
- activateConfig(enterpriseCustomerUuid, channelMap, SAP_TYPE, formFields?.id, handleCloseClick, errHandler);
+ activateConfig(enterpriseCustomerUuid, channelMap, SAP_TYPE, handleCloseClick, formFields?.id, errHandler);
return formFields;
};
-
const activatePage = () => ConfigActivatePage(SAP_TYPE);
const steps: FormWorkflowStep[] = [
@@ -101,11 +78,11 @@ export const SAPFormConfig = ({
index: 1,
formComponent: SAPConfigEnablePage,
validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
- stepName: "Enable",
+ stepName: 'Configure',
saveChanges,
nextButtonConfig: () => {
- let config = {
- buttonText: "Enable",
+ const config = {
+ buttonText: 'Enable',
opensNewWindow: false,
onClick: handleSubmit,
};
@@ -116,16 +93,16 @@ export const SAPFormConfig = ({
index: 2,
formComponent: activatePage,
validations: [],
- stepName: "Activate",
+ stepName: 'Activate',
saveChanges,
nextButtonConfig: () => {
- let config = {
- buttonText: "Activate",
+ const config = {
+ buttonText: 'Activate',
opensNewWindow: false,
onClick: activate,
};
return config as FormWorkflowButtonConfig;
- }
+ },
},
];
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfigEnablePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfigEnablePage.tsx
index 923c775d86..edb344d423 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfigEnablePage.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfigEnablePage.tsx
@@ -1,25 +1,23 @@
-import React from "react";
+import React from 'react';
-import { Container, Form, Image } from "@edx/paragon";
+import { Container, Form, Image } from '@edx/paragon';
-// @ts-ignore
-import ValidatedFormControl from "../../../../forms/ValidatedFormControl.tsx";
-// @ts-ignore
-import ValidatedFormRadio from "../../../../forms/ValidatedFormRadio.tsx";
-import { channelMapping, urlValidation } from "../../../../../utils";
-import { INVALID_LINK, INVALID_NAME, SAP_TYPE } from "../../../data/constants";
+import ValidatedFormControl from '../../../../forms/ValidatedFormControl';
+import ValidatedFormRadio from '../../../../forms/ValidatedFormRadio';
+import { channelMapping, urlValidation } from '../../../../../utils';
+import { INVALID_LINK, INVALID_NAME, SAP_TYPE } from '../../../data/constants';
import type {
FormFieldValidation,
-} from "../../../../forms/FormContext";
+} from '../../../../forms/FormContext';
export const formFieldNames = {
- DISPLAY_NAME: "displayName",
- SAPSF_BASE_URL: "sapsfBaseUrl",
- SAPSF_COMPANY_ID: "sapsfCompanyId",
- SAPSF_USER_ID: "sapsfUserId",
- KEY: "key",
- SECRET: "secret",
- USER_TYPE: "userType",
+ DISPLAY_NAME: 'displayName',
+ SAPSF_BASE_URL: 'sapsfBaseUrl',
+ SAPSF_COMPANY_ID: 'sapsfCompanyId',
+ SAPSF_USER_ID: 'sapsfUserId',
+ KEY: 'key',
+ SECRET: 'secret',
+ USER_TYPE: 'userType',
};
export const validationMessages = {
@@ -40,9 +38,8 @@ export const validations: FormFieldValidation[] = [
if (sapUrl) {
const error = !urlValidation(sapUrl);
return error ? INVALID_LINK : false;
- } else {
- return true;
}
+ return true;
},
},
{
@@ -104,83 +101,75 @@ export const validations: FormFieldValidation[] = [
},
];
-const SAPConfigEnablePage = () => {
- return (
-
-
- (
+
+
+
+
+ Enable connection to SAP Success Factors
+
+
+
-
-
- );
-};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
export default SAPConfigEnablePage;
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPTypes.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPTypes.tsx
new file mode 100644
index 0000000000..f48544b6ff
--- /dev/null
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPTypes.tsx
@@ -0,0 +1,28 @@
+export type SAPConfigCamelCase = {
+ lms: string;
+ displayName: string;
+ sapsfBaseUrl: string;
+ sapsfCompanyId: string;
+ sapsfUserId: string;
+ key: string;
+ secret: string;
+ userType: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+};
+
+export type SAPConfigSnakeCase = {
+ lms: string;
+ display_name: string;
+ sapsf_base_url: string;
+ sapsf_company_id: string;
+ sapsf_user_id: string;
+ key: string;
+ secret: string;
+ user_type: string;
+ id: string;
+ active: boolean;
+ uuid: string;
+ enterprise_customer: string;
+};
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/utils.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/utils.tsx
index 5a9db49c39..0b3ab5f72e 100644
--- a/src/components/settings/SettingsLMSTab/LMSConfigs/utils.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSConfigs/utils.tsx
@@ -1,75 +1,28 @@
-import type { FormFieldValidation } from "../../../forms/FormContext";
+import type { FormFieldValidation } from '../../../forms/FormContext';
import {
- BLACKBOARD_OAUTH_REDIRECT_URL, BLACKBOARD_TYPE, CANVAS_OAUTH_REDIRECT_URL, CANVAS_TYPE, INVALID_NAME, SUBMIT_TOAST_MESSAGE
-} from "../../data/constants";
-import handleErrors from "../../utils";
-import { camelCaseDict } from "../../../../utils";
-// @ts-ignore
-import { setWorkflowStateAction, updateFormFieldsAction } from "../../../forms/data/actions.ts";
-import { CanvasConfigCamelCase, CanvasConfigSnakeCase } from "./Canvas/CanvasConfig";
-import { BlackboardConfigCamelCase, BlackboardConfigSnakeCase } from "./Blackboard/BlackboardConfig";
-import { CornerstoneConfigCamelCase, CornerstoneConfigSnakeCase } from "./Cornerstone/CornerstoneConfig";
-import { DegreedConfigCamelCase, DegreedConfigSnakeCase } from "./Degreed/DegreedConfig";
-import { MoodleConfigCamelCase, MoodleConfigSnakeCase } from "./Moodle/MoodleConfig";
-import { SAPConfigCamelCase, SAPConfigSnakeCase } from "./SAP/SAPConfig";
-// @ts-ignore
-import { FormWorkflowErrorHandler, WAITING_FOR_ASYNC_OPERATION } from "../../../forms/FormWorkflow.tsx";
-import LmsApiService from "../../../../data/services/LmsApiService";
+ BLACKBOARD_OAUTH_REDIRECT_URL, BLACKBOARD_TYPE, CANVAS_OAUTH_REDIRECT_URL,
+ CANVAS_TYPE, INVALID_NAME, SUBMIT_TOAST_MESSAGE,
+} from '../../data/constants';
+import handleErrors from '../../utils';
+import { camelCaseDict } from '../../../../utils';
+import { setWorkflowStateAction, updateFormFieldsAction } from '../../../forms/data/actions';
+import { CanvasConfigCamelCase, CanvasConfigSnakeCase } from './Canvas/CanvasTypes';
+import { BlackboardConfigCamelCase, BlackboardConfigSnakeCase } from './Blackboard/BlackboardTypes';
+import { CornerstoneConfigCamelCase, CornerstoneConfigSnakeCase } from './Cornerstone/CornerstoneTypes';
+import { DegreedConfigCamelCase, DegreedConfigSnakeCase } from './Degreed/DegreedTypes';
+import { MoodleConfigCamelCase, MoodleConfigSnakeCase } from './Moodle/MoodleTypes';
+import { SAPConfigCamelCase, SAPConfigSnakeCase } from './SAP/SAPTypes';
+import { FormWorkflowErrorHandler, WAITING_FOR_ASYNC_OPERATION } from '../../../forms/FormWorkflow';
type ConfigCamelCase = { id?: string, active?: boolean, lms?: string, } |
- BlackboardConfigCamelCase | CanvasConfigCamelCase | CornerstoneConfigCamelCase | DegreedConfigCamelCase | MoodleConfigCamelCase | SAPConfigCamelCase;
-type ConfigSnakeCase = { enterprise_customer?: string, active?: boolean } |
- BlackboardConfigSnakeCase | CanvasConfigSnakeCase | CornerstoneConfigSnakeCase | DegreedConfigSnakeCase | MoodleConfigSnakeCase | SAPConfigSnakeCase;
-
-export const LMS_AUTHORIZATION_FAILED = "LMS AUTHORIZATION FAILED";
+BlackboardConfigCamelCase | CanvasConfigCamelCase | CornerstoneConfigCamelCase |
+DegreedConfigCamelCase | MoodleConfigCamelCase | SAPConfigCamelCase;
-export async function handleSubmitHelper(
- enterpriseCustomerUuid: string,
- transformedConfig: ConfigSnakeCase,
- existingData: ConfigCamelCase,
- onSubmit: (param: ConfigCamelCase) => void,
- formFieldsChanged: Boolean,
- currentFormFields: any,
- lmsType: string,
- channelMap: Record>,
- errHandler: FormWorkflowErrorHandler | undefined,
- dispatch: any,
-) {
- transformedConfig.enterprise_customer = enterpriseCustomerUuid;
- let err = "";
- if (formFieldsChanged) {
- if (currentFormFields?.id) { // id only exists on existing configs
- try {
- transformedConfig.active = existingData.active;
- const response = await channelMap[lmsType].update(transformedConfig, existingData.id)
- currentFormFields = camelCaseDict(
- response.data
- ) as ConfigCamelCase;
- onSubmit(currentFormFields);
- dispatch?.(updateFormFieldsAction({ formFields: currentFormFields }));
- } catch (error) {
- err = handleErrors(error);
- }
- } else {
- try {
- transformedConfig.active = false;
- const response = await channelMap[lmsType].post(transformedConfig)
- currentFormFields = camelCaseDict(
- response.data
- ) as ConfigCamelCase;
- onSubmit(currentFormFields);
- dispatch?.(updateFormFieldsAction({ formFields: currentFormFields }));
- } catch (error) {
- err = handleErrors(error);
- }
- }
- }
- const authorizeError = await handleSubmitAuthorize(lmsType, existingData, currentFormFields, channelMap, dispatch);
- if (err) { errHandler?.(err); }
- if (authorizeError) { errHandler?.(authorizeError); }
+type ConfigSnakeCase = { enterprise_customer?: string, active?: boolean } |
+BlackboardConfigSnakeCase | CanvasConfigSnakeCase | CornerstoneConfigSnakeCase |
+DegreedConfigSnakeCase | MoodleConfigSnakeCase | SAPConfigSnakeCase;
- return currentFormFields;
-}
+export const LMS_AUTHORIZATION_FAILED = 'LMS AUTHORIZATION FAILED';
async function handleSubmitAuthorize(
lmsType: string,
@@ -78,7 +31,8 @@ async function handleSubmitAuthorize(
channelMap: Record>,
dispatch: any,
) {
- if ((lmsType === BLACKBOARD_TYPE || lmsType === CANVAS_TYPE) && currentFormFields && !currentFormFields?.refreshToken) {
+ if ((lmsType === BLACKBOARD_TYPE || lmsType === CANVAS_TYPE)
+ && currentFormFields && !currentFormFields?.refreshToken) {
let oauthUrl: string;
if (lmsType === BLACKBOARD_TYPE) {
let appKey = existingData.clientId;
@@ -97,33 +51,81 @@ async function handleSubmitAuthorize(
oauthUrl = `${currentFormFields.blackboardBaseUrl}/learn/api/public/v1/oauth2/authorizationcode?`
+ `redirect_uri=${BLACKBOARD_OAUTH_REDIRECT_URL}&scope=read%20write%20delete%20offline&`
+ `response_type=code&client_id=${appKey}&state=${configUuid}`;
+ } else {
+ oauthUrl = `${currentFormFields.canvasBaseUrl}/login/oauth2/auth?client_id=${currentFormFields.clientId}&`
+ + `state=${currentFormFields.uuid}&response_type=code&`
+ + `redirect_uri=${CANVAS_OAUTH_REDIRECT_URL}`;
}
- else {
- oauthUrl =
- `${currentFormFields.canvasBaseUrl}/login/oauth2/auth?client_id=${currentFormFields.clientId}&` +
- `state=${currentFormFields.uuid}&response_type=code&` +
- `redirect_uri=${CANVAS_OAUTH_REDIRECT_URL}`;
- }
- // Open the oauth window for the user
+ // Open the oauth window for the user
window.open(oauthUrl);
dispatch?.(setWorkflowStateAction(WAITING_FOR_ASYNC_OPERATION, true));
}
return null;
}
+export async function handleSubmitHelper(
+ enterpriseCustomerUuid: string,
+ transformedConfig: ConfigSnakeCase,
+ existingData: ConfigCamelCase,
+ onSubmit: (param: ConfigCamelCase) => void,
+ formFieldsChanged: Boolean,
+ currentFormFields: any,
+ lmsType: string,
+ channelMap: Record>,
+ dispatch: any,
+ errHandler?: FormWorkflowErrorHandler,
+) {
+ const config = transformedConfig;
+ let formFields = currentFormFields;
+ config.enterprise_customer = enterpriseCustomerUuid;
+ let err = '';
+ if (formFieldsChanged) {
+ if (formFields?.id) { // id only exists on existing configs
+ try {
+ config.active = existingData.active;
+ const response = await channelMap[lmsType].update(config, existingData.id);
+ formFields = camelCaseDict(
+ response.data,
+ ) as ConfigCamelCase;
+ onSubmit(formFields);
+ dispatch?.(updateFormFieldsAction({ formFields }));
+ } catch (error) {
+ err = handleErrors(error);
+ }
+ } else {
+ try {
+ config.active = false;
+ const response = await channelMap[lmsType].post(config);
+ formFields = camelCaseDict(
+ response.data,
+ ) as ConfigCamelCase;
+ onSubmit(formFields);
+ dispatch?.(updateFormFieldsAction({ formFields }));
+ } catch (error) {
+ err = handleErrors(error);
+ }
+ }
+ }
+ const authorizeError = await handleSubmitAuthorize(lmsType, existingData, formFields, channelMap, dispatch);
+ if (err) { errHandler?.(err); }
+ if (authorizeError) { errHandler?.(authorizeError); }
+ return formFields;
+}
+
export async function afterSubmitHelper(
lmsType: string,
formFields: any,
channelMap: Record>,
- errHandler: FormWorkflowErrorHandler | undefined,
- dispatch: any) {
+ dispatch: any,
+ errHandler?: FormWorkflowErrorHandler,
+) {
if (formFields?.id) {
- let err = "";
+ let err = '';
try {
const response = await channelMap[lmsType].fetch(formFields.id);
if (response.data.refresh_token) {
dispatch?.(
- setWorkflowStateAction(WAITING_FOR_ASYNC_OPERATION, false)
+ setWorkflowStateAction(WAITING_FOR_ASYNC_OPERATION, false),
);
return true;
}
@@ -150,20 +152,22 @@ export async function handleSaveHelper(
onSubmit: (param: ConfigCamelCase) => void,
lmsType: string,
channelMap: Record>,
- errHandler: (errMsg: string) => void) {
- let err = "";
+ errHandler: (errMsg: string) => void,
+) {
+ let err = '';
+ const config = transformedConfig;
if (formFields.id) {
try {
- transformedConfig.active = existingData.active;
- await channelMap[lmsType].update(transformedConfig, existingData.id);
+ config.active = existingData.active;
+ await channelMap[lmsType].update(config, existingData.id);
onSubmit(formFields);
} catch (error) {
err = handleErrors(error);
}
} else {
try {
- transformedConfig.active = false;
- await channelMap[lmsType].post(transformedConfig);
+ config.active = false;
+ await channelMap[lmsType].post(config);
onSubmit(formFields);
} catch (error) {
err = handleErrors(error);
@@ -176,13 +180,13 @@ export async function handleSaveHelper(
}
export function checkForDuplicateNames(existingConfigNames: Map): FormFieldValidation {
- return {
+ return {
formFieldId: 'displayName',
validator: (fields) => {
let validName = true;
- validName = !(existingConfigNames?.has(fields['displayName']));
+ validName = !(existingConfigNames?.has(fields.displayName));
if (fields.id && !validName) { // if we're editing an existing config
- if (existingConfigNames.get(fields['displayName']) == fields.id) {
+ if (existingConfigNames.get(fields.displayName) === fields.id) {
validName = true;
}
}
@@ -195,9 +199,9 @@ export async function activateConfig(
enterpriseCustomerUuid: string,
channelMap: Record>,
lmsType: string,
- id: string | undefined,
handleCloseClick: (submitted: boolean, status: string) => Promise,
- errHandler: FormWorkflowErrorHandler | undefined,
+ id?: string,
+ errHandler?: FormWorkflowErrorHandler,
) {
const configOptions = {
active: true,
diff --git a/src/components/settings/SettingsLMSTab/LMSFormWorkflowConfig.tsx b/src/components/settings/SettingsLMSTab/LMSFormWorkflowConfig.tsx
index 55757e683e..f025cf710a 100644
--- a/src/components/settings/SettingsLMSTab/LMSFormWorkflowConfig.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSFormWorkflowConfig.tsx
@@ -1,24 +1,23 @@
-import { useState } from "react";
-import isEmpty from "lodash/isEmpty";
+import { useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
-import { CANVAS_TYPE } from "../data/constants";
-// @ts-ignore
-import type { FormWorkflowConfig, FormWorkflowStep } from "../../../../forms/FormWorkflow.tsx";
-// @ts-ignore
-import BlackboardFormConfig, { BlackboardConfigCamelCase, BlackboardConfigSnakeCase } from "./LMSConfigs/Blackboard/BlackboardConfig.tsx";
-// @ts-ignore
-import CanvasFormConfig, { CanvasConfigCamelCase, CanvasConfigSnakeCase } from "./LMSConfigs/Canvas/CanvasConfig.tsx";
-// @ts-ignore
-import CornerstoneFormConfig, { CornerstoneConfigCamelCase, CornerstoneConfigSnakeCase } from "./LMSConfigs/Cornerstone/CornerstoneConfig.tsx";
-// @ts-ignore
-import DegreedFormConfig, { DegreedConfigCamelCase, DegreedConfigSnakeCase } from "./LMSConfigs/Degreed/DegreedConfig.tsx";
-// @ts-ignore
-import MoodleFormConfig, { MoodleConfigCamelCase, MoodleConfigSnakeCase } from "./LMSConfigs/Moodle/MoodleConfig.tsx";
-// @ts-ignore
-import SAPFormConfig, { SAPConfigCamelCase, SAPConfigSnakeCase } from "./LMSConfigs/SAP/SAPConfig.tsx";
-import { BLACKBOARD_TYPE, CORNERSTONE_TYPE, DEGREED2_TYPE, MOODLE_TYPE, SAP_TYPE } from "../data/constants";
-// @ts-ignore
-import { LMSSelectorPage, validations} from "./LMSSelectorPage.tsx";
+import {
+ CANVAS_TYPE, BLACKBOARD_TYPE, CORNERSTONE_TYPE, DEGREED2_TYPE, MOODLE_TYPE, SAP_TYPE,
+} from '../data/constants';
+import type { FormWorkflowConfig, FormWorkflowStep } from '../../forms/FormWorkflow';
+import BlackboardFormConfig from './LMSConfigs/Blackboard/BlackboardConfig';
+import type { BlackboardConfigCamelCase, BlackboardConfigSnakeCase } from './LMSConfigs/Blackboard/BlackboardTypes';
+import CanvasFormConfig from './LMSConfigs/Canvas/CanvasConfig';
+import type { CanvasConfigCamelCase, CanvasConfigSnakeCase } from './LMSConfigs/Canvas/CanvasTypes';
+import CornerstoneFormConfig from './LMSConfigs/Cornerstone/CornerstoneConfig';
+import type { CornerstoneConfigCamelCase, CornerstoneConfigSnakeCase } from './LMSConfigs/Cornerstone/CornerstoneTypes';
+import DegreedFormConfig from './LMSConfigs/Degreed/DegreedConfig';
+import type { DegreedConfigCamelCase, DegreedConfigSnakeCase } from './LMSConfigs/Degreed/DegreedTypes';
+import MoodleFormConfig from './LMSConfigs/Moodle/MoodleConfig';
+import type { MoodleConfigCamelCase, MoodleConfigSnakeCase } from './LMSConfigs/Moodle/MoodleTypes';
+import SAPFormConfig from './LMSConfigs/SAP/SAPConfig';
+import type { SAPConfigCamelCase, SAPConfigSnakeCase } from './LMSConfigs/SAP/SAPTypes';
+import { LMSSelectorPage, validations } from './LMSSelectorPage';
const flowConfigs = {
[BLACKBOARD_TYPE]: BlackboardFormConfig,
@@ -29,10 +28,10 @@ const flowConfigs = {
[SAP_TYPE]: SAPFormConfig,
};
-export type LMSConfigCamelCase = BlackboardConfigCamelCase | CanvasConfigCamelCase | CornerstoneConfigCamelCase | DegreedConfigCamelCase
- | MoodleConfigCamelCase | SAPConfigCamelCase;
-export type LMSConfigSnakeCase = BlackboardConfigSnakeCase | CanvasConfigSnakeCase | CornerstoneConfigSnakeCase | DegreedConfigSnakeCase
- | MoodleConfigSnakeCase | SAPConfigSnakeCase;
+export type LMSConfigCamelCase = BlackboardConfigCamelCase | CanvasConfigCamelCase | CornerstoneConfigCamelCase
+| DegreedConfigCamelCase | MoodleConfigCamelCase | SAPConfigCamelCase;
+export type LMSConfigSnakeCase = BlackboardConfigSnakeCase | CanvasConfigSnakeCase | CornerstoneConfigSnakeCase
+| DegreedConfigSnakeCase | MoodleConfigSnakeCase | SAPConfigSnakeCase;
export type LMSFormConfigProps = {
enterpriseCustomerUuid: string;
@@ -53,28 +52,27 @@ export const LMSFormWorkflowConfig = ({
channelMap,
lmsType,
}: LMSFormConfigProps): FormWorkflowConfig => {
- const [lms, setLms] = useState(lmsType ? lmsType : '');
+ const [lms, setLms] = useState(lmsType || '');
// once an lms is selected by the user (or they are editing and existing one)
// we dynamically render the correct FormConfig
- const lmsConfig =
- (lms && !isEmpty(lms)) &&
- flowConfigs[lms]({
+ const lmsConfig = (lms && !isEmpty(lms))
+ && flowConfigs[lms]({
enterpriseCustomerUuid,
onSubmit,
handleCloseClick,
existingData,
existingConfigNames,
- channelMap
+ channelMap,
});
let steps: FormWorkflowStep[] = [
{
index: 0,
formComponent: LMSSelectorPage(setLms),
- validations: validations,
- stepName: "Select LMS",
+ validations,
+ stepName: 'Select',
nextButtonConfig: () => ({
- buttonText: "Next",
+ buttonText: 'Next',
opensNewWindow: false,
onClick: () => {},
}),
@@ -88,12 +86,24 @@ export const LMSFormWorkflowConfig = ({
steps = steps.concat(
{
index: 1,
- stepName: "Activate",
+ formComponent: LMSSelectorPage(setLms),
+ validations,
+ stepName: 'Activate',
+ nextButtonConfig: () => ({
+ buttonText: 'Next',
+ opensNewWindow: false,
+ }),
},
{
index: 2,
- stepName: "Enable",
- }
+ formComponent: LMSSelectorPage(setLms),
+ validations,
+ stepName: 'Enable',
+ nextButtonConfig: () => ({
+ buttonText: 'Next',
+ opensNewWindow: false,
+ }),
+ },
);
}
diff --git a/src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx b/src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx
index 97c284ffdc..148cc54bd2 100644
--- a/src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx
+++ b/src/components/settings/SettingsLMSTab/LMSSelectorPage.tsx
@@ -1,52 +1,49 @@
-import React from "react";
-import { Container, Image, SelectableBox, } from "@edx/paragon";
+import React from 'react';
+import { Container, Image, SelectableBox } from '@edx/paragon';
-import { channelMapping } from "../../../utils.js";
-import { LMS_KEYS } from "../data/constants.js";
-// @ts-ignore
-import { FormFieldValidation, useFormContext } from "../../forms/FormContext.tsx";
-// @ts-ignore
-import { setFormFieldAction } from "../../forms/data/actions.ts";
+import { channelMapping } from '../../../utils';
+import { LMS_KEYS } from '../data/constants';
+import { FormFieldValidation, useFormContext } from '../../forms/FormContext';
+import { setFormFieldAction } from '../../forms/data/actions';
export const validations: FormFieldValidation[] = [
{
formFieldId: 'lms',
- validator: (fields) => {
- return !LMS_KEYS.includes(fields['lms'])
- },
+ validator: (fields) => !LMS_KEYS.includes(fields.lms),
},
];
export function LMSSelectorPage(setLms: (string) => void) {
const LMSSelectorPageImpl = () => {
const { dispatch, formFields } = useFormContext();
+
const handleChange = (e: React.ChangeEvent) => {
// setting this value allows the LMSFormWorkflowConfig page to rerender with the state
- // change, which sets the LMS's associated steps
- setLms(e.target.value);
- dispatch && dispatch(
- setFormFieldAction({ fieldId: 'lms', value: e.target.value })
- );
- };
+ // change, which sets the LMS's associated steps
+ setLms(e.target.value);
+ if (dispatch) {
+ dispatch(setFormFieldAction({ fieldId: 'lms', value: e.target.value }));
+ }
+ };
return (
-
-
-
- Let's get started
+
+
+
+ Let's get started
Select the LMS or LXP you want to integrate with edX For Business.
{LMS_KEYS.map(lms => (
-
+
-
{channelMapping[lms].displayName}
+ {channelMapping[lms].displayName}
))}
@@ -56,4 +53,4 @@ export function LMSSelectorPage(setLms: (string) => void) {
);
};
return LMSSelectorPageImpl;
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/SettingsLMSTab/UnsavedChangesModal.tsx b/src/components/settings/SettingsLMSTab/UnsavedChangesModal.tsx
index 94aae982c9..ac09b409aa 100644
--- a/src/components/settings/SettingsLMSTab/UnsavedChangesModal.tsx
+++ b/src/components/settings/SettingsLMSTab/UnsavedChangesModal.tsx
@@ -1,9 +1,8 @@
-import React from "react";
-import { ModalDialog, ActionRow, Button } from "@edx/paragon";
+import React from 'react';
+import { ModalDialog, ActionRow, Button } from '@edx/paragon';
-const MODAL_TITLE = "Exit configuration";
-const MODAL_TEXT =
- "Your configuration data will be saved under your Learning Platform settings";
+const MODAL_TITLE = 'Exit configuration';
+const MODAL_TEXT = 'Your configuration data will be saved under your Learning Platform settings';
type UnsavedChangesModalProps = {
isOpen: boolean;
@@ -32,15 +31,12 @@ const UnsavedChangesModal = ({
{MODAL_TEXT}
- {/* @ts-ignore */}
- {/* @ts-ignore */}
- {/* @ts-ignore */}
diff --git a/src/components/settings/SettingsLMSTab/index.jsx b/src/components/settings/SettingsLMSTab/index.jsx
index 5f215dbb4c..54c3c3fa1d 100644
--- a/src/components/settings/SettingsLMSTab/index.jsx
+++ b/src/components/settings/SettingsLMSTab/index.jsx
@@ -1,7 +1,10 @@
import _ from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+ useCallback, useEffect, useMemo, useState,
+} from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
+
import { camelCaseObject } from '@edx/frontend-platform/utils';
import {
Alert, Button, Hyperlink, Toast, Skeleton, useToggle,
@@ -9,20 +12,16 @@ import {
import { Add, Info } from '@edx/paragon/icons';
import { logError } from '@edx/frontend-platform/logging';
-import { camelCaseDictArray, channelMapping } from '../../../utils';
+import { camelCaseDictArray, getChannelMap } from '../../../utils';
import LMSConfigPage from './LMSConfigPage';
import ExistingLMSCardDeck from './ExistingLMSCardDeck';
import NoConfigCard from './NoConfigCard';
import {
- HELP_CENTER_LINK,
- ACTIVATE_TOAST_MESSAGE,
- DELETE_TOAST_MESSAGE,
- INACTIVATE_TOAST_MESSAGE,
- SUBMIT_TOAST_MESSAGE,
+ HELP_CENTER_LINK, ACTIVATE_TOAST_MESSAGE, DELETE_TOAST_MESSAGE,
+ INACTIVATE_TOAST_MESSAGE, SUBMIT_TOAST_MESSAGE,
} from '../data/constants';
import LmsApiService from '../../../data/services/LmsApiService';
-// @ts-ignore
-import { useFormContext } from '../../forms/FormContext.tsx';
+import { useFormContext } from '../../forms/FormContext';
const SettingsLMSTab = ({
enterpriseId,
@@ -47,6 +46,7 @@ const SettingsLMSTab = ({
const [isLmsStepperOpen, openLmsStepper, closeLmsStepper] = useToggle(false);
const toastMessages = [ACTIVATE_TOAST_MESSAGE, DELETE_TOAST_MESSAGE, INACTIVATE_TOAST_MESSAGE, SUBMIT_TOAST_MESSAGE];
const { dispatch } = useFormContext();
+ const channelMap = useMemo(() => getChannelMap(), []);
// onClick function for existing config cards' edit action
const editExistingConfig = useCallback((configData, configType) => {
@@ -65,18 +65,20 @@ const SettingsLMSTab = ({
openLmsStepper();
}, [dispatch, openLmsStepper]);
- // we pass in params (configId and lmsType) from SyncHistory when user wants to edit that config
useEffect(() => {
const query = new URLSearchParams(window.location.search);
- const fetchData = async () => channelMapping[query.get('lms')].fetch(query.get('id'));
- fetchData()
- .then((response) => {
- editExistingConfig(camelCaseObject(response.data), query.get('id'));
- })
- .catch((err) => {
- logError(err);
- });
- }, [editExistingConfig]);
+ // if we have passed in params (lmsType and configId) from SyncHistory, user wants to edit that config
+ if (query.has('lms') && query.has('id')) {
+ const fetchData = async () => channelMap[query.get('lms')].fetch(query.get('id'));
+ fetchData()
+ .then((response) => {
+ editExistingConfig(camelCaseObject(response.data), query.get('id'));
+ })
+ .catch((err) => {
+ logError(err);
+ });
+ }
+ }, [channelMap, editExistingConfig]);
const fetchExistingConfigs = useCallback(() => {
const options = { enterprise_customer: enterpriseId };
diff --git a/src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx b/src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx
index 227005b19c..67ce466f83 100644
--- a/src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx
+++ b/src/components/settings/SettingsLMSTab/tests/AuthorizationsConfigs.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import {
- act, fireEvent, screen, waitFor, waitForElementToBeRemoved
+import {
+ act, fireEvent, screen, waitFor, waitForElementToBeRemoved,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
@@ -48,8 +48,8 @@ const mockCanvasResponseData = {
canvas_account_id: 1,
display_name: 'display name',
canvas_base_url: 'https://foobar.com',
- client_id: "wassap",
- client_secret: "chewlikeyouhaveasecret",
+ client_id: 'wassap',
+ client_secret: 'chewlikeyouhaveasecret',
active: false,
};
@@ -59,12 +59,11 @@ const mockCanvasResponseDataActive = {
canvas_account_id: 1,
display_name: 'display name',
canvas_base_url: 'https://foobar.com',
- client_id: "wassap",
- client_secret: "chewlikeyouhaveasecret",
+ client_id: 'wassap',
+ client_secret: 'chewlikeyouhaveasecret',
active: true,
};
-
const mockStore = configureMockStore([thunk]);
window.open = jest.fn();
@@ -75,7 +74,7 @@ const mockBlackboardFetchGlobal = jest.spyOn(LmsApiService, 'fetchBlackboardGlob
mockBlackboardPost.mockResolvedValue({ data: mockBlackboardResponseData });
mockBlackboardUpdate.mockResolvedValue({ data: mockBlackboardResponseData });
mockBlackboardFetch.mockResolvedValue({ data: { refresh_token: 'foobar' } });
-mockBlackboardFetchGlobal.mockReturnValue({ data: { results: [{ app_key: 1 }] } })
+mockBlackboardFetchGlobal.mockReturnValue({ data: { results: [{ app_key: 1 }] } });
const SettingsBlackboardWrapper = () => (
@@ -98,7 +97,6 @@ mockCanvasPost.mockResolvedValue({ data: mockCanvasResponseData });
mockCanvasUpdate.mockResolvedValue({ data: mockCanvasResponseData });
mockCanvasFetch.mockResolvedValue({ data: { refresh_token: 'foobar' } });
-
const SettingsCanvasWrapper = () => (
@@ -113,7 +111,6 @@ const SettingsCanvasWrapper = () => (
);
-
describe('Test authorization flows for Blackboard and Canvas', () => {
test('Blackboard properly authorizes', async () => {
renderWithRouter();
@@ -129,14 +126,20 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
await waitFor(() => {
expect(screen.queryByText('Authorize connection to Blackboard')).toBeTruthy();
});
- userEvent.type(screen.getByLabelText('Display Name'), 'displayName');
- userEvent.type(screen.getByLabelText('Blackboard Base URL'), 'https://www.test4.com');
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
+ userEvent.paste(screen.getByLabelText('Blackboard Base URL'), 'https://www.test4.com');
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
userEvent.click(authorizeButton);
+ await waitFor(() => {
+ screen.getByText('Authorization in progress');
+ });
+ const inProgress = screen.getByText('Authorization in progress');
+ await waitForElementToBeRemoved(inProgress);
+
await waitFor(() => {
expect(screen.queryByText('Your Blackboard integration has been successfully authorized and is ready to activate!')).toBeTruthy();
- })
+ });
const expectedConfig = {
active: false,
blackboard_base_url: 'https://www.test4.com',
@@ -148,7 +151,7 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
expect(window.open).toHaveBeenCalled();
expect(mockBlackboardFetch).toHaveBeenCalledWith(1);
});
- // TODO: Figure out how to mock existing data deeper to test
+ // TODO: Figure out how to mock existing data deeper to test
// - Authorizing an existing, edited config will call update config endpoint
// - Authorizing an existing config will not call update or create config endpoint
test('Blackboard config is activated after last step', async () => {
@@ -174,21 +177,21 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
target: { value: '' },
});
});
- userEvent.type(screen.getByLabelText('Display Name'), 'displayName');
- userEvent.type(screen.getByLabelText('Blackboard Base URL'), 'https://www.test4.com');
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
+ userEvent.paste(screen.getByLabelText('Blackboard Base URL'), 'https://www.test4.com');
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
userEvent.click(authorizeButton);
await waitFor(() => {
expect(screen.queryByText('Your Blackboard integration has been successfully authorized and is ready to activate!')).toBeTruthy();
- })
+ });
const activateButton = screen.getByRole('button', { name: 'Activate' });
userEvent.click(activateButton);
await waitFor(() => {
expect(screen.queryByText('Learning platform integration successfully submitted.')).toBeTruthy();
- })
- expect(mockBlackboardUpdate).toHaveBeenCalledWith({"active": true, "enterprise_customer": enterpriseId}, 1);
+ });
+ expect(mockBlackboardUpdate).toHaveBeenCalledWith({ active: true, enterprise_customer: enterpriseId }, 1);
});
test('Canvas properly authorizes', async () => {
renderWithRouter();
@@ -205,35 +208,25 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
await waitFor(() => {
expect(screen.queryByText('Authorize connection to Canvas')).toBeTruthy();
});
- await act(async () => {
- fireEvent.change(screen.getByLabelText('API Client ID'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('API Client Secret'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Canvas Account Number'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Display Name'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Canvas Base URL'), {
- target: { value: '' },
- });
- });
- userEvent.type(screen.getByLabelText('Display Name'), 'displayName');
- userEvent.type(screen.getByLabelText('Canvas Base URL'), 'https://www.test4.com');
- userEvent.type(screen.getByLabelText('API Client ID'), 'test1');
- userEvent.type(screen.getByLabelText('Canvas Account Number'), '3');
- userEvent.type(screen.getByLabelText('API Client Secret'), 'test2');
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
+ userEvent.paste(screen.getByLabelText('Canvas Base URL'), 'https://www.test4.com');
+ userEvent.paste(screen.getByLabelText('API Client ID'), 'test1');
+ userEvent.paste(screen.getByLabelText('Canvas Account Number'), '3');
+ userEvent.paste(screen.getByLabelText('API Client Secret'), 'test2');
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
userEvent.click(authorizeButton);
+ await waitFor(() => {
+ screen.getByText('Authorization in progress');
+ });
+ const inProgress = screen.getByText('Authorization in progress');
+ await waitForElementToBeRemoved(inProgress);
+
await waitFor(() => {
expect(screen.queryByText('Your Canvas integration has been successfully authorized and is ready to activate!')).toBeTruthy();
- })
+ });
+
const expectedConfig = {
active: false,
canvas_base_url: 'https://www.test4.com',
@@ -264,41 +257,23 @@ describe('Test authorization flows for Blackboard and Canvas', () => {
expect(screen.queryByText('Authorize connection to Canvas')).toBeTruthy();
});
- await act(async () => {
- fireEvent.change(screen.getByLabelText('API Client ID'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('API Client Secret'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Canvas Account Number'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Display Name'), {
- target: { value: '' },
- });
- fireEvent.change(screen.getByLabelText('Canvas Base URL'), {
- target: { value: '' },
- });
- });
-
- userEvent.type(screen.getByLabelText('Display Name'), 'displayName');
- userEvent.type(screen.getByLabelText('API Client ID'), 'test1');
- userEvent.type(screen.getByLabelText('API Client Secret'), 'test2');
- userEvent.type(screen.getByLabelText('Canvas Account Number'), '3');
- userEvent.type(screen.getByLabelText('Canvas Base URL'), 'https://www.test4.com');
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
+ userEvent.paste(screen.getByLabelText('API Client ID'), 'test1');
+ userEvent.paste(screen.getByLabelText('API Client Secret'), 'test2');
+ userEvent.paste(screen.getByLabelText('Canvas Account Number'), '3');
+ userEvent.paste(screen.getByLabelText('Canvas Base URL'), 'https://www.test4.com');
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
userEvent.click(authorizeButton);
await waitFor(() => {
expect(screen.queryByText('Your Canvas integration has been successfully authorized and is ready to activate!')).toBeTruthy();
- })
+ });
const activateButton = screen.getByRole('button', { name: 'Activate' });
userEvent.click(activateButton);
await waitFor(() => {
expect(screen.queryByText('Learning platform integration successfully submitted.')).toBeTruthy();
- })
- expect(mockCanvasUpdate).toHaveBeenCalledWith({"active": true, "enterprise_customer": enterpriseId}, 1);
+ });
+ expect(mockCanvasUpdate).toHaveBeenCalledWith({ active: true, enterprise_customer: enterpriseId }, 1);
});
});
diff --git a/src/components/settings/SettingsLMSTab/tests/BlackboardConfig.test.tsx b/src/components/settings/SettingsLMSTab/tests/BlackboardConfig.test.tsx
index 74f68b3446..ae98b38195 100644
--- a/src/components/settings/SettingsLMSTab/tests/BlackboardConfig.test.tsx
+++ b/src/components/settings/SettingsLMSTab/tests/BlackboardConfig.test.tsx
@@ -1,27 +1,17 @@
-import React from "react";
+import React from 'react';
import {
- act,
- render,
- fireEvent,
- screen,
- waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-
-// @ts-ignore
-import BlackboardConfig from "../LMSConfigs/Blackboard/BlackboardConfig.tsx";
-import {
- INVALID_LINK,
- INVALID_NAME,
-} from "../../data/constants";
-// @ts-ignore
-import FormContextWrapper from "../../../forms/FormContextWrapper.tsx";
-// @ts-ignore
-import { validationMessages } from "../LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx";
-
-jest.mock("../../data/constants", () => ({
- ...jest.requireActual("../../data/constants"),
+ act, render, fireEvent, screen, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+import BlackboardConfig from '../LMSConfigs/Blackboard/BlackboardConfig';
+import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
+import { validationMessages } from '../LMSConfigs/Blackboard/BlackboardConfigAuthorizePage';
+
+jest.mock('../../data/constants', () => ({
+ ...jest.requireActual('../../data/constants'),
LMS_CONFIG_OAUTH_POLLING_INTERVAL: 0,
}));
window.open = jest.fn();
@@ -32,20 +22,20 @@ const noExistingData = {};
// Existing config data that has been authorized
const existingConfigData = {
active: true,
- refreshToken: "foobar",
+ refreshToken: 'foobar',
id: 1,
- displayName: "foobarss",
+ displayName: 'foobarss',
};
// Existing invalid data that will be validated on load
const invalidExistingData = {
- displayName: "fooooooooobaaaaaaaaar",
- blackboardBaseUrl: "bad_url :^(",
+ displayName: 'fooooooooobaaaaaaaaar',
+ blackboardBaseUrl: 'bad_url :^(',
};
// Existing config data that has not been authorized
const existingConfigDataNoAuth = {
id: 1,
- displayName: "foobar",
- blackboardBaseUrl: "https://foobarish.com",
+ displayName: 'foobar',
+ blackboardBaseUrl: 'https://foobarish.com',
};
const noConfigs = [];
@@ -66,8 +56,7 @@ const mockFetchGlobal = jest.fn();
mockPost.mockResolvedValue({ data: mockConfigResponseData });
mockUpdate.mockResolvedValue({ data: mockConfigResponseData });
mockFetch.mockResolvedValue({ data: { refresh_token: 'foobar' } });
-mockFetchGlobal.mockReturnValue({ data: { results: [{ app_key: 1 }] } })
-
+mockFetchGlobal.mockReturnValue({ data: { results: [{ app_key: 1 }] } });
function testBlackboardConfigSetup(formData) {
return (
@@ -85,12 +74,11 @@ function testBlackboardConfigSetup(formData) {
fetch: mockFetch,
fetchGlobal: mockFetchGlobal,
},
- }
+ },
})}
onClickOut={mockOnClick}
- onSubmit={mockSetExistingConfigFormData}
formData={formData}
- isStepperOpen={true}
+ isStepperOpen
dispatch={jest.fn()}
/>
);
@@ -107,17 +95,16 @@ async function clearForm() {
});
}
-
-describe("", () => {
+describe('', () => {
afterEach(() => {
jest.clearAllMocks();
});
- test("renders Blackboard Authorize Form", () => {
+ test('renders Blackboard Authorize Form', () => {
render(testBlackboardConfigSetup(noConfigs));
- screen.getByLabelText("Display Name");
- screen.getByLabelText("Blackboard Base URL");
+ screen.getByLabelText('Display Name');
+ screen.getByLabelText('Blackboard Base URL');
});
- test("test error messages", async () => {
+ test('test error messages', async () => {
render(testBlackboardConfigSetup(noExistingData));
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
@@ -126,19 +113,19 @@ describe("", () => {
expect(screen.queryByText(validationMessages.displayNameRequired));
expect(screen.queryByText(validationMessages.baseUrlRequired));
- userEvent.paste(screen.getByLabelText("Display Name"), "name");
- userEvent.paste(screen.getByLabelText("Blackboard Base URL"), "test4");
+ userEvent.paste(screen.getByLabelText('Display Name'), 'name');
+ userEvent.paste(screen.getByLabelText('Blackboard Base URL'), 'test4');
- userEvent.click(authorizeButton)
+ userEvent.click(authorizeButton);
expect(screen.queryByText(INVALID_LINK));
expect(screen.queryByText(INVALID_NAME));
await clearForm();
- userEvent.paste(screen.getByLabelText("Display Name"), "displayName");
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
userEvent.paste(
- screen.getByLabelText("Blackboard Base URL"),
- "https://www.test4.com"
+ screen.getByLabelText('Blackboard Base URL'),
+ 'https://www.test4.com',
);
- userEvent.click(authorizeButton)
+ userEvent.click(authorizeButton);
expect(!screen.queryByText(INVALID_LINK));
expect(!screen.queryByText(INVALID_NAME));
});
@@ -146,7 +133,7 @@ describe("", () => {
render(testBlackboardConfigSetup(existingConfigData));
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
- await clearForm();
+ await clearForm();
userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
userEvent.paste(screen.getByLabelText('Blackboard Base URL'), 'https://www.test4.com');
@@ -160,7 +147,7 @@ describe("", () => {
const expectedConfig = {
active: true,
id: 1,
- refresh_token: "foobar",
+ refresh_token: 'foobar',
blackboard_base_url: 'https://www.test4.com',
display_name: 'displayName',
enterprise_customer: enterpriseId,
@@ -170,7 +157,7 @@ describe("", () => {
test('it creates new configs on submit', async () => {
render(testBlackboardConfigSetup(noExistingData));
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
-
+
await clearForm();
userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
@@ -203,7 +190,7 @@ describe("", () => {
const closeButton = screen.getByRole('button', { name: 'Exit' });
userEvent.click(closeButton);
-
+
const expectedConfig = {
active: false,
display_name: 'displayName',
@@ -232,16 +219,16 @@ describe("", () => {
await waitFor(() => expect(screen.getByText(INVALID_NAME)).toBeInTheDocument());
expect(screen.getByText(INVALID_LINK)).toBeInTheDocument();
-
});
test('validates properly formatted existing data on load', () => {
render(testBlackboardConfigSetup(existingConfigDataNoAuth));
- expect(screen.getByText('Form updates require reauthorization'));
// ensuring the existing data is prefilled
expect((screen.getByLabelText('Display Name') as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.displayName);
+ existingConfigDataNoAuth.displayName,
+ );
expect((screen.getByLabelText('Blackboard Base URL') as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.blackboardBaseUrl);
+ existingConfigDataNoAuth.blackboardBaseUrl,
+ );
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
userEvent.click(authorizeButton);
diff --git a/src/components/settings/SettingsLMSTab/tests/CanvasConfig.test.tsx b/src/components/settings/SettingsLMSTab/tests/CanvasConfig.test.tsx
index fff2bf9d09..2af5de1f0a 100644
--- a/src/components/settings/SettingsLMSTab/tests/CanvasConfig.test.tsx
+++ b/src/components/settings/SettingsLMSTab/tests/CanvasConfig.test.tsx
@@ -1,66 +1,48 @@
-import React from "react";
+import React from 'react';
import {
- act,
- render,
- fireEvent,
- screen,
- waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-
-// @ts-ignore
-import CanvasConfig from "../LMSConfigs/Canvas/CanvasConfig.tsx";
-import {
- INVALID_LINK,
- INVALID_NAME,
-} from "../../data/constants";
-// @ts-ignore
-import FormContextWrapper from "../../../forms/FormContextWrapper.tsx";
-// @ts-ignore
-import { validationMessages } from "../LMSConfigs/Canvas/CanvasConfigAuthorizePage.tsx";
-
-jest.mock("../../data/constants", () => ({
- ...jest.requireActual("../../data/constants"),
+ act, render, fireEvent, screen, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+import CanvasConfig from '../LMSConfigs/Canvas/CanvasConfig';
+import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
+import { validationMessages } from '../LMSConfigs/Canvas/CanvasConfigAuthorizePage';
+
+jest.mock('../../data/constants', () => ({
+ ...jest.requireActual('../../data/constants'),
LMS_CONFIG_OAUTH_POLLING_INTERVAL: 0,
}));
window.open = jest.fn();
-const enterpriseId = "test-enterprise-id";
+const enterpriseId = 'test-enterprise-id';
const mockOnClick = jest.fn();
// Freshly creating a config will have an empty existing data object
const noExistingData = {};
-// Existing config data that has been authorized
-const existingConfigData = {
- active: true,
- refreshToken: "foobar",
- id: 1,
- displayName: "foobarss",
-};
// Existing invalid data that will be validated on load
const invalidExistingData = {
- displayName: "fooooooooobaaaaaaaaar",
- canvasBaseUrl: "bad_url :^(",
+ displayName: 'fooooooooobaaaaaaaaar',
+ canvasBaseUrl: 'bad_url :^(',
};
// Existing config data that has not been authorized
const existingConfigDataNoAuth = {
id: 1,
- displayName: "foobar",
- canvasBaseUrl: "https://foobarish.com",
- clientId: "ayylmao",
- clientSecret: "testingsecret",
+ displayName: 'foobar',
+ canvasBaseUrl: 'https://foobarish.com',
+ clientId: 'ayylmao',
+ clientSecret: 'testingsecret',
canvasAccountId: '10',
};
-
const mockConfigResponseData = {
uuid: 'foobar',
id: 1,
canvas_account_id: '1',
display_name: 'display name',
canvas_base_url: 'https://foobar.com',
- client_id: "wassap",
- client_secret: "chewlikeyouhaveasecret",
+ client_id: 'wassap',
+ client_secret: 'chewlikeyouhaveasecret',
active: false,
};
@@ -74,7 +56,6 @@ mockPost.mockResolvedValue({ data: mockConfigResponseData });
mockUpdate.mockResolvedValue({ data: mockConfigResponseData });
mockFetch.mockResolvedValue({ data: { refresh_token: 'foobar' } });
-
function testCanvasConfigSetup(formData) {
return (
);
@@ -121,20 +101,19 @@ async function clearForm() {
});
}
-
-describe("", () => {
+describe('', () => {
afterEach(() => {
jest.clearAllMocks();
});
- test("renders Canvas Authorize Form", () => {
+ test('renders Canvas Authorize Form', () => {
render(testCanvasConfigSetup(noConfigs));
- screen.getByLabelText("Display Name");
- screen.getByLabelText("API Client ID");
- screen.getByLabelText("API Client Secret");
- screen.getByLabelText("Canvas Account Number");
- screen.getByLabelText("Canvas Base URL");
+ screen.getByLabelText('Display Name');
+ screen.getByLabelText('API Client ID');
+ screen.getByLabelText('API Client Secret');
+ screen.getByLabelText('Canvas Account Number');
+ screen.getByLabelText('Canvas Base URL');
});
- test("test error messages", async () => {
+ test('test error messages', async () => {
render(testCanvasConfigSetup(noExistingData));
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
@@ -147,20 +126,20 @@ describe("", () => {
expect(screen.queryByText(validationMessages.accountIdRequired));
expect(screen.queryByText(validationMessages.clientSecretRequired));
- userEvent.paste(screen.getByLabelText("Display Name"), "name");
- userEvent.paste(screen.getByLabelText("Canvas Base URL"), "test4");
- userEvent.paste(screen.getByLabelText("API Client ID"), "test3");
- userEvent.paste(screen.getByLabelText("Canvas Account Number"), "23");
- userEvent.paste(screen.getByLabelText("API Client Secret"), "test6");
+ userEvent.paste(screen.getByLabelText('Display Name'), 'name');
+ userEvent.paste(screen.getByLabelText('Canvas Base URL'), 'test4');
+ userEvent.paste(screen.getByLabelText('API Client ID'), 'test3');
+ userEvent.paste(screen.getByLabelText('Canvas Account Number'), '23');
+ userEvent.paste(screen.getByLabelText('API Client Secret'), 'test6');
userEvent.click(authorizeButton);
expect(screen.queryByText(INVALID_LINK));
expect(screen.queryByText(INVALID_NAME));
await clearForm();
- userEvent.paste(screen.getByLabelText("Display Name"), "displayName");
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
userEvent.paste(
- screen.getByLabelText("Canvas Base URL"),
- "https://www.test4.com"
+ screen.getByLabelText('Canvas Base URL'),
+ 'https://www.test4.com',
);
userEvent.click(authorizeButton);
expect(!screen.queryByText(INVALID_LINK));
@@ -224,16 +203,21 @@ describe("", () => {
render(testCanvasConfigSetup(existingConfigDataNoAuth));
const authorizeButton = screen.getByRole('button', { name: 'Authorize' });
// ensuring the existing data is prefilled
- expect((screen.getByLabelText("Display Name") as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.displayName);
- expect((screen.getByLabelText("Canvas Base URL") as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.canvasBaseUrl);
- expect((screen.getByLabelText("API Client ID") as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.clientId);
- expect((screen.getByLabelText("Canvas Account Number") as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.canvasAccountId);
- expect((screen.getByLabelText("API Client Secret") as HTMLInputElement).value).toEqual(
- existingConfigDataNoAuth.clientSecret);
+ expect((screen.getByLabelText('Display Name') as HTMLInputElement).value).toEqual(
+ existingConfigDataNoAuth.displayName,
+ );
+ expect((screen.getByLabelText('Canvas Base URL') as HTMLInputElement).value).toEqual(
+ existingConfigDataNoAuth.canvasBaseUrl,
+ );
+ expect((screen.getByLabelText('API Client ID') as HTMLInputElement).value).toEqual(
+ existingConfigDataNoAuth.clientId,
+ );
+ expect((screen.getByLabelText('Canvas Account Number') as HTMLInputElement).value).toEqual(
+ existingConfigDataNoAuth.canvasAccountId,
+ );
+ expect((screen.getByLabelText('API Client Secret') as HTMLInputElement).value).toEqual(
+ existingConfigDataNoAuth.clientSecret,
+ );
userEvent.click(authorizeButton);
expect(screen.queryByText(INVALID_LINK)).not.toBeInTheDocument();
diff --git a/src/components/settings/SettingsLMSTab/tests/CornerstoneConfig.test.jsx b/src/components/settings/SettingsLMSTab/tests/CornerstoneConfig.test.jsx
index ae3326b16a..cab0735bdb 100644
--- a/src/components/settings/SettingsLMSTab/tests/CornerstoneConfig.test.jsx
+++ b/src/components/settings/SettingsLMSTab/tests/CornerstoneConfig.test.jsx
@@ -5,10 +5,8 @@ import {
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
-// @ts-ignore
-import CornerstoneConfig from '../LMSConfigs/Cornerstone/CornerstoneConfig.tsx';
-// @ts-ignore
-import FormContextWrapper from '../../../forms/FormContextWrapper.tsx';
+import CornerstoneConfig from '../LMSConfigs/Cornerstone/CornerstoneConfig';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
const enterpriseId = 'test-enterprise-id';
const mockOnClick = jest.fn();
@@ -56,7 +54,6 @@ function testCornerstoneConfigSetup(formData) {
},
})}
onClickOut={mockOnClick}
- onSubmit={mockSetExistingConfigFormData}
formData={formData}
isStepperOpen
dispatch={jest.fn()}
@@ -84,7 +81,7 @@ describe('', () => {
screen.getByLabelText('Display Name');
screen.getByLabelText('Cornerstone Base URL');
});
- test('test button disable', async () => {
+ test('test error messages', async () => {
render(testCornerstoneConfigSetup(noExistingData));
const enableButton = screen.getByRole('button', { name: 'Enable' });
@@ -147,14 +144,16 @@ describe('', () => {
render(testCornerstoneConfigSetup(invalidExistingData));
const enableButton = screen.getByRole('button', { name: 'Enable' });
userEvent.click(enableButton);
+ expect(screen.getByLabelText('Display Name')).toHaveValue(invalidExistingData.displayName);
+ expect(screen.getByLabelText('Cornerstone Base URL')).toHaveValue(invalidExistingData.cornerstoneBaseUrl);
expect(screen.queryByText(INVALID_LINK)).toBeInTheDocument();
expect(screen.queryByText(INVALID_NAME)).toBeInTheDocument();
});
test('validates properly formatted existing data on load', () => {
render(testCornerstoneConfigSetup(existingConfigData));
// ensuring the existing data is prefilled
- expect(screen.getByLabelText('Display Name').value).toEqual(existingConfigData.displayName);
- expect(screen.getByLabelText('Cornerstone Base URL').value).toEqual(existingConfigData.cornerstoneBaseUrl);
+ expect(screen.getByLabelText('Display Name')).toHaveValue(existingConfigData.displayName);
+ expect(screen.getByLabelText('Cornerstone Base URL')).toHaveValue(existingConfigData.cornerstoneBaseUrl);
expect(screen.queryByText(INVALID_LINK)).not.toBeInTheDocument();
expect(screen.queryByText(INVALID_NAME)).not.toBeInTheDocument();
diff --git a/src/components/settings/SettingsLMSTab/tests/DegreedConfig.test.tsx b/src/components/settings/SettingsLMSTab/tests/DegreedConfig.test.tsx
index 87593d00fb..6e70a88f70 100644
--- a/src/components/settings/SettingsLMSTab/tests/DegreedConfig.test.tsx
+++ b/src/components/settings/SettingsLMSTab/tests/DegreedConfig.test.tsx
@@ -1,19 +1,17 @@
-import React from "react";
+import React from 'react';
import {
act, render, fireEvent, screen, waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom/extend-expect";
-// @ts-ignore
-import DegreedConfig from "../LMSConfigs/Degreed/DegreedConfig.tsx";
-import { INVALID_LINK, INVALID_NAME } from "../../data/constants";
-import LmsApiService from "../../../../data/services/LmsApiService";
-// @ts-ignore
-import FormContextWrapper from "../../../forms/FormContextWrapper.tsx";
-// @ts-ignore
-import { validationMessages } from "../LMSConfigs/Degreed/DegreedConfigEnablePage.tsx";
-
-const mockUpdateConfigApi = jest.spyOn(LmsApiService, "updateDegreedConfig");
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+import DegreedConfig from '../LMSConfigs/Degreed/DegreedConfig';
+import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
+import LmsApiService from '../../../../data/services/LmsApiService';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
+import { validationMessages } from '../LMSConfigs/Degreed/DegreedConfigEnablePage';
+
+const mockUpdateConfigApi = jest.spyOn(LmsApiService, 'updateDegreedConfig');
const mockConfigResponseData = {
uuid: 'foobar',
id: 1,
@@ -36,11 +34,11 @@ const noExistingData = {};
const existingConfigData = {
id: 1,
- displayName: "foobar",
+ displayName: 'foobar',
clientId: '1',
clientSecret: 'shhhitsasecret123',
- degreedBaseUrl: "https://foobarish.com",
- degreedTokenFetchBaseUrl: "https://foobarish.com/fetch"
+ degreedBaseUrl: 'https://foobarish.com',
+ degreedTokenFetchBaseUrl: 'https://foobarish.com/fetch',
};
// Existing invalid data that will be validated on load
@@ -48,11 +46,10 @@ const invalidExistingData = {
displayName: "your display name doesn't need to be this long stop it",
clientId: '1',
clientSecret: 'shhhitsasecret123',
- degreedBaseUrl: "bad icky url",
- degreedTokenFetchBaseUrl: "https://foobarish.com/fetch"
+ degreedBaseUrl: 'bad icky url',
+ degreedTokenFetchBaseUrl: 'https://foobarish.com/fetch',
};
-
const noConfigs = [];
afterEach(() => {
@@ -82,7 +79,6 @@ function testDegreedConfigSetup(formData) {
},
})}
onClickOut={mockOnClick}
- onSubmit={mockSetExistingConfigFormData}
formData={formData}
isStepperOpen
dispatch={jest.fn()}
@@ -109,19 +105,19 @@ async function clearForm() {
});
}
-describe("", () => {
+describe('', () => {
beforeEach(() => {
jest.resetAllMocks();
});
- test("renders Degreed Enable Form", () => {
+ test('renders Degreed Enable Form', () => {
render(testDegreedConfigSetup(noConfigs));
- screen.getByLabelText("Display Name");
- screen.getByLabelText("API Client ID");
- screen.getByLabelText("API Client Secret");
- screen.getByLabelText("Degreed Base URL");
- screen.getByLabelText("Degreed Token Fetch Base URL");
+ screen.getByLabelText('Display Name');
+ screen.getByLabelText('API Client ID');
+ screen.getByLabelText('API Client Secret');
+ screen.getByLabelText('Degreed Base URL');
+ screen.getByLabelText('Degreed Token Fetch Base URL');
});
- test("test error messages", async () => {
+ test('test error messages', async () => {
render(testDegreedConfigSetup(noExistingData));
const enableButton = screen.getByRole('button', { name: 'Enable' });
@@ -146,10 +142,10 @@ describe("", () => {
userEvent.click(enableButton);
expect(screen.queryByText(INVALID_LINK));
expect(screen.queryByText(INVALID_NAME));
- userEvent.paste(screen.getByLabelText("Display Name"), "displayName");
+ userEvent.paste(screen.getByLabelText('Display Name'), 'displayName');
userEvent.paste(
- screen.getByLabelText("Degreed Base URL"),
- "https://www.test4.com"
+ screen.getByLabelText('Degreed Base URL'),
+ 'https://www.test4.com',
);
userEvent.click(enableButton);
expect(!screen.queryByText(INVALID_LINK));
@@ -210,7 +206,7 @@ describe("", () => {
test('validates poorly formatted existing data on load', async () => {
render(testDegreedConfigSetup(invalidExistingData));
const enableButton = screen.getByRole('button', { name: 'Enable' });
- userEvent.click(enableButton)
+ userEvent.click(enableButton);
expect(screen.queryByText(INVALID_LINK)).toBeInTheDocument();
expect(screen.queryByText(INVALID_NAME)).toBeInTheDocument();
});
@@ -219,19 +215,23 @@ describe("", () => {
const enableButton = screen.getByRole('button', { name: 'Enable' });
// ensuring the existing data is prefilled
expect((screen.getByLabelText('Display Name') as HTMLInputElement).value).toEqual(
- existingConfigData.displayName);
+ existingConfigData.displayName,
+ );
expect((screen.getByLabelText('API Client ID') as HTMLInputElement).value).toEqual(
- existingConfigData.clientId);
+ existingConfigData.clientId,
+ );
expect((screen.getByLabelText('API Client Secret') as HTMLInputElement).value).toEqual(
- existingConfigData.clientSecret);
+ existingConfigData.clientSecret,
+ );
expect((screen.getByLabelText('Degreed Base URL') as HTMLInputElement).value).toEqual(
- existingConfigData.degreedBaseUrl);
+ existingConfigData.degreedBaseUrl,
+ );
expect((screen.getByLabelText('Degreed Token Fetch Base URL') as HTMLInputElement).value).toEqual(
- existingConfigData.degreedTokenFetchBaseUrl)
+ existingConfigData.degreedTokenFetchBaseUrl,
+ );
- userEvent.click(enableButton)
+ userEvent.click(enableButton);
expect(screen.queryByText(INVALID_LINK)).not.toBeInTheDocument();
expect(screen.queryByText(INVALID_NAME)).not.toBeInTheDocument();
});
-
-});
\ No newline at end of file
+});
diff --git a/src/components/settings/SettingsLMSTab/tests/LmsConfigPage.test.jsx b/src/components/settings/SettingsLMSTab/tests/LmsConfigPage.test.jsx
index 094a3b5aaa..ce4ef6a470 100644
--- a/src/components/settings/SettingsLMSTab/tests/LmsConfigPage.test.jsx
+++ b/src/components/settings/SettingsLMSTab/tests/LmsConfigPage.test.jsx
@@ -12,12 +12,8 @@ import { Provider } from 'react-redux';
import { renderWithRouter } from '../../../test/testUtils';
import {
- BLACKBOARD_TYPE,
- CANVAS_TYPE,
- CORNERSTONE_TYPE,
- DEGREED2_TYPE,
- MOODLE_TYPE,
- SAP_TYPE,
+ BLACKBOARD_TYPE, CANVAS_TYPE, CORNERSTONE_TYPE, DEGREED2_TYPE,
+ MOODLE_TYPE, SAP_TYPE,
} from '../../data/constants';
import { channelMapping } from '../../../../utils';
diff --git a/src/components/settings/SettingsLMSTab/tests/MoodleConfig.test.jsx b/src/components/settings/SettingsLMSTab/tests/MoodleConfig.test.jsx
index 3470e5e55d..8ce4a0720d 100644
--- a/src/components/settings/SettingsLMSTab/tests/MoodleConfig.test.jsx
+++ b/src/components/settings/SettingsLMSTab/tests/MoodleConfig.test.jsx
@@ -1,22 +1,15 @@
import React from 'react';
import {
- act,
- fireEvent,
- render,
- screen,
- waitFor,
+ act, fireEvent, render, screen, waitFor,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
-// @ts-ignore
-import MoodleConfig from '../LMSConfigs/Moodle/MoodleConfig.tsx';
+import MoodleConfig from '../LMSConfigs/Moodle/MoodleConfig';
import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
import LmsApiService from '../../../../data/services/LmsApiService';
-// @ts-ignore
-import FormContextWrapper from '../../../forms/FormContextWrapper.tsx';
-// @ts-ignore
-import { validationMessages } from '../LMSConfigs/Moodle/MoodleConfigEnablePage.tsx';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
+import { validationMessages } from '../LMSConfigs/Moodle/MoodleConfigEnablePage';
const mockUpdateConfigApi = jest.spyOn(LmsApiService, 'updateMoodleConfig');
const mockConfigResponseData = {
@@ -86,7 +79,6 @@ function testMoodleConfigSetup(formData) {
},
})}
onClickOut={mockOnClick}
- onSubmit={mockSetExistingConfigFormData}
formData={formData}
isStepperOpen
dispatch={jest.fn()}
diff --git a/src/components/settings/SettingsLMSTab/tests/SAPConfig.test.jsx b/src/components/settings/SettingsLMSTab/tests/SAPConfig.test.jsx
index 1cd2132c86..83b8153822 100644
--- a/src/components/settings/SettingsLMSTab/tests/SAPConfig.test.jsx
+++ b/src/components/settings/SettingsLMSTab/tests/SAPConfig.test.jsx
@@ -1,22 +1,15 @@
import React from 'react';
import {
- act,
- fireEvent,
- render,
- screen,
- waitFor,
+ act, fireEvent, render, screen, waitFor,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
-// @ts-ignore
-import SAPConfig from '../LMSConfigs/SAP/SAPConfig.tsx';
+import SAPConfig from '../LMSConfigs/SAP/SAPConfig';
import { INVALID_LINK, INVALID_NAME } from '../../data/constants';
import LmsApiService from '../../../../data/services/LmsApiService';
-// @ts-ignore
-import FormContextWrapper from '../../../forms/FormContextWrapper.tsx';
-// @ts-ignore
-import { validationMessages } from '../LMSConfigs/SAP/SAPConfigEnablePage.tsx';
+import FormContextWrapper from '../../../forms/FormContextWrapper';
+import { validationMessages } from '../LMSConfigs/SAP/SAPConfigEnablePage';
const mockUpdateConfigApi = jest.spyOn(LmsApiService, 'updateSuccessFactorsConfig');
const mockConfigResponseData = {
@@ -90,7 +83,6 @@ function testSAPConfigSetup(formData) {
},
})}
onClickOut={mockOnClick}
- onSubmit={mockSetExistingConfigFormData}
formData={formData}
isStepperOpen
dispatch={jest.fn()}
diff --git a/src/components/settings/SettingsSSOTab/ExistingSSOConfigs.jsx b/src/components/settings/SettingsSSOTab/ExistingSSOConfigs.jsx
index 001ef8d47e..09912201ae 100644
--- a/src/components/settings/SettingsSSOTab/ExistingSSOConfigs.jsx
+++ b/src/components/settings/SettingsSSOTab/ExistingSSOConfigs.jsx
@@ -8,7 +8,7 @@ import {
Delete, Edit, MoreVert, PlayCircleFilled, RemoveCircle,
} from '@edx/paragon/icons';
import { SSOConfigContext } from './SSOConfigContext';
-import ConfigError from '../ConfigError';
+import ConfigErrorModal from '../ConfigErrorModal';
import handleErrors from '../utils';
import LmsApiService from '../../../data/services/LmsApiService';
import { errorToggleModalText, errorDeleteConfigModalText, errorDeleteDataModalText } from '../data/constants';
@@ -79,7 +79,7 @@ const ExistingSSOConfigs = ({
return (
- {
.secondary-background {
background: ${brandColors.secondary.regular.hex()} !important;
}
+ .stepper-modal .pgn__modal-header {
+ background-color: ${brandColors.secondary.regular.hex()} !important;
+ border-color: ${brandColors.tertiary.regular.hex()} !important;
+ color: ${brandColors.secondary.textColor.hex()} !important;
+ }
+ .stepper-modal .pgn__modal-close-button {
+ color: ${brandColors.secondary.textColor.hex()} !important;
+ }
`),
});
diff --git a/src/components/settings/settings.scss b/src/components/settings/settings.scss
index 55d8dfa37b..0dca7c30bc 100644
--- a/src/components/settings/settings.scss
+++ b/src/components/settings/settings.scss
@@ -157,3 +157,7 @@
font-size: 1rem;
font-weight: 500;
}
+
+.stepper-modal .pgn__modal-header {
+ border-bottom: solid 7px;
+}
\ No newline at end of file
diff --git a/src/config/index.js b/src/config/index.js
index ca5e4b3f7a..4fe281804e 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -22,7 +22,9 @@ const configuration = {
ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
USER_INFO_COOKIE_NAME: process.env.USER_INFO_COOKIE_NAME,
NODE_ENV: process.env.NODE_ENV,
- CUSTOMER_SUPPORT_EMAIL: 'customersuccess@edx.org', // TODO: avoid using hardcoded email address here...
+ CUSTOMER_SUPPORT_EMAIL: process.env.CUSTOMER_SUPPORT_EMAIL || 'customersuccess@edx.org',
+ CUSTOMER_SUPPORT_NAME: process.env.CUSTOMER_SUPPORT_NAME || 'edX Customer Success team',
+ PLATFORM_NAME: process.env.PLATFORM_NAME || 'edX',
ENTERPRISE_LEARNER_PORTAL_URL: process.env.ENTERPRISE_LEARNER_PORTAL_URL,
ALGOLIA: {
APP_ID: process.env.ALGOLIA_APP_ID,
diff --git a/src/containers/AdminPage/AdminPage.test.jsx b/src/containers/AdminPage/AdminPage.test.jsx
index ff88fdc6e1..29c0770f40 100644
--- a/src/containers/AdminPage/AdminPage.test.jsx
+++ b/src/containers/AdminPage/AdminPage.test.jsx
@@ -4,6 +4,8 @@ import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
import AdminPage from '.';
const mockStore = configureMockStore([thunk]);
@@ -37,7 +39,9 @@ describe('', () => {
wrapper = mount((
-
+
+
+
)).find('Admin');
diff --git a/src/containers/CodeAssignmentModal/CodeAssignmentModal.test.jsx b/src/containers/CodeAssignmentModal/CodeAssignmentModal.test.jsx
index f809bbeca0..7c31cb7ffb 100644
--- a/src/containers/CodeAssignmentModal/CodeAssignmentModal.test.jsx
+++ b/src/containers/CodeAssignmentModal/CodeAssignmentModal.test.jsx
@@ -6,6 +6,7 @@ import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import last from 'lodash/last';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import CodeAssignmentModal from './index';
import assignEmailTemplate from '../../components/CodeAssignmentModal/emailTemplate';
@@ -67,13 +68,15 @@ const initialState = {
const CodeAssignmentModalWrapper = props => (
- {}}
- onSuccess={() => {}}
- {...props}
- />
+
+ {}}
+ onSuccess={() => {}}
+ {...props}
+ />
+
);
diff --git a/src/containers/CodeReminderModal/CodeReminderModal.test.jsx b/src/containers/CodeReminderModal/CodeReminderModal.test.jsx
index 77b0f675da..a41db13eb6 100644
--- a/src/containers/CodeReminderModal/CodeReminderModal.test.jsx
+++ b/src/containers/CodeReminderModal/CodeReminderModal.test.jsx
@@ -6,6 +6,7 @@ import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import last from 'lodash/last';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import CodeReminderModal from './index';
import EcommerceApiService from '../../data/services/EcommerceApiService';
@@ -123,13 +124,15 @@ const codeReminderRequestData = (numCodes, selectedToggle) => {
const CodeReminderModalWrapper = props => (
- {}}
- onSuccess={() => {}}
- {...props}
- />
+
+ {}}
+ onSuccess={() => {}}
+ {...props}
+ />
+
);
diff --git a/src/containers/CodeRevokeModal/CodeRevokeModal.test.jsx b/src/containers/CodeRevokeModal/CodeRevokeModal.test.jsx
index 30d5a1a165..f91d9ffab6 100644
--- a/src/containers/CodeRevokeModal/CodeRevokeModal.test.jsx
+++ b/src/containers/CodeRevokeModal/CodeRevokeModal.test.jsx
@@ -6,6 +6,7 @@ import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import last from 'lodash/last';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import EcommerceApiService from '../../data/services/EcommerceApiService';
import CodeRevokeModal from './index';
@@ -81,13 +82,15 @@ const codeRevokeRequestData = (numCodes) => {
const CodeRevokeModalWrapper = props => (
- {}}
- onSuccess={() => {}}
- {...props}
- />
+
+ {}}
+ onSuccess={() => {}}
+ {...props}
+ />
+
);
diff --git a/src/containers/CouponDetails/CouponDetails.test.jsx b/src/containers/CouponDetails/CouponDetails.test.jsx
index 1bf4d107d1..1975c9b362 100644
--- a/src/containers/CouponDetails/CouponDetails.test.jsx
+++ b/src/containers/CouponDetails/CouponDetails.test.jsx
@@ -11,6 +11,7 @@ import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { StatusAlert } from '@edx/paragon';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import { SINGLE_USE, MULTI_USE, ONCE_PER_CUSTOMER } from '../../data/constants/coupons';
import EcommerceaApiService from '../../data/services/EcommerceApiService';
@@ -96,10 +97,12 @@ const initialCouponData = {
const CouponDetailsWrapper = props => (
-
+
+
+
);
diff --git a/src/containers/DownloadCsvButton/DownloadCsvButton.test.jsx b/src/containers/DownloadCsvButton/DownloadCsvButton.test.jsx
index 079e27a2ed..24597a0526 100644
--- a/src/containers/DownloadCsvButton/DownloadCsvButton.test.jsx
+++ b/src/containers/DownloadCsvButton/DownloadCsvButton.test.jsx
@@ -4,6 +4,7 @@ import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import DownloadCsvButton from './index';
import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
@@ -31,7 +32,9 @@ describe('', () => {
wrapper = mount((
-
+
+
+
)).find('DownloadCsvButton');
diff --git a/src/containers/EnterpriseApp/EnterpriseApp.test.jsx b/src/containers/EnterpriseApp/EnterpriseApp.test.jsx
index e4f0be7fb9..bde4287dcc 100644
--- a/src/containers/EnterpriseApp/EnterpriseApp.test.jsx
+++ b/src/containers/EnterpriseApp/EnterpriseApp.test.jsx
@@ -8,6 +8,7 @@ import thunk from 'redux-thunk';
import { mount } from 'enzyme';
import { breakpoints, Skeleton } from '@edx/paragon';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import { axiosMock } from '../../setupTest';
import EnterpriseApp from './index';
@@ -96,10 +97,12 @@ const initialState = {
const EnterpriseAppWrapper = ({ store, initialEntries, ...props }) => (
- }
- />
+
+ }
+ />
+
);
diff --git a/src/containers/Footer/Footer.test.jsx b/src/containers/Footer/Footer.test.jsx
index c985b26919..dc6a725e34 100644
--- a/src/containers/Footer/Footer.test.jsx
+++ b/src/containers/Footer/Footer.test.jsx
@@ -4,6 +4,7 @@ import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
import { configuration } from '../../config';
import Footer from './index';
@@ -12,10 +13,12 @@ const mockStore = configureMockStore([thunk]);
const FooterWrapper = props => (
-
+
+
+
);
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000000..35b84f2604
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,5 @@
+import { messages as paragonMessages } from '@edx/paragon';
+
+export default [
+ paragonMessages,
+];
diff --git a/src/index.jsx b/src/index.jsx
index 54443b23a6..39bebbc913 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,10 +12,9 @@ import {
} from '@edx/frontend-platform';
import { ErrorPage } from '@edx/frontend-platform/react';
import { hasFeatureFlagEnabled } from '@edx/frontend-enterprise-utils';
-import { messages as paragonMessages } from '@edx/paragon';
+import messages from './i18n';
import App from './components/App';
-
import './index.scss';
subscribe(APP_READY, () => {
@@ -43,9 +42,7 @@ initialize({
});
},
},
- messages: [
- paragonMessages,
- ],
+ messages,
requireAuthenticatedUser: false,
hydrateAuthenticatedUser: true,
});