feat: add collapsible card validation for empty field (#131)

* feat: add collapsible card validation for empty field

src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx

@@ -116,13 +116,15 @@ function DivisionByGroupFields({
                           defaultValue={divideDiscussionIds}
                         >
                           {discussionTopics.map((topic) => (
-                            <Form.Checkbox
-                              key={`checkbox-${topic.id}`}
-                              id={`checkbox-${topic.id}`}
-                              value={topic.id}
-                            >
-                              {topic.name}
-                            </Form.Checkbox>
+                            topic.name ? (
+                              <Form.Checkbox
+                                key={`checkbox-${topic.id}`}
+                                id={`checkbox-${topic.id}`}
+                                value={topic.id}
+                              >
+                                {topic.name}
+                              </Form.Checkbox>
+                            ) : null
                           ))}
                         </Form.CheckboxSet>
                       </Form.Group>

src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx

@@ -67,12 +67,11 @@ const DiscussionTopics = ({ intl }) => {
                 ))
               }
               <div className="mb-4">
-                <Add />
                 <Button
                   onClick={() => addNewTopic(push)}
                   variant="link"
-                  size="inline"
-                  className="mr-1 text-primary-500"
+                  iconBefore={Add}
+                  className="text-primary-500 p-0"
                 >
                   {intl.formatMessage(messages.addTopicButton)}
                 </Button>

src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx

@@ -17,6 +17,8 @@ const TopicItem = ({
 }) => {
   const [title, setTitle] = useState(name);
   const [showDeletePopup, setShowDeletePopup] = useState(false);
+  const [collapseIsOpen, setCollapseIsOpen] = useState(!name.length);
+
   const {
     handleChange,
     handleBlur,
@@ -49,7 +51,12 @@ const TopicItem = ({
   const getHeading = (isOpen = false) => {
     let heading;
     if (isGeneralTopic && isOpen) {
-      heading = <span className="h4 py-2 mr-auto">{intl.formatMessage(messages.renameGeneralTopic)}</span>;
+      heading = (
+        <div className="h4 py-2 mr-auto">
+          {intl.formatMessage(messages.renameGeneralTopic)}
+          <div className="small text-muted mt-2">{intl.formatMessage(messages.generalTopicHelp)}</div>
+        </div>
+      );
     } else if (isOpen) {
       heading = <span className="h4 py-2 mr-auto">{intl.formatMessage(messages.configureAdditionalTopic)}</span>;
     } else {
@@ -59,8 +66,11 @@ const TopicItem = ({
   };
 
   const handleToggle = (isOpen) => {
-    if (!isOpen && !isInvalidTopicNameKey) {
-      setTitle(name);
+    if (!isOpen) {
+      const inputHasError = !name.length || isExistingName || isInvalidTopicNameKey;
+      setCollapseIsOpen(inputHasError);
+    } else {
+      setCollapseIsOpen(isOpen);
     }
   };
 
@@ -107,6 +117,7 @@ const TopicItem = ({
             className="collapsible-card rounded mb-3 px-3 py-2"
             onToggle={handleToggle}
             defaultOpen={!title}
+            open={collapseIsOpen}
             id={id}
           >
             <Collapsible.Trigger

src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js

@@ -152,6 +152,11 @@ const messages = defineMessages({
     defaultMessage: 'Rename general topic',
     description: 'Label for default topic allowing user to rename default general topic',
   },
+  generalTopicHelp: {
+    id: 'authoring.discussions.generalTopicHelp.help',
+    defaultMessage: 'This is the default discussion topic for your course.',
+    description: 'Help text for general discussion topic collapsible card.',
+  },
   configureAdditionalTopic: {
     id: 'authoring.discussions.builtIn.configureAdditionalTopic.label',
     defaultMessage: 'Configure topic',