FD-1753 -- Loading bug for mappings search

src/components/Manager/MappingsFunctions/GetMappingsModal.jsx

@@ -90,7 +90,7 @@ export const GetMappingsModal = ({
   }, [apiPreferencesCode, searchProp]);
 
   useEffect(() => {
-    if (!!currentSearchProp) {
+    if (!!currentSearchProp && apiPreferencesCode !== undefined) {
       fetchResults(page, currentSearchProp);
     }
   }, [page, currentSearchProp]);

src/components/Manager/MappingsFunctions/MappingReset.jsx

@@ -80,7 +80,7 @@ export const MappingReset = ({
   // If there is a currentSearchProp in the search bar, it evaluates to true and runs the search function.
   // The function is run when the code and when the page changes.
   useEffect(() => {
-    if (!!currentSearchProp) {
+    if (!!currentSearchProp && apiPreferencesCode !== undefined) {
       fetchResults(page, currentSearchProp);
     }
   }, [page, currentSearchProp]);
@@ -348,18 +348,13 @@ export const MappingReset = ({
                             ))}
                           </div>
                         </Form.Item>
-                      )}{' '}
+                      )}
                       {results?.length > 0 ? (
                         <>
                           <Form.Item
                             name={['filtered_mappings']}
                             valuePropName="value"
-                            rules={[
-                              {
-                                required: true,
-                                message: 'Please make a selection.',
-                              },
-                            ]}
+                            rules={[{ required: false }]}
                           >
                             {filteredResultsArray?.length > 0 ? (
                               <Checkbox.Group

src/components/Manager/MappingsFunctions/MappingSearch.jsx

@@ -85,7 +85,7 @@ export const MappingSearch = ({
   // If there is a currentSearchProp in the search bar, it evaluates to true and runs the search function.
   // The function is run when the code and when the page changes.
   useEffect(() => {
-    if (!!currentSearchProp) {
+    if (!!currentSearchProp && apiPreferencesCode !== undefined) {
       fetchResults(page, currentSearchProp);
     }
   }, [page, currentSearchProp]);

src/components/Projects/Studies/AddStudy.jsx

@@ -9,6 +9,7 @@ export const AddStudy = ({ addStudy, setAddStudy }) => {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const { vocabUrl, setStudy } = useContext(myContext);
+  const { TextArea } = Input;
 
   const navigate = useNavigate();
   // Submit function for adding a new study.
@@ -75,26 +76,26 @@ export const AddStudy = ({ addStudy, setAddStudy }) => {
           <h2>Create Study</h2>
           <Form.Item
             name="name"
-            label="Name"
+            label="Name / Short Code"
             rules={[{ required: true, message: 'Please input Study name.' }]}
           >
             <Input />
           </Form.Item>
 
-          <Form.Item
-            name="description"
-            label="Description"
-            rules={[{ required: false }]}
-          >
-            <Input />
-          </Form.Item>
           <Form.Item
             name="title"
             label="Title"
             rules={[{ required: true, message: 'Please input Study title.' }]}
           >
             <Input />
           </Form.Item>
+          <Form.Item
+            name="description"
+            label="Description"
+            rules={[{ required: false }]}
+          >
+            <TextArea />
+          </Form.Item>
           <Form.Item
             name="identifier_prefix"
             label="Identifier Prefix"

src/components/Projects/Studies/EditStudyDetails.jsx

@@ -7,6 +7,8 @@ import { myContext } from '../../../App';
 export const EditStudyDetails = ({ form, study, setStudy, edit, setEdit }) => {
   const [loading, setLoading] = useState(false);
   const { vocabUrl } = useContext(myContext);
+  const { TextArea } = Input;
+
   // Sets the initial values displayed in the form and esnures they are current
   const changeHandler = () => {
     form.setFieldsValue({
@@ -66,7 +68,7 @@ export const EditStudyDetails = ({ form, study, setStudy, edit, setEdit }) => {
             <h2>{study.name ? study.name : study.id}</h2>
             <Form.Item
               name="name"
-              label="Name"
+              label="Name / Short Code"
               rules={[{ required: true, message: 'Please input Study name.' }]}
             >
               <Input />
@@ -83,7 +85,7 @@ export const EditStudyDetails = ({ form, study, setStudy, edit, setEdit }) => {
               label="Description"
               rules={[{ required: false }]}
             >
-              <Input />
+              <TextArea />
             </Form.Item>
             <Form.Item
               name="url"

src/components/Projects/Tables/TableDetails.jsx

@@ -4,7 +4,16 @@ import './TableStyling.scss';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Spinner } from '../../Manager/Spinner';
 import { getById } from '../../Manager/FetchManager';
-import { Card, Col, Form, notification, Row, Table, Button } from 'antd';
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  notification,
+  Row,
+  Table,
+  Tooltip,
+} from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { EditTableDetails } from './EditTableDetails';
 import { DeleteTable } from './DeleteTable';
@@ -252,7 +261,10 @@ It then shows the mappings as table data and alows the user to delete a mapping
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
-          <span className="mapping-display">{code.display}</span>
+          <span className="mapping-display">
+            {' '}
+            <Tooltip title={code.code}>{code.display}</Tooltip>
+          </span>
           <span
             className="remove-mapping"
             onClick={() => handleRemoveMapping(variableMappings, code)}

src/components/Projects/Terminologies/Terminology.jsx

@@ -4,7 +4,7 @@ import { myContext } from '../../../App';
 import './Terminology.scss';
 import { Spinner } from '../../Manager/Spinner';
 import { getById } from '../../Manager/FetchManager';
-import { Col, Form, notification, Row, Table, Button } from 'antd';
+import { Button, Col, Form, notification, Row, Table, Tooltip } from 'antd';
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { EditMappingsModal } from './EditMappingModal';
 import { EditTerminologyDetails } from './EditTerminologyDetails';
@@ -137,7 +137,9 @@ It then shows the mappings as table data and alows the user to delete a mapping
     if (variableMappings && variableMappings.mappings?.length) {
       return variableMappings.mappings.map(code => (
         <div className="mapping" key={code.display}>
-          <span className="mapping-display">{code.display}</span>
+          <span className="mapping-display">
+            <Tooltip title={code.code}>{code.display}</Tooltip>
+          </span>
           <span
             className="remove-mapping"
             onClick={() => handleRemoveMapping(variableMappings, code)}