refactor: add messages for translation

src/messages.js

@@ -10,6 +10,14 @@ const messages = defineMessages({
     id: 'authoring.alert.support.text',
     defaultMessage: 'Support Page',
   },
+  noResultsFoundMessage: {
+    id: 'authoring.table.noResultsFound.message',
+    defaultMessage: 'No results found',
+  },
+  actionsButtonLabel: {
+    id: 'authoring.action.button.label',
+    defaultMessage: 'Actions',
+  },
 });
 
 export default messages;

src/taxonomy/messages.js

@@ -69,6 +69,22 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-list.modal.cancel',
     defaultMessage: 'Cancel',
   },
+  taxonomyDetailsHeader: {
+    id: 'course-authoring.taxonomy-detail.side-card.header',
+    defaultMessage: 'Taxonomy details',
+  },
+  taxonomyDetailsName: {
+    id: 'course-authoring.taxonomy-detail.side-card.name',
+    defaultMessage: 'Title',
+  },
+  taxonomyDetailsDescription: {
+    id: 'course-authoring.taxonomy-detail.side-card.description',
+    defaultMessage: 'Description',
+  },
+  tagListColumnValueHeader: {
+    id: 'course-authoring.tag-list.column.value.header',
+    defaultMessage: 'Value',
+  },
 });
 
 export default messages;

src/taxonomy/taxonomy-detail/TagListTable.jsx

@@ -1,13 +1,16 @@
-import { useState } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   DataTable,
 } from '@edx/paragon';
-import Proptypes from 'prop-types';
 import _ from 'lodash';
+import Proptypes from 'prop-types';
+import { useState } from 'react';
 
+import messages from '../../messages';
+import taxonomyMessages from '../messages';
 import { useTagListDataResponse, useTagListDataStatus } from '../api/hooks/selectors';
 
-const TagListTable = ({ taxonomyId }) => {
+const TagListTable = ({ intl, taxonomyId }) => {
   const [options, setOptions] = useState({
     pageIndex: 0,
   });
@@ -43,21 +46,22 @@ const TagListTable = ({ taxonomyId }) => {
       initialState={options}
       columns={[
         {
-          Header: 'Value',
+          Header: intl.formatMessage(taxonomyMessages.tagListColumnValueHeader),
           accessor: 'value',
         },
       ]}
     >
       <DataTable.TableControlBar />
       <DataTable.Table />
-      <DataTable.EmptyTable content="No results found" />
+      <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
       <DataTable.TableFooter />
     </DataTable>
   );
 };
 
 TagListTable.propTypes = {
+  intl: intlShape.isRequired,
   taxonomyId: Proptypes.string.isRequired,
 };
 
-export default TagListTable;
+export default injectIntl(TagListTable);

src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx

@@ -5,19 +5,20 @@ import {
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import messages from '../messages';
+import messages from '../../messages';
+import taxonomyMessages from '../messages';
 
 const TaxonomyDetailMenu = ({
   id, name, disabled, onClickMenuItem, intl,
 }) => (
   <DropdownButton
     id={id}
-    title="Actions"
-    alt={intl.formatMessage(messages.taxonomyMenuAlt, { name })}
+    title={intl.formatMessage(messages.actionsButtonLabel)}
+    alt={intl.formatMessage(taxonomyMessages.taxonomyMenuAlt, { name })}
     disabled={disabled}
   >
     <Dropdown.Item onClick={() => onClickMenuItem('export')}>
-      {intl.formatMessage(messages.taxonomyCardExportMenu)}
+      {intl.formatMessage(taxonomyMessages.taxonomyCardExportMenu)}
     </Dropdown.Item>
   </DropdownButton>
 );

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Breadcrumb,
   Container,
@@ -9,13 +10,14 @@ import { Link, useParams } from 'react-router-dom';
 import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import Loading from '../../generic/Loading';
 import SubHeader from '../../generic/sub-header/SubHeader';
+import messages from '../messages';
 import TaxonomyDetailMenu from './TaxonomyDetailMenu';
 import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
 import TagListTable from './TagListTable';
 import ExportModal from '../modals/ExportModal';
 import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
 
-const TaxonomyDetailPage = () => {
+const TaxonomyDetailPage = ({ intl }) => {
   const { taxonomyId } = useParams();
 
   const useTaxonomyDetailData = () => {
@@ -86,7 +88,7 @@ const TaxonomyDetailPage = () => {
         <Container size="xl">
           <Breadcrumb
             links={[
-              { label: 'Taxonomies', to: '/taxonomy-list/' },
+              { label: intl.formatMessage(messages.headerTitle), to: '/taxonomy-list/' },
             ]}
             activeLabel={taxonomy.name}
             linkAs={Link}
@@ -121,4 +123,8 @@ const TaxonomyDetailPage = () => {
   );
 };
 
-export default TaxonomyDetailPage;
+TaxonomyDetailPage.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TaxonomyDetailPage);

src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx

@@ -1,26 +1,30 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Card,
 } from '@edx/paragon';
 import Proptypes from 'prop-types';
 
-const TaxonomyDetailSideCard = ({ taxonomy }) => (
+import messages from '../messages';
+
+const TaxonomyDetailSideCard = ({ intl, taxonomy }) => (
   <Card>
-    <Card.Header title="Taxonomy details" />
-    <Card.Section title="Title">
+    <Card.Header title={intl.formatMessage(messages.taxonomyDetailsHeader)} />
+    <Card.Section title={intl.formatMessage(messages.taxonomyDetailsName)}>
       {taxonomy.name}
     </Card.Section>
     <Card.Divider className="ml-3 mr-3" />
-    <Card.Section title="Description">
+    <Card.Section title={intl.formatMessage(messages.taxonomyDetailsHeader)}>
       {taxonomy.description}
     </Card.Section>
   </Card>
 );
 
 TaxonomyDetailSideCard.propTypes = {
+  intl: intlShape.isRequired,
   taxonomy: Proptypes.shape({
     name: Proptypes.string.isRequired,
     description: Proptypes.string.isRequired,
   }).isRequired,
 };
 
-export default TaxonomyDetailSideCard;
+export default injectIntl(TaxonomyDetailSideCard);