Skip to content

Commit

Permalink
chore: Marked strings for SSO tab in admin portal settings page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@saleem-latif
saleem-latif committed Jun 3, 2024
1 parent 1d0c7a4 commit 3498f52
Show file tree
Hide file tree
Showing 20 changed files with 1,001 additions and 266 deletions.
4 changes: 2 additions & 2 deletions src/components/forms/ValidatedFormCheckbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { ReactNode } from 'react';
import omit from 'lodash/omit';
import isString from 'lodash/isString';

Expand All @@ -9,7 +9,7 @@ import { useFormContext } from './FormContext';

type InheritedParagonCheckboxProps = {
className?: string;
children: string;
children: ReactNode;
};

export type ValidatedFormCheckboxProps = {
Expand Down
31 changes: 25 additions & 6 deletions src/components/settings/SettingsSSOTab/NewExistingSSOConfigs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import LmsApiService from '../../../data/services/LmsApiService';
import NewSSOConfigAlerts from './NewSSOConfigAlerts';
import NewSSOConfigCard from './NewSSOConfigCard';
Expand Down Expand Up @@ -37,6 +38,7 @@ const NewExistingSSOConfigs = ({
const [updateError, setUpdateError] = useState(null);

const queryClient = useQueryClient();
const intl = useIntl();

const renderCards = (gridTitle, configList) => {
if (configList.length > 0) {
Expand Down Expand Up @@ -72,11 +74,20 @@ const NewExistingSSOConfigs = ({
icon={Info}
onClose={() => (setUpdateError(null))}
>
<Alert.Heading>Something went wrong behind the scenes</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.sso.error.heading"
defaultMessage="Something went wrong behind the scenes"
description="Error heading for SSO configuration error alert."
/>
</Alert.Heading>
<p>
We were unable to {updateError?.action} your SSO configuration due to an internal error. Please
{' '}try again in a couple of minutes. If the problem persists, contact enterprise customer
{' '}support.
<FormattedMessage
id="adminPortal.settings.sso.error.message"
defaultMessage="We were unable to {action} your SSO configuration due to an internal error. Please try again in a couple of minutes. If the problem persists, contact enterprise customer support."
description="Error message for SSO configuration error alert."
values={{ action: updateError?.action }}
/>
</p>
</Alert>
</div>
Expand Down Expand Up @@ -211,8 +222,16 @@ const NewExistingSSOConfigs = ({
setIsStepperOpen={setIsStepperOpen}
/>
)}
{renderCards('Active', activeConfigs)}
{renderCards('Inactive', inactiveConfigs)}
{renderCards(intl.formatMessage({
id: 'adminPortal.settings.sso.active',
defaultMessage: 'Active',
description: 'Title for the active SSO configurations grid',
}), activeConfigs)}
{renderCards(intl.formatMessage({
id: 'adminPortal.settings.sso.inactive',
defaultMessage: 'Inactive',
description: 'Title for the inactive SSO configurations grid',
}), inactiveConfigs)}
</>
)}
{loading && (
Expand Down
133 changes: 111 additions & 22 deletions src/components/settings/SettingsSSOTab/NewSSOConfigAlerts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
} from '@openedx/paragon/icons';
import { Alert, Button } from '@openedx/paragon';
import Cookies from 'universal-cookie';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { SSOConfigContext } from './SSOConfigContext';

export const SSO_SETUP_COMPLETION_COOKIE_NAME = 'dismissed-sso-completion-alert';
Expand Down Expand Up @@ -56,17 +57,32 @@ const NewSSOConfigAlerts = ({
icon={Info}
className="sso-alert-width"
actions={[
<Button data-testid="sso-timeout-alert-configure" onClick={onTimedOutConfigureClick}>Configure</Button>,
<Button data-testid="sso-timeout-alert-configure" onClick={onTimedOutConfigureClick}>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.configure"
defaultMessage="Configure"
description="Button text to configure SSO"
/>
</Button>,
]}
dismissible
show={showTimeoutAlert}
onClose={() => { setShowTimeoutAlert(false); }}
stacked
>
<Alert.Heading>SSO Configuration timed out</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.timeout.header"
defaultMessage="SSO Configuration timed out"
description="Alert message for SSO configuration timeout"
/>
</Alert.Heading>
<p>
Your SSO configuration failed due to an internal error. Please try again by selecting “Configure” below and
{' '}verifying your integration details. Then reconfigure, reauthorize, and test your connection.
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.internalErrorMessage"
defaultMessage="Your SSO configuration failed due to an internal error. Please try again by selecting “Configure” below and verifying your integration details. Then reconfigure, reauthorize, and test your connection."
description="Alert message for SSO configuration error."
/>
</p>
</Alert>
);
Expand All @@ -80,16 +96,31 @@ const NewSSOConfigAlerts = ({
className="sso-alert-width"
show={showErrorAlert}
actions={[
<Button data-testid="sso-errored-alert-configure" onClick={onErroredConfigClick}>Configure</Button>,
<Button data-testid="sso-errored-alert-configure" onClick={onErroredConfigClick}>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.configure"
defaultMessage="Configure"
description="Button text to configure SSO"
/>
</Button>,
]}
dismissible
onClose={() => { setShowErrorAlert(false); }}
stacked
>
<Alert.Heading>SSO Configuration failed</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.error.header"
defaultMessage="SSO Configuration failed"
description="Alert message for SSO configuration error"
/>
</Alert.Heading>
<p>
Please verify integration details have been entered correctly. Select “Configure” below and verify your
{' '}integration details. Then reconfigure, reauthorize, and test your connection.
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.inputErrorMessage"
defaultMessage="Please verify integration details have been entered correctly. Select “Configure” below and verify your integration details. Then reconfigure, reauthorize, and test your connection."
description="Alert message for SSO configuration error."
/>
</p>
</Alert>
);
Expand All @@ -105,10 +136,30 @@ const NewSSOConfigAlerts = ({
dismissible
onClose={closeAlerts}
>
<Alert.Heading>Your SSO Integration is in progress</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.inProgress.header"
defaultMessage="Your SSO Integration is in progress"
description="Alert message for SSO configuration in progress"
/>
</Alert.Heading>
<p>
edX is configuring your SSO. This step takes approximately{' '}
{notConfigured.length > 0 ? `five minutes. You will receive an email at ${contactEmail} when the configuration is complete` : 'fifteen seconds'}.
{notConfigured.length > 0 ? (
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.inProgress.message"
defaultMessage="edX is configuring your SSO. This step takes approximately five minutes. You will receive an email at {contactEmail} when the configuration is complete"
description="Alert message for SSO configuration in progress"
values={{
contactEmail,
}}
/>
) : (
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.inProgress.messageNoEmail"
defaultMessage="edX is configuring your SSO. This step takes approximately fifteen seconds."
description="Alert message for SSO configuration in progress"
/>
)}
</p>
</Alert>
)}
Expand All @@ -120,22 +171,50 @@ const NewSSOConfigAlerts = ({
onClose={closeAlerts}
dismissible
>
<Alert.Heading>You need to test your SSO connection</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.untested.header"
defaultMessage="You need to test your SSO connection"
description="Alert message for SSO configuration that need to be tested."
/>
</Alert.Heading>
<p>
Your SSO configuration has been completed,
and you should have received an email with the following instructions:<br />
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.testing.instructions"
defaultMessage="Your SSO configuration has been completed, and you should have received an email with the following instructions:"
description="Alert message for SSO configuration that need to be tested."
/>
<br />
<br />
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.testing.instructionsList.item1"
defaultMessage="1: Copy the URL for your Learner Portal dashboard below:"
description="First instruction for SSO configuration testing."
/>
<br />
1: Copy the URL for your Learner Portal dashboard below:<br />
<br />
&emsp; http://courses.edx.org/dashboard?tpa_hint={enterpriseSlug}<br />
<br />
2: Launch a new incognito or private window and paste the copied URL into the URL bar to load your
Learner Portal dashboard.<br />
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.testing.instructionsList.item2"
defaultMessage="2: Launch a new incognito or private window and paste the copied URL into the URL bar to load your Learner Portal dashboard."
description="Second instruction for SSO configuration testing."
/>
<br />
<br />
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.testing.instructionsList.item3"
defaultMessage="3: When prompted, enter login credentials supported by your IDP to test your connection to edX."
description="Third instruction for SSO configuration testing."
/>
<br />
<br />
3: When prompted, enter login credentials supported by your IDP to test your connection to edX.<br />
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.testing.instructionsList.item4"
defaultMessage="Return to this window after completing the testing instructions. This window will automatically update when a successful test is detected."
description="Final instruction for SSO configuration testing."
/>
<br />
Return to this window after completing the testing instructions.
This window will automatically update when a successful test is detected.<br />
</p>
</Alert>
)}
Expand All @@ -150,9 +229,19 @@ const NewSSOConfigAlerts = ({
onClose={dismissSetupCompleteAlert}
dismissible
>
<Alert.Heading>Your SSO integration is live!</Alert.Heading>
<Alert.Heading>
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.live.header"
defaultMessage="Your SSO integration is live!"
description="Alert message for SSO configuration that is live."
/>
</Alert.Heading>
<p>
Great news! Your test was successful and your new SSO integration is live and ready to use.
<FormattedMessage
id="adminPortal.settings.ssoConfigAlert.live.message"
defaultMessage="Great news! Your test was successful and your new SSO integration is live and ready to use."
description="Alert message for SSO configuration that is live."
/>
</p>
</Alert>
)}
Expand Down
Loading

0 comments on commit 3498f52

Please sign in to comment.