Skip to content

Commit

Permalink
Merge pull request #1245 from openedx/maham/ENT-8763
Browse files Browse the repository at this point in the history 
[ENT-8763] Marked strings on last three tabs of settings page
  • Loading branch information
@mahamakifdar19
mahamakifdar19 authored Jun 4, 2024
2 parents 9fef4a4 + 0cdde12 commit b438ffd
Show file tree
Hide file tree
Showing 26 changed files with 928 additions and 458 deletions.
9 changes: 8 additions & 1 deletion src/components/settings/HelpCenterButton.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { Hyperlink } from '@openedx/paragon';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@edx/frontend-platform/i18n';

const HelpCenterButton = ({
url,
Expand All @@ -22,7 +23,13 @@ const HelpCenterButton = ({
};

HelpCenterButton.defaultProps = {
children: 'Help Center',
children: (
<FormattedMessage
id="adminPortal.settings.learningPlatformTab.helpCenter.button"
defaultMessage="Help Center"
description="Default text for the Help Center button"
/>
),
};

HelpCenterButton.propTypes = {
Expand Down
122 changes: 97 additions & 25 deletions src/components/settings/SettingsApiCredentialsTab/APICredentialsPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,125 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { Form, Hyperlink } from '@openedx/paragon';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import { dataPropType } from './constants';
import RegenerateCredentialWarningModal from './RegenerateCredentialWarningModal';
import CopyButton from './CopyButton';
import { API_CLIENT_DOCUMENTATION, HELP_CENTER_LINK } from '../data/constants';

const APICredentialsPage = ({ data, setData }) => {
const [formValue, setFormValue] = useState(data?.redirect_uris);
const intl = useIntl();

const handleFormChange = (e) => {
setFormValue(e.target.value);
};
return (
<div>
<div className="mb-4">
<h3>Your API credentials</h3>
<h3>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.header"
defaultMessage="Your API credentials"
description="Heading for the API credentials section"
/>
</h3>
<p>
Copy and paste the following credential information and send it to your API developer(s).
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.copyAndPasteLabel"
defaultMessage="Copy and paste the following credential information and send it to your API developer(s)."
description="Instructions to copy and paste API credentials"
/>
</p>
</div>
<div className="mb-4 api-cred-fields">
<h4>
Application name:
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.applicationName"
defaultMessage="Application name:"
description="Label for application name"
/>
<span>{data?.name}</span>
</h4>
<h4>
Allowed URIs:
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.allowedUris"
defaultMessage="Allowed URIs:"
description="Label for allowed URIs"
/>
<span>{data?.redirect_uris}</span>
</h4>
<h4>
API client ID:
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.apiClientId"
defaultMessage="API client ID:"
description="Label for API client ID"
/>
<span>{data?.client_id}</span>
</h4>
<h4>
API client secret:
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.apiClientSecret"
defaultMessage="API client secret:"
description="Label for API client secret"
/>
<span>{data?.client_secret}</span>
</h4>
<h4>API client documentation:
<h4>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.apiClientDocumentation"
defaultMessage="API client documentation:"
description="Label for API client documentation"
/>
<span>{API_CLIENT_DOCUMENTATION}</span>
</h4>
<h4>
Last generated on:
<span>{data?.updated}</span>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.lastGeneratedOn"
defaultMessage="Last generated on: <span>{lastUpdatedate}</span>"
description="Label for the last generated date of API credentials"
values={{
lastUpdatedate: data?.updated,
// eslint-disable-next-line react/no-unstable-nested-components
span: (chunks) => <span>{chunks}</span>,
}}
/>
</h4>
<div className="my-3">
<CopyButton data={data} />
</div>
</div>
<div className="my-5">
<h3>Redirect URIs (optional)</h3>
<h3>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.redirectUris"
defaultMessage="Redirect URIs (optional)"
description="Heading for the optional redirect URIs section"
/>
</h3>
<p>
If you need additional redirect URIs, add them below and regenerate your API credentials.
You will need to communicate the new credentials to your API developers.
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.additionalRedirectUris"
defaultMessage="If you need additional redirect URIs, add them below and regenerate your API credentials. You will need to communicate the new credentials to your API developers."
description="Instructions for adding additional redirect URIs and regenerating API credentials"
/>
</p>
<Form.Control
value={formValue}
onChange={handleFormChange}
floatingLabel="Redirect URIs"
floatingLabel={intl.formatMessage({
id: 'adminPortal.settings.apiCredentialsTab.apiCredentialsPage.redirectUrisLabel',
defaultMessage: 'Redirect URIs',
description: 'Label for the redirect URIs input field',
})}
data-testid="form-control"
/>
<p>
Allowed URIs list, space separated
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.allowedUrisList"
defaultMessage="Allowed URIs list, space separated"
description="Text indicating how to list allowed URIs"
/>
</p>
<RegenerateCredentialWarningModal
redirectURIs={formValue}
Expand All @@ -70,17 +128,31 @@ const APICredentialsPage = ({ data, setData }) => {
/>
</div>
<div className="mb-4">
<h3>Questions or modifications?</h3>
<h3>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.questionsOrModifications"
defaultMessage="Questions or modifications?"
description="Heading for the questions or modifications section"
/>
</h3>
<p>
To troubleshoot your API credentialing, or to request additional API endpoints to your
credentials,&nbsp;
<Hyperlink
variant="muted"
destination={HELP_CENTER_LINK}
target="_blank"
>
contact Enterprise Customer Support.
</Hyperlink>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.apiCredentialsPage.troubleshootOrRequest"
defaultMessage="To troubleshoot your API credentialing, or to request additional API endpoints to your credentials, <a>contact Enterprise Customer Support.</a>"
description="Instructions for troubleshooting or requesting modifications to API credentials"
values={{
// eslint-disable-next-line react/no-unstable-nested-components
a: chunks => (
<Hyperlink
variant="muted"
destination={HELP_CENTER_LINK}
target="_blank"
>
{chunks}
</Hyperlink>
),
}}
/>
</p>
</div>
</div>
Expand Down
79 changes: 58 additions & 21 deletions src/components/settings/SettingsApiCredentialsTab/ZeroStateCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Button, Card, Hyperlink, Icon, Spinner,
} from '@openedx/paragon';
import { Add, Error } from '@openedx/paragon/icons';
import { FormattedMessage } from '@edx/frontend-platform/i18n';

import { credentialErrorMessage } from './constants';
import cardImage from '../../../data/images/ZeroState.svg';
Expand Down Expand Up @@ -38,44 +39,68 @@ const ZeroStateCard = ({ setShowToast, setData }) => {
srcAlt="Card image"
/>
<Card.Section className="text-center">
<h2>You don&apos;t have API credentials yet.</h2>
<h2>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.noApiCredentials"
defaultMessage="You do not have API credentials yet."
description="Header for the zero state card indicating no API credentials"
/>
</h2>
{ !displayFailureAlert && (
<p>
This page allows you to generate API credentials to send to
your developers so they can work on integration projects.
If you believe you are seeing this page in error,&nbsp;
<Hyperlink
variant="muted"
destination={HELP_CENTER_LINK}
target="_blank"
rel="noopener noreferrer"
>
contact Enterprise Customer Support.
</Hyperlink>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.generateApiCredentialsInfo"
defaultMessage="This page allows you to generate API credentials to send to your developers so they can work on integration projects. If you believe you are seeing this page in error, <a>contact Enterprise Customer Support.</a>"
description="Info text explaining the purpose of the page and what to do if there is an error"
values={{
// eslint-disable-next-line react/no-unstable-nested-components
a: (chunks) => (
<Hyperlink
variant="muted"
destination={HELP_CENTER_LINK}
target="_blank"
rel="noopener noreferrer"
>
{chunks}
</Hyperlink>
),
}}
/>
</p>
)}
<p>
edX for Business API credentials will provide access to the following
edX API endpoints: reporting dashboard, dashboard, and catalog administration.
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.apiAccessInfo"
defaultMessage="edX for Business API credentials will provide access to the following edX API endpoints: reporting dashboard, dashboard, and catalog administration."
description="Info text explaining the access provided by the API credentials"
/>
</p>
<p>
By clicking the button below, you and your organization accept the&nbsp;
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.acceptTermsInfo"
defaultMessage="By clicking the button below, you and your organization accept the "
description="Info text explaining that clicking the button means accepting the terms of service"
/>
<Hyperlink
variant="muted"
destination={API_TERMS_OF_SERVICE}
target="_blank"
rel="noopener noreferrer"
>
edX API terms of service.
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.termsOfService"
defaultMessage="edX API terms of service."
description="Text for the hyperlink to the API terms of service"
/>
</Hyperlink>
</p>
</Card.Section>
<Card.Footer className={displayFailureAlert ? 'error-footer d-table-row' : ''}>
{ displayFailureAlert && (
<p className="d-flex small">
<Icon className="error-icon" src={Error} />
{credentialErrorMessage}
</p>
<p className="d-flex small">
<Icon className="error-icon" src={Error} />
{credentialErrorMessage}
</p>
)}
<Button
variant="primary"
Expand All @@ -85,7 +110,19 @@ const ZeroStateCard = ({ setShowToast, setData }) => {
block
>
{isLoading && <Spinner animation="border mr-2" />}
{isLoading ? 'Generating...' : 'Generate API Credentials'}
{isLoading ? (
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.generatingLabel"
defaultMessage="Generating..."
description="Text indicating that the API credentials are being generated"
/>
) : (
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.zeroStateCard.generateApiCredentials"
defaultMessage="Generate API Credentials"
description="Button text to generate API credentials"
/>
)}
</Button>
</Card.Footer>
</Card>
Expand Down
21 changes: 18 additions & 3 deletions src/components/settings/SettingsApiCredentialsTab/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable react/jsx-no-constructed-context-values */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@edx/frontend-platform/i18n';

import { logError } from '@edx/frontend-platform/logging';
import { ActionRow, Toast } from '@openedx/paragon';
Expand Down Expand Up @@ -40,10 +41,20 @@ const SettingsApiCredentialsTab = ({
<ShowSuccessToast.Provider value={[showToast, setShowToast]}>
{ hasRegenerationError && <FailedAlert /> }
<ActionRow>
<h2>API credentials</h2>
<h2>
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.header"
defaultMessage="API credentials"
description="Header for the API credentials section"
/>
</h2>
<ActionRow.Spacer />
<HelpCenterButton url={HELP_CENTER_API_GUIDE}>
Help Center: EdX Enterprise API Guide
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.helpCenter"
defaultMessage="Help Center: EdX Enterprise API Guide"
description="Text for the Help Center button linking to the API guide"
/>
</HelpCenterButton>
</ActionRow>
<div className="mt-4">
Expand All @@ -57,7 +68,11 @@ const SettingsApiCredentialsTab = ({
onClose={() => setShowToast(false)}
show={showToast}
>
API credentials successfully generated
<FormattedMessage
id="adminPortal.settings.apiCredentialsTab.successMessage"
defaultMessage="API credentials successfully generated"
description="Message shown when API credentials are successfully generated"
/>
</Toast>
)}
</ShowSuccessToast.Provider>
Expand Down
2 changes: 1 addition & 1 deletion src/components/settings/SettingsApiCredentialsTab/tests/SettingsAPICredentialsPage.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('API Credentials Tab', () => {
);
expect(screen.getByText('API credentials')).toBeInTheDocument();
await waitFor(() => expect(mockFetchFn).toHaveBeenCalled());
expect(screen.getByText("You don't have API credentials yet.")).toBeInTheDocument();
expect(screen.getByText('You do not have API credentials yet.')).toBeInTheDocument();
expect(screen.queryByText('Help Center: EdX Enterprise API Guide')).toBeInTheDocument();
const helpLink = screen.getByText('Help Center: EdX Enterprise API Guide');
expect(helpLink.getAttribute('href')).toBe(HELP_CENTER_API_GUIDE);
Expand Down
Loading

0 comments on commit b438ffd

Please sign in to comment.