From 8edc05422e3af1fe383fa73e49cc834d42e27d62 Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Mon, 14 Jun 2021 17:25:07 +0500
Subject: [PATCH] feat: add collapsible card validation for empty field (#131)

* feat: add collapsible card validation for empty field
---
 .../apps/shared/DivisionByGroupFields.jsx       | 16 +++++++++-------
 .../discussion-topics/DiscussionTopics.jsx      |  5 ++---
 .../apps/shared/discussion-topics/TopicItem.jsx | 17 ++++++++++++++---
 .../app-config-form/apps/shared/messages.js     |  5 +++++
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
index faaaa3f1d..f34928067 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
+++ b/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>
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx
index 79b47f1b5..0c6210280 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx
+++ b/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>
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
index d6e892cdf..5736b221a 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
+++ b/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
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js b/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
index 4b8d3cfbf..7bd565104 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
+++ b/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',