Merge pull request #3274 from OneCommunityGlobal/Ziddi-asterisk-addition-to-forms

Ziddi - Added asterisk for the users to identify them as mandatory fields. Added warning messages to fill the mandatory inputs where ever required.

Author: one-community

src/actions/__tests__/weeklySummariesAction.test.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import * as actions from '../../constants/weeklySummaries';
 import { ENDPOINTS } from '../../utils/URL';
 import { fetchWeeklySummariesBegin, fetchWeeklySummariesSuccess, fetchWeeklySummariesError, getWeeklySummaries, updateWeeklySummaries } from '../weeklySummaries'
-import { getUserProfileActionCreator } from '../../actions/userProfile';
+import { getUserProfileActionCreator } from "../userProfile";
 
 
 jest.mock('axios');

src/actions/__tests__/weeklySummariesReportActions.test.js

@@ -98,7 +98,7 @@ describe('Weekly Summary Report', () => {
 
   describe('Update One Summary Report', () => {
 
-    let mockUserProfile, updatedField;
+    let mockUserProfile; let updatedField;
 
     beforeEach(() => {
 

src/components/Announcements/index.jsx

@@ -209,7 +209,7 @@ function Announcements({ title, email }) {
             <p>Email</p>
           ) : (
             <label htmlFor="email-list-input" className={darkMode ? 'text-light' : 'text-dark'}>
-              Email List (comma-separated):
+              Email List (comma-separated)<span className="red-asterisk">* </span>:
             </label>
           )}
           <input

src/components/BMDashboard/Lesson/LessonForm.jsx

@@ -259,6 +259,7 @@ function LessonForm() {
           <div className="WriteLessonAndTagDiv">
             <Form.Group className="LessonFrom" controlId="exampleForm.ControlTextarea1">
               <Form.Label className="LessonLabel">Lesson Title</Form.Label>
+              <span className="red-asterisk">* </span>
               <Form.Control
                 required
                 className="LessonTitle"
@@ -270,6 +271,7 @@ function LessonForm() {
             </Form.Group>
             <Form.Group className="LessonForm" controlId="exampleForm.ControlTextarea1">
               <Form.Label className="LessonLabel">Write a Lesson</Form.Label>
+              <span className="red-asterisk">* </span>
               <Form.Control
                 required
                 className="LessonPlaceholderText"

src/components/Badge/AssignBadge.jsx

@@ -122,12 +122,14 @@ function AssignBadge(props) {
           style={{ fontWeight: 'bold', marginBottom: 10 }}
         >
           Search by Full Name
+          <span className="red-asterisk">* </span>
           <i
             className="fa fa-info-circle ml-2"
             id="NameInfo"
             data-testid="NameInfo"
             style={{ cursor: 'pointer' }}
           />
+          
           <UncontrolledTooltip
             placement="right"
             target="NameInfo"

src/components/Badge/CreateNewBadgePopup.jsx

@@ -170,6 +170,7 @@ function CreateNewBadgePopup(props) {
         <Label for="badgeName" className={fontColor}>
           Name
         </Label>
+        <span className="red-asterisk">* </span>
         <Input
           type="name"
           name="name"
@@ -186,6 +187,7 @@ function CreateNewBadgePopup(props) {
         <Label for="imageUrl" className={fontColor}>
           Image URL
         </Label>
+        <span className="red-asterisk">* </span>
         <Input
           type="url"
           name="url"
@@ -204,6 +206,7 @@ function CreateNewBadgePopup(props) {
         <Label for="badgeDescription" className={fontColor}>
           Description
         </Label>
+        <span className="red-asterisk">* </span>
         <Input
           type="textarea"
           name="text"

src/components/Dashboard/Dashboard.jsx

@@ -22,10 +22,12 @@ export function Dashboard(props) {
   const [popup, setPopup] = useState(false);
   const [filteredUserTeamIds, setFilteredUserTeamIds] = useState([]);
   const [summaryBarData, setSummaryBarData] = useState(null);
-  const {match, authUser} = props;
+  const { match, authUser } = props;
   const checkSessionStorage = () => JSON.parse(sessionStorage.getItem('viewingUser')) ?? false;
   const [viewingUser, setViewingUser] = useState(checkSessionStorage);
-  const [displayUserId, setDisplayUserId] = useState(match.params.userId || viewingUser?.userId || authUser.userid);
+  const [displayUserId, setDisplayUserId] = useState(
+    match.params.userId || viewingUser?.userId || authUser.userid,
+  );
   const isNotAllowedToEdit = cantUpdateDevAdminDetails(viewingUser?.email, authUser.email);
   const darkMode = useSelector(state => state.theme.darkMode);
 
@@ -51,7 +53,6 @@ export function Dashboard(props) {
     }, 150);
   };
 
-
   const handleStorageEvent = () => {
     const sessionStorageData = checkSessionStorage();
     setViewingUser(sessionStorageData || false);
@@ -65,10 +66,10 @@ export function Dashboard(props) {
     };
   }, []);
 
-  useEffect(()=>{
-    console.log(summaryBarData)
-    dispatch(updateSummaryBarData({summaryBarData}));
-  },[summaryBarData])
+  useEffect(() => {
+    console.log(summaryBarData);
+    dispatch(updateSummaryBarData({ summaryBarData }));
+  }, [summaryBarData]);
 
   return (
     <Container fluid className={darkMode ? 'bg-oxford-blue' : ''}>

src/components/Header/DarkMode.css

@@ -4,6 +4,11 @@
   padding: 0;
 }
 
+.red-asterisk {
+  color: #e00000;
+  font-weight: bold;
+}
+
 .dark-mode .close {
   color: white;
   opacity: 1; 

src/components/PermissionsManagement/NewRolePopUp.jsx

@@ -83,7 +83,9 @@ function CreateNewRolePopup({ toggle, roleNames, darkMode, addRole }) {
   return (
     <Form id="createRole" onSubmit={handleSubmit}>
       <FormGroup>
-        <Label className={darkMode ? 'text-light' : ''}>Role Name:</Label>
+        <Label className={darkMode ? 'text-light' : ''}>
+          Role Name<span className="red-asterisk">* </span>:
+        </Label>
         <Input
           placeholder="Please enter a new role name"
           value={newRoleName}
@@ -98,7 +100,9 @@ function CreateNewRolePopup({ toggle, roleNames, darkMode, addRole }) {
       </FormGroup>
 
       <FormGroup>
-        <Label className={darkMode ? 'text-light' : ''}>Permissions:</Label>
+        <Label className={darkMode ? 'text-light' : ''}>
+          Permissions<span className="red-asterisk">* </span>:
+        </Label>
         <PermissionList
           rolePermissions={permissionsChecked}
           editable

src/components/PermissionsManagement/UserPermissionsPopUp.jsx

@@ -139,7 +139,9 @@ function UserPermissionsPopUp({
           className={darkMode ? 'text-space-cadet' : ''}
           style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '5px' }}
         >
-          <h4 className="user-permissions-pop-up__title">User name:</h4>
+          <h4 className="user-permissions-pop-up__title">
+            User name<span className="red-asterisk">* </span>:
+          </h4>
           <Button
             type="button"
             color="success"