bug/extension-expected-date (#367)

* - Prevents user from changing Current Expected date
from database when filling out extension form

* - Fixes key console error for mapped options
- Removes deleted css sheet from extension form templates
- Removes required badge from Current Expected Date field

apcd-cms/src/apps/extension/templates/extension_submission_form/extension_submission_form.html

@@ -3,10 +3,9 @@
 
 {% block content %}
 
-<link rel="stylesheet" href="{% static 'forms/css/extension_submission_form.css' %}">
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
       <div id="extension-submission-root">
   </div>
 </div>
-{% endblock %}
+{% endblock %}

apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionFormInfo.tsx

@@ -135,7 +135,7 @@ const ExtensionFormInfo: React.FC<{
           >
             <option value="">-- Select period --</option>
             {dataPeriods.map((item) => (
-              <option value={item.data_period}>{item.data_period}</option>
+              <option value={item.data_period} key={item.data_period}>{item.data_period}</option>
             ))}
           </Field>
         </FieldWrapper>
@@ -166,11 +166,13 @@ const ExtensionFormInfo: React.FC<{
               Current Expected Date <sup>3</sup>
             </>
           }
-          required={true}
+          required={false}
           className={`position-relative ${styles.dateInputContainer} `}
         >
           <Field
             type="date"
+            readOnly
+            className={`position-relative ${styles.currentExpectedDate}`}
             name={`extensions.${index}.currentExpectedDate`}
             id={`extensions.${index}.currentExpectedDate`}
           />

apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.module.css

@@ -38,3 +38,7 @@
 .justification {
   font-size: unset;
 }
+.dateInputContainer :is(input):read-only {
+  border-color: unset;
+  background-color: #e9ecef;
+}

apcd-cms/src/client/src/components/Submitter/Extensions/ExtensionsForm.tsx

@@ -26,9 +26,7 @@ const validationSchema = Yup.object().shape({
       requestedTargetDate: Yup.date().required(
         'Requested Target Date is required'
       ),
-      currentExpectedDate: Yup.date().required(
-        'Current Expected Date is required'
-      ),
+      currentExpectedDate: Yup.date()
     })
   ),
   requestorName: Yup.string().required('Requestor Name is required'),