feat: add card in Pages and Resources to allow hiding the dates tab (#2834)

Author: Anas12091101

package-lock.json

@@ -51,6 +51,7 @@
     "@edx/frontend-platform": "^8.4.0",
     "@edx/openedx-atlas": "^0.7.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
+    "@openedx-plugins/course-app-dates": "file:plugins/course-apps/dates",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
     "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
     "@openedx-plugins/course-app-live": "file:plugins/course-apps/live",

package.json

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import messages from './messages';
+
+type DatesSettingsProps = {
+  onClose: () => void;
+};
+
+const DatesSettings: React.FC<DatesSettingsProps> = ({ onClose }) => {
+  const intl = useIntl();
+
+  return (
+    <AppSettingsModal
+      appId="dates"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableAppHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableAppLabel)}
+      learnMoreText={intl.formatMessage(messages.learnMore)}
+      onClose={onClose}
+      validationSchema={{}}
+      initialValues={{}}
+      onSettingsSave={async () => true}
+    />
+  );
+};
+
+export default DatesSettings;

plugins/course-apps/dates/Settings.tsx

@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.dates.heading',
+    defaultMessage: 'Configure dates',
+    description: 'Heading for the Dates settings modal shown in Pages & Resources.',
+  },
+  enableAppLabel: {
+    id: 'course-authoring.pages-resources.dates.enable-app.label',
+    defaultMessage: 'Dates',
+    description: 'Label for the toggle that enables the Dates experience.',
+  },
+  enableAppHelp: {
+    id: 'course-authoring.pages-resources.dates.enable-app.help',
+    defaultMessage: 'Show the Dates tab in course navigation, where learners can view important course dates.',
+    description: 'Helper text explaining what enabling the Dates experience does.',
+  },
+  learnMore: {
+    id: 'course-authoring.pages-resources.dates.learn-more',
+    defaultMessage: 'Learn more about dates',
+    description: 'Link text that leads to documentation about the Dates experience.',
+  },
+});
+
+export default messages;

plugins/course-apps/dates/messages.ts

@@ -0,0 +1,17 @@
+{
+    "name": "@openedx-plugins/course-app-dates",
+    "version": "0.1.0",
+    "description": "Dates configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}

plugins/course-apps/dates/package.json

@@ -17,7 +17,7 @@ const SettingsComponent = ({ url }) => {
 
   const LazyLoadedComponent = React.useMemo(
     () => React.lazy(() =>
-      import(`@openedx-plugins/course-app-${appId}/Settings.jsx`).catch((err) => { // eslint-disable-line
+      import(`@openedx-plugins/course-app-${appId}/Settings`).catch((err) => { // eslint-disable-line
         // If we couldn't load this plugin, log the details to the console.
         console.trace(err); // eslint-disable-line no-console
         return { default: PluginLoadFailedError };