fix: bug bash fixes (#989)

* fix: bug bash fixes * fix: fixing displayname bug * fix: fixing displayname bug * fix: timeout bug
openedx · May 24, 2023 · 3400b01 · 3400b01
1 parent 2add155
commit 3400b01
Show file tree

Hide file tree

Showing 21 changed files with 211 additions and 117 deletions.
diff --git a/src/components/settings/SettingsLMSTab/LMSConfigPage.jsx b/src/components/settings/SettingsLMSTab/LMSConfigPage.jsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
@@ -27,7 +28,7 @@ const LMSConfigPage = ({
     enterpriseCustomerUuid,
     onSubmit: setExistingConfigFormData,
     handleCloseClick: handleCloseWorkflow,
-    existingData: existingConfigFormData,
+    existingData: _.cloneDeep(existingConfigFormData),
     existingConfigNames: existingConfigs,
     channelMap,
     lmsType,

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfig.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import _ from 'lodash';
 import { snakeCaseDict } from "../../../../../utils";
 import {
   BLACKBOARD_TYPE,
@@ -112,11 +114,12 @@ export const BlackboardFormConfig = ({
 
   const activatePage = () => ConfigActivatePage(BLACKBOARD_TYPE);
 
+
   const steps: FormWorkflowStep<BlackboardConfigCamelCase>[] = [
     {
       index: 1,
       formComponent: BlackboardConfigAuthorizePage,
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Authorize",
       saveChanges,
       nextButtonConfig: (formFields: BlackboardConfigCamelCase) => {
@@ -125,7 +128,8 @@ export const BlackboardFormConfig = ({
           opensNewWindow: false,
           onClick: handleSubmit,
         };
-        if (!formFields.refreshToken) {
+        // if they've never authorized it or if they've changed the form
+        if (!formFields.refreshToken || !_.isEqual(existingData, formFields)) {
           config = {
             ...config,
             ...{

diff --git a/...omponents/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx b/...omponents/settings/SettingsLMSTab/LMSConfigs/Blackboard/BlackboardConfigAuthorizePage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Alert, Container, Form, Image } from "@edx/paragon";
 import { Info } from "@edx/paragon/icons";
 
@@ -43,7 +43,13 @@ export const validations: FormFieldValidation[] = [
 
 // Settings page of Blackboard LMS config workflow
 const BlackboardConfigAuthorizePage = () => {
-  const { dispatch, stateMap } = useFormContext();
+  const { formFields, dispatch, stateMap } = useFormContext();
+  const [isExisting, setIsExisting] = useState(false);
+  useEffect(() => {
+    if (formFields?.id) {
+      setIsExisting(true);
+    }
+  }, []);
   return (
     <Container size='md'>
       <span className='d-flex pb-4'>
@@ -57,12 +63,20 @@ const BlackboardConfigAuthorizePage = () => {
       </span>
       <Form style={{ maxWidth: "60rem" }}>
         {stateMap?.[LMS_AUTHORIZATION_FAILED] && (
-          <Alert variant="danger" icon={Info}>
+          <Alert variant="danger" className='mb-4' icon={Info}>
             <h3>Enablement failed</h3>
             We were unable to enable your Blackboard integration. Please try again
             or contact enterprise customer support.
           </Alert>
         )}
+        {isExisting && (
+          <Alert variant="info" className='mb-4' icon={Info}>
+            <h3>Form updates require reauthorization</h3>
+            Your authorization is currently complete. By updating the form below,
+            reauthorization will be required and advancing to the next step will
+            open a new window to complete the process in Blackboard. Return to this window
+            following reauthorization to finish reconfiguring your integration.
+          </Alert>)}
         <Form.Group className="my-4.5">
           <ValidatedFormControl
             formId={formFieldNames.DISPLAY_NAME}
@@ -79,6 +93,12 @@ const BlackboardConfigAuthorizePage = () => {
             floatingLabel="Blackboard Base URL"
           />
         </Form.Group>
+        <Alert variant="info" icon={Info}>
+          <h3>Authorization in Blackboard required to complete configuration</h3>
+          Advancing to the next step will open a new window to complete the authorization
+          process in Blackboard. Return to this window following authorization to finish configuring
+          your new integration.
+        </Alert>
         <FormWaitModal
           triggerState={WAITING_FOR_ASYNC_OPERATION}
           onClose={() =>

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Canvas/CanvasConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Canvas/CanvasConfig.tsx
@@ -1,3 +1,5 @@
+import { useState, useEffect } from 'react';
+import _ from 'lodash';
 import { snakeCaseDict } from "../../../../../utils";
 import { 
   CANVAS_TYPE, LMS_CONFIG_OAUTH_POLLING_INTERVAL, LMS_CONFIG_OAUTH_POLLING_TIMEOUT,
@@ -113,7 +115,7 @@ export const CanvasFormConfig = ({
     {
       index: 1,
       formComponent: CanvasConfigAuthorizePage,
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Authorize",
       saveChanges,
       nextButtonConfig: (formFields: CanvasConfigCamelCase) => {
@@ -122,7 +124,8 @@ export const CanvasFormConfig = ({
           opensNewWindow: false,
           onClick: handleSubmit,
         };
-        if (!formFields.refreshToken) {
+        // if they've never authorized it or if they've changed the form
+        if (!formFields.refreshToken || !_.isEqual(existingData, formFields)) {
           config = {
             ...config,
             ...{

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Canvas/CanvasConfigAuthorizePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Canvas/CanvasConfigAuthorizePage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { Alert, Container, Form, Image } from "@edx/paragon";
 import { Info } from "@edx/paragon/icons";
@@ -83,7 +83,14 @@ export const validations: FormFieldValidation[] = [
 
 // Settings page of Canvas LMS config workflow
 const CanvasConfigAuthorizePage = () => {
-  const { dispatch, stateMap } = useFormContext();
+  const { formFields, dispatch, stateMap } = useFormContext();
+  const [isExisting, setIsExisting] = useState(false);
+  useEffect(() => {
+    if (formFields?.id) {
+      setIsExisting(true);
+    }
+  }, []);
+
   return (
     <Container size='md'>
       <span className='d-flex pb-4'>
@@ -97,13 +104,20 @@ const CanvasConfigAuthorizePage = () => {
       </span>
       <Form style={{ maxWidth: "60rem" }}>
         {stateMap?.[LMS_AUTHORIZATION_FAILED] && (
-          <Alert variant="danger" icon={Info}>
+          <Alert variant="danger" className='mb-4' icon={Info}>
             <h3>Enablement failed</h3>
             We were unable to enable your Canvas integration. Please try again
             or contact enterprise customer support.
           </Alert>
         )}
-
+        {isExisting && (
+          <Alert variant="info" className='mb-4' icon={Info}>
+            <h3>Form updates require reauthorization</h3>
+            Your authorization is currently complete. By updating the form below,
+            reauthorization will be required and advancing to the next step will
+            open a new window to complete the process in Canvas. Return to this window
+            following reauthorization to finish reconfiguring your integration.
+          </Alert>)}
         <Form.Group className="my-2.5">
           <ValidatedFormControl
             formId={formFieldNames.DISPLAY_NAME}
@@ -148,6 +162,12 @@ const CanvasConfigAuthorizePage = () => {
             floatingLabel="Canvas Base URL"
           />
         </Form.Group>
+        <Alert variant="info" icon={Info}>
+            <h3>Authorization in Canvas required to complete configuration</h3>
+            Advancing to the next step will open a new window to complete the authorization
+            process in Canvas. Return to this window following authorization to finish configuring 
+            your new integration.
+        </Alert>
         <FormWaitModal
           triggerState={WAITING_FOR_ASYNC_OPERATION}
           onClose={() =>

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Cornerstone/CornerstoneConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Cornerstone/CornerstoneConfig.tsx
@@ -90,7 +90,7 @@ export const CornerstoneFormConfig = ({
     {
       index: 1,
       formComponent: CornerstoneConfigEnablePage, 
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Enable",
       saveChanges,
       nextButtonConfig: () => {

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedConfig.tsx
@@ -17,7 +17,7 @@ export type DegreedConfigCamelCase = {
   clientId: string;
   clientSecret: string;
   degreedBaseUrl: string;
-  degreedFetchUrl: string;
+  degreedTokenFetchBaseUrl: string;
   id: string;
   active: boolean;
   uuid: string;
@@ -29,7 +29,7 @@ export type DegreedConfigSnakeCase = {
   client_id: string;
   client_secret: string;
   degreed_base_url: string;
-  degreed_fetch_url: string;
+  degreed_token_fetch_base_url: string;
   id: string;
   active: boolean;
   uuid: string;
@@ -94,7 +94,7 @@ export const DegreedFormConfig = ({
     {
       index: 1,
       formComponent: DegreedConfigAuthorizePage,
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Enable",
       saveChanges,
       nextButtonConfig: () => {

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedConfigEnablePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Degreed/DegreedConfigEnablePage.tsx
@@ -9,17 +9,13 @@ import { channelMapping, urlValidation } from "../../../../../utils";
 import type {
   FormFieldValidation,
 } from "../../../../forms/FormContext";
-import {
-  useFormContext,
-  // @ts-ignore
-} from "../../../../forms/FormContext.tsx";
 
 export const formFieldNames = {
   DISPLAY_NAME: "displayName",
   CLIENT_ID: "clientId",
   CLIENT_SECRET: "clientSecret",
   DEGREED_BASE_URL: "degreedBaseUrl",
-  DEGREED_FETCH_URL: "degreedFetchUrl",
+  DEGREED_TOKEN_FETCH_BASE_URL: "degreedTokenFetchBaseUrl",
 };
 
 export const validations: FormFieldValidation[] = [
@@ -36,9 +32,9 @@ export const validations: FormFieldValidation[] = [
     },
   },
   {
-    formFieldId: formFieldNames.DEGREED_FETCH_URL,
+    formFieldId: formFieldNames.DEGREED_TOKEN_FETCH_BASE_URL,
     validator: (fields) => {
-      const degreedUrl = fields[formFieldNames.DEGREED_FETCH_URL];
+      const degreedUrl = fields[formFieldNames.DEGREED_TOKEN_FETCH_BASE_URL];
       if (degreedUrl) {
         const error = !urlValidation(degreedUrl);
         return error ? INVALID_LINK : false;
@@ -130,7 +126,7 @@ const DegreedConfigEnablePage = () => {
         </Form.Group>
         <Form.Group className="my-4">
           <ValidatedFormControl
-            formId={formFieldNames.DEGREED_FETCH_URL}
+            formId={formFieldNames.DEGREED_TOKEN_FETCH_BASE_URL}
             className="mt-4"
             type="text"
             maxLength={255}

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfig.tsx
@@ -15,7 +15,7 @@ export type MoodleConfigCamelCase = {
   lms: string;
   displayName: string;
   moodleBaseUrl: string;
-  webserviceShortName: string;
+  serviceShortName: string;
   token: string;
   username: string;
   password: string;
@@ -28,7 +28,7 @@ export type MoodleConfigSnakeCase = {
   lms: string;
   display_name: string;
   moodle_base_url: string;
-  webservice_short_name: string;
+  service_short_name: string;
   token: string;
   username: string;
   password: string;
@@ -97,7 +97,7 @@ export const MoodleFormConfig = ({
     {
       index: 1,
       formComponent: MoodleConfigEnablePage,
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Enable",
       saveChanges,
       nextButtonConfig: () => {

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/Moodle/MoodleConfigEnablePage.tsx
@@ -13,7 +13,7 @@ import type {
 export const formFieldNames = {
   DISPLAY_NAME: "displayName",
   MOODLE_BASE_URL: "moodleBaseUrl",
-  WEBSERVICE_SHORT_NAME: "webserviceShortName",
+  SERVICE_SHORT_NAME: "serviceShortName",
   TOKEN: "token",
   USERNAME: "username",
   PASSWORD: "password",
@@ -49,10 +49,10 @@ export const validations: FormFieldValidation[] = [
     },
   },
   {
-    formFieldId: formFieldNames.WEBSERVICE_SHORT_NAME,
+    formFieldId: formFieldNames.SERVICE_SHORT_NAME,
     validator: (fields) => {
-      const webserviceShortName = fields[formFieldNames.WEBSERVICE_SHORT_NAME];
-      return !webserviceShortName;
+      const serviceShortName = fields[formFieldNames.SERVICE_SHORT_NAME];
+      return !serviceShortName;
     },
   },
   {
@@ -112,7 +112,7 @@ const MoodleConfigEnablePage = () => {
         </Form.Group>
         <Form.Group>
           <ValidatedFormControl
-            formId={formFieldNames.WEBSERVICE_SHORT_NAME}
+            formId={formFieldNames.SERVICE_SHORT_NAME}
             className="my-4"
             type="text"
             maxLength={255}

diff --git a/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx b/src/components/settings/SettingsLMSTab/LMSConfigs/SAP/SAPConfig.tsx
@@ -14,12 +14,12 @@ import { activateConfig, checkForDuplicateNames, handleSaveHelper, handleSubmitH
 export type SAPConfigCamelCase = {
   lms: string;
   displayName: string;
-  sapBaseUrl: string;
-  sapCompanyId: string;
-  sapUserId: string;
-  oauthClientId: string;
-  oauthClientSecret: string;
-  sapUserType: string;
+  sapsfBaseUrl: string;
+  sapsfCompanyId: string;
+  sapsfUserId: string;
+  key: string;
+  secret: string;
+  userType: string;
   id: string;
   active: boolean;
   uuid: string;
@@ -28,12 +28,12 @@ export type SAPConfigCamelCase = {
 export type SAPConfigSnakeCase = {
   lms: string;
   display_name: string;
-  sap_base_url: string;
-  sap_company_id: string;
-  sap_user_id: string;
-  oauth_client_id: string;
-  oauth_client_secret: string;
-  sap_user_type: 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;
@@ -100,7 +100,7 @@ export const SAPFormConfig = ({
     {
       index: 1,
       formComponent: SAPConfigEnablePage,
-      validations: validations.concat([checkForDuplicateNames(existingConfigNames, existingData)]),
+      validations: validations.concat([checkForDuplicateNames(existingConfigNames)]),
       stepName: "Enable",
       saveChanges,
       nextButtonConfig: () => {