feat: remove "system defined" taxonomy badge, replace w/ read-only

src/taxonomy/TaxonomyListPage.test.tsx

@@ -14,7 +14,7 @@ const taxonomies = [{
   id: 1,
   name: 'Taxonomy',
   description: 'This is a description',
-  showSystemBadge: false,
+  showReadOnlyBadge: false,
   canChangeTaxonomy: true,
   canDeleteTaxonomy: true,
   tagsCount: 0,
@@ -115,7 +115,7 @@ describe('<TaxonomyListPage />', () => {
         id: 1,
         name: 'Taxonomy',
         description: 'This is a description',
-        showSystemBadge: false,
+        showReadOnlyBadge: false,
         canChangeTaxonomy: false,
         canDeleteTaxonomy: false,
         tagsCount: 0,
@@ -157,7 +157,7 @@ describe('<TaxonomyListPage />', () => {
     axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: taxonomies, canAddTaxonomy: false });
     const defaults = {
       id: 1,
-      showSystemBadge: false,
+      showReadOnlyBadge: false,
       canChangeTaxonomy: true,
       canDeleteTaxonomy: true,
       tagsCount: 0,

src/taxonomy/TaxonomyListPage.tsx

@@ -215,8 +215,8 @@ export const TaxonomyListPage = () => {
                   accessor: 'description',
                 },
                 {
-                  Header: 'systemDefined',
-                  accessor: 'systemDefined',
+                  Header: 'readOnly',
+                  accessor: 'readOnly',
                 },
                 {
                   Header: '',

src/taxonomy/__mocks__/taxonomyListMock.js

@@ -14,7 +14,7 @@ module.exports = {
       enabled: true,
       allowMultiple: false,
       allowFreeText: false,
-      systemDefined: true,
+      readOnly: true,
       visibleToAuthors: false,
       canChangeTaxonomy: false,
       canDeleteTaxonomy: false,
@@ -26,7 +26,7 @@ module.exports = {
       enabled: true,
       allowMultiple: false,
       allowFreeText: false,
-      systemDefined: true,
+      readOnly: true,
       visibleToAuthors: true,
       canChangeTaxonomy: false,
       canDeleteTaxonomy: false,
@@ -38,7 +38,7 @@ module.exports = {
       enabled: true,
       allowMultiple: false,
       allowFreeText: false,
-      systemDefined: false,
+      readOnly: false,
       visibleToAuthors: true,
       canChangeTaxonomy: true,
       canDeleteTaxonomy: true,
@@ -50,7 +50,7 @@ module.exports = {
       enabled: true,
       allowMultiple: false,
       allowFreeText: false,
-      systemDefined: false,
+      readOnly: false,
       visibleToAuthors: true,
       canChangeTaxonomy: true,
       canDeleteTaxonomy: true,

src/taxonomy/data/types.ts

@@ -7,7 +7,7 @@ export interface TaxonomyData {
   enabled: boolean;
   allowMultiple: boolean;
   allowFreeText: boolean;
-  systemDefined: boolean;
+  readOnly: boolean;
   visibleToAuthors: boolean;
   tagsCount: number;
   orgs: string[];

src/taxonomy/index.scss

@@ -1,6 +1,6 @@
 @import "taxonomy/TaxonomyListPage";
 @import "taxonomy/taxonomy-card/TaxonomyCard";
 @import "taxonomy/delete-dialog/DeleteDialog";
-@import "taxonomy/system-defined-badge/SystemDefinedBadge";
+@import "taxonomy/read-only-badge/ReadOnlyBadge";
 @import "taxonomy/export-modal/ExportModal";
 @import "taxonomy/tag-list/TagListTable";

src/taxonomy/read-only-badge/ReadOnlyBadge.scss

@@ -0,0 +1,3 @@
+.read-only-badge {
+  font-size: 12px;
+}

src/taxonomy/read-only-badge/index.tsx

@@ -0,0 +1,13 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+} from '@openedx/paragon';
+import messages from './messages';
+
+export const ReadOnlyBadge = () => {
+  return (
+    <Badge variant="light" className="p-1.5 font-weight-normal read-only-badge">
+      <FormattedMessage {...messages.readOnlyBadge} />
+    </Badge>
+  );
+};

src/taxonomy/read-only-badge/messages.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  readOnlyBadge: {
+    id: 'course-authoring.taxonomy-list.badge.read-only.label',
+    defaultMessage: 'Read only',
+  },
+});
+
+export default messages;

src/taxonomy/tag-list/messages.ts

@@ -110,11 +110,11 @@ const messages = defineMessages({
     defaultMessage: 'This tag does not allow deletion',
   },
   tagEditForbidden: {
-    id: 'course-authoring.tag-list.system-defined-tag-edit-disabled',
+    id: 'course-authoring.tag-list.read-only-tag-edit-disabled',
     defaultMessage: 'Disabled because this is not allowed to be changed',
   },
   tagDeleteForbidden: {
-    id: 'course-authoring.tag-list.system-defined-tag-delete-disabled',
+    id: 'course-authoring.tag-list.read-only-tag-delete-disabled',
     defaultMessage: 'Disabled because this is not allowed to be deleted',
   },
   hasOpenDraft: {

src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx

@@ -15,7 +15,7 @@ const data = {
   id: taxonomyId,
   name: 'Taxonomy 1',
   description: 'This is a description',
-  systemDefined: false,
+  readOnly: false,
   canChangeTaxonomy: true,
   canDeleteTaxonomy: true,
   tagsCount: 0,
@@ -83,17 +83,19 @@ describe('<TaxonomyCard />', () => {
     expect(getByTestId('taxonomy-menu-button')).toBeVisible();
   });
 
-  it('not show the system-defined badge with normal taxonomies', () => {
+  const readOnlyBadgeText = 'Read only';
+
+  it('not show the read-only badge with normal taxonomies', () => {
     const { queryByText } = render(<TaxonomyCardComponent original={data} />);
-    expect(queryByText('System-level')).not.toBeInTheDocument();
+    expect(queryByText(readOnlyBadgeText)).not.toBeInTheDocument();
   });
 
-  it('shows the system-defined badge with system taxonomies', () => {
+  it('shows the read-only badge with system taxonomies', () => {
     const cardData = { ...data };
-    cardData.systemDefined = true;
+    cardData.readOnly = true;
 
     const { getByText } = render(<TaxonomyCardComponent original={cardData} />);
-    expect(getByText('System-level')).toBeInTheDocument();
+    expect(getByText(readOnlyBadgeText)).toBeInTheDocument();
   });
 
   it('not show org count with taxonomies without orgs', () => {

src/taxonomy/taxonomy-card/index.jsx

@@ -11,20 +11,19 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { TaxonomyMenu } from '../taxonomy-menu';
 import messages from './messages';
-import SystemDefinedBadge from '../system-defined-badge';
+import { ReadOnlyBadge } from '../read-only-badge';
 
 const orgsCountEnabled = (orgsCount) => orgsCount !== undefined && orgsCount !== 0;
 
 const HeaderSubtitle = ({
-  id,
-  showSystemBadge,
+  showReadOnlyBadge,
   orgsCount,
 }) => {
   const intl = useIntl();
 
   // Show system defined badge
-  if (showSystemBadge) {
-    return <SystemDefinedBadge taxonomyId={id} />;
+  if (showReadOnlyBadge) {
+    return <ReadOnlyBadge />;
   }
 
   // Or show orgs count
@@ -46,7 +45,7 @@ HeaderSubtitle.defaultProps = {
 
 HeaderSubtitle.propTypes = {
   id: PropTypes.number.isRequired,
-  showSystemBadge: PropTypes.bool.isRequired,
+  showReadOnlyBadge: PropTypes.bool.isRequired,
   orgsCount: PropTypes.number,
 };
 
@@ -96,12 +95,10 @@ const TaxonomyCard = ({ className, original }) => {
     id,
     name,
     description,
-    systemDefined,
+    readOnly,
     orgsCount,
   } = original;
 
-  const intl = useIntl();
-
   const getHeaderActions = () => (
     <TaxonomyMenu
       taxonomy={original}
@@ -122,17 +119,16 @@ const TaxonomyCard = ({ className, original }) => {
         subtitle={
           <HeaderSubtitle
             id={id}
-            showSystemBadge={systemDefined}
+            showReadOnlyBadge={readOnly}
             orgsCount={orgsCount}
-            intl={intl}
           />
         }
         actions={getHeaderActions()}
       />
       <Card.Body
         className={classNames('taxonomy-card-body', {
-          'taxonomy-card-body-overflow-m': !systemDefined && !orgsCountEnabled(orgsCount),
-          'taxonomy-card-body-overflow-sm': systemDefined || orgsCountEnabled(orgsCount),
+          'taxonomy-card-body-overflow-m': !readOnly && !orgsCountEnabled(orgsCount),
+          'taxonomy-card-body-overflow-sm': readOnly || orgsCountEnabled(orgsCount),
         })}
       >
         <Card.Section>
@@ -153,7 +149,7 @@ TaxonomyCard.propTypes = {
     id: PropTypes.number,
     name: PropTypes.string,
     description: PropTypes.string,
-    systemDefined: PropTypes.bool,
+    readOnly: PropTypes.bool,
     orgsCount: PropTypes.number,
     tagsCount: PropTypes.number,
     canChangeTaxonomy: PropTypes.bool,

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx

@@ -85,7 +85,7 @@ describe('<TaxonomyDetailPage />', () => {
       id: 1,
       name: 'Test taxonomy',
       description: 'This is a description',
-      system_defined: false,
+      read_only: false,
       can_change_taxonomy: true,
       can_delete_taxonomy: true,
       tagsCount: 0,
@@ -108,35 +108,37 @@ describe('<TaxonomyDetailPage />', () => {
     expect(getByTestId('taxonomy-menu-delete')).toBeVisible();
   });
 
-  it('should show system defined badge', async () => {
+  const readOnlyBadgeText = 'Read only';
+
+  it('should show "read-only" badge if the taxonomy is read-only', async () => {
     axiosMock.onGet(apiUrls.taxonomy(1)).replyOnce(200, {
       id: 1,
       name: 'Test taxonomy',
       description: 'This is a description',
-      system_defined: true,
+      read_only: true,
       can_change_taxonomy: false,
       can_delete_taxonomy: false,
     });
 
     const { findByRole, getByText } = render(<RootWrapper />);
 
     expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
-    expect(getByText('System-level')).toBeInTheDocument();
+    expect(getByText(readOnlyBadgeText)).toBeInTheDocument();
   });
 
-  it('should not show system defined badge', async () => {
+  it('should not show "read-only" badge if the taxonomy is not read-only', async () => {
     axiosMock.onGet(apiUrls.taxonomy(1)).replyOnce(200, {
       id: 1,
       name: 'Test taxonomy',
       description: 'This is a description',
-      system_defined: false,
+      read_only: false,
       can_change_taxonomy: false,
       can_delete_taxonomy: false,
     });
 
     const { findByRole, queryByText } = render(<RootWrapper />);
 
     expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
-    expect(queryByText('System-level')).not.toBeInTheDocument();
+    expect(queryByText(readOnlyBadgeText)).not.toBeInTheDocument();
   });
 });