NCI-Agency · gjvoosten · Oct 27, 2021 · Oct 19, 2021 · Oct 19, 2021 · Oct 19, 2021
diff --git a/anet-dictionary.yml b/anet-dictionary.yml
@@ -47,7 +47,7 @@ fields:
     longName:
       label: Objective / Effort description
       placeholder: Enter an objective / effort description, example ....
-      as: textarea
+      asA: textarea
       style:
         height: 400px
     topLevel:
@@ -59,7 +59,7 @@ fields:
       longName:
         label: Description of this Objective
         placeholder: Enter a description for this Objective, example ....
-        as: textarea
+        asA: textarea
         style:
           height: 400px
       assessments:
@@ -85,7 +85,7 @@ fields:
       longName:
         label: Effort description
         placeholder: Enter an effort description, example ....
-        as: textarea
+        asA: textarea
         style:
           height: 400px
       assessments:
@@ -211,7 +211,7 @@ fields:
             label: Questions
             helpText: JSON that defines the assessment (you need to know what you are doing)
             placeholder: Fill in valid JSON
-            as: textarea
+            asA: textarea
             style:
               height: 200px
 
@@ -481,7 +481,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        as: textarea
+        asA: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -584,7 +584,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        as: textarea
+        asA: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -665,7 +665,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        as: textarea
+        asA: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]
@@ -747,7 +747,7 @@ fields:
         label: Textarea field
         placeholder: Placeholder text for textarea field
         helpText: Help text for textarea field
-        as: textarea
+        asA: textarea
         style:
           height: 200px
         visibleWhen: $[?(@ && @.colourOptions === 'GREEN')]

diff --git a/client/src/components/CustomDateInput.js b/client/src/components/CustomDateInput.js
@@ -79,7 +79,7 @@ const CustomDateInput = ({
       showActionsBar
       closeOnSelection={!withTime}
       timePickerProps={timePickerProps}
-      popoverProps={{ usePortal: true, placement }}
+      popoverProps={{ usePortal: false, placement }}
       disabled={disabled}
     />
   )

diff --git a/client/src/components/CustomFields.js b/client/src/components/CustomFields.js
@@ -227,7 +227,6 @@ const JsonField = fieldProps => {
       : fieldValue
   return (
     <FastField
-      asA="textarea"
       name={name}
       value={value}
       component={FieldHelper.InputField}

diff --git a/client/src/components/EditHistory.js b/client/src/components/EditHistory.js
@@ -326,7 +326,12 @@ function EditHistory({
                         })}
                         <div className="submit-buttons">
                           <div>
-                            <Button onClick={onHide}>Cancel</Button>
+                            <Button
+                              onClick={onHide}
+                              variant="outline-secondary"
+                            >
+                              Cancel
+                            </Button>
                           </div>
                           <div>
                             <Button

diff --git a/client/src/components/FieldHelper.js b/client/src/components/FieldHelper.js
@@ -262,6 +262,7 @@ export const ReadonlyField = ({
   field, // { name, value, onChange, onBlur }
   form, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   label,
+  asA,
   children,
   extraColElem,
   labelColumnWidth,
@@ -300,6 +301,7 @@ ReadonlyField.propTypes = {
   field: PropTypes.object,
   form: PropTypes.object,
   label: PropTypes.string,
+  asA: PropTypes.string, // unused, prop is discarded
   children: PropTypes.any,
   extraColElem: PropTypes.object,
   addon: PropTypes.object,

diff --git a/client/src/components/ReportWorkflow.css b/client/src/components/ReportWorkflow.css
@@ -1,93 +1,98 @@
 .report-summary h4.legend {
-	display: none;
+  display: none;
 }
 
-fieldset.workflow-fieldset .workflow-action {
-	position: relative;
-	display: inline-block;
-	padding-right: 18px;
-	margin-top: 3px;
-	vertical-align: top;
-	text-align: center;
+.workflow-fieldset .workflow-action {
+  position: relative;
+  display: inline-block;
+  padding-right: 18px;
+  margin-top: 3px;
+  vertical-align: top;
+  text-align: center;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn-pending.default {
+.workflow-fieldset .workflow-action .btn-pending.default {
   background-color: #bdbdaf;
-  color: #fff;
+  color: #000;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn-pending.submitted {
+.workflow-fieldset .workflow-action .btn-pending.submitted {
   background-color: #848478;
-  color: #fff;
+  color: #000;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn-success.published {
+.workflow-fieldset .workflow-action .btn-success.published {
   background-color: #5cb85c;
-  color: #fff;
+  color: #000;
+}
+
+.workflow-fieldset .workflow-action .btn-danger.unpublished {
+  background-color: #fcaf3e;
+  color: #000;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn-success.approved {
+.workflow-fieldset .workflow-action .btn-success.approved {
   background-color: #75eb75;
-  color: #fff;
+  color: #000;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn-danger.rejected {
+.workflow-fieldset .workflow-action .btn-danger.rejected {
   background-color: #c23030;
   color: #fff;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn {
-	border-radius: 30px;
+.workflow-fieldset .workflow-action .btn {
+  border-radius: 30px;
 }
 
-fieldset.workflow-fieldset .workflow-action .btn[disabled] {
+.workflow-fieldset .workflow-action .btn[disabled] {
   opacity: 1;
 }
 
-fieldset.workflow-fieldset .workflow-action button::after {
-	position: relative;
-	font-family: 'Glyphicons Halflings';
-	font-style: normal;
-	font-weight: 400;
-	line-height: 1;
-	-webkit-font-smoothing: antialiased;
-	content: "\e092";
-	color: #777;
-	width: 18px;
-	height: 18px;
-	top: 3px;
-	right: -26px;
+.workflow-fieldset .workflow-action button::after {
+  position: relative;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  content: "\e092";
+  color: #777;
+  width: 18px;
+  height: 18px;
+  top: 3px;
+  right: -26px;
 }
 
-fieldset.workflow-fieldset :last-child button::after {
-	content: "";
+.workflow-fieldset :last-child button::after {
+  content: "";
 }
 
-fieldset.workflow-fieldset.compact{
-	border: 0;
-	border-bottom: 2px solid hsla(0, 0%, 0%, 0.06);
-	margin-bottom: 1rem;
-	padding: 0.25em 0.75em 0.75em 0em;
-	box-shadow: none;
+fieldset.workflow-fieldset.compact {
+  border: 0;
+  border-bottom: 2px solid hsla(0, 0%, 0%, 0.06);
+  margin-bottom: 1rem;
+  padding: 0.25em 0.75em 0.75em 0em;
+  box-shadow: none;
 }
 
 .modal-content .modal-footer .label {
-	font-size: 90% !important;
+  font-size: 90% !important;
 }
 
 .modal-content .modal-footer .approved {
-	background-color: #75eb75;
+  background-color: #75eb75;
 }
 
 .modal-content .modal-footer .pending {
-	background-color: #848478;
+  background-color: #848478;
 }
 
 .modal-content .modal-footer .rejected {
-	background-color: #c23030;
+  background-color: #c23030;
 }
 
 .action-status {
-	text-transform: uppercase;
-	font-weight: bold;
+  text-transform: uppercase;
+  font-weight: bold;
 }
diff --git a/client/src/components/ReportWorkflow.js b/client/src/components/ReportWorkflow.js
@@ -60,7 +60,7 @@ const ApprovalStepModal = ({ action }) => {
       <Button
         className={actionTypeCss + " btn-sm"}
         onClick={() => setShowModal(true)}
-        variant="outline-secondary"
+        variant="default"
       >
         <span>{step.name}</span>
       </Button>

diff --git a/client/src/components/RichTextEditor.css b/client/src/components/RichTextEditor.css
diff --git a/client/src/components/TriggerableConfirm.js b/client/src/components/TriggerableConfirm.js
@@ -81,7 +81,7 @@ const TriggerableConfirm = ({
 TriggerableConfirm.propTypes = {
   onConfirm: PropTypes.func.isRequired,
   title: PropTypes.string,
-  body: PropTypes.string,
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   confirmText: PropTypes.string,
   cancelText: PropTypes.string,
   variant: PropTypes.string,

diff --git a/client/src/components/advancedSearch/ReportStateFilter.js b/client/src/components/advancedSearch/ReportStateFilter.js
@@ -61,9 +61,8 @@ const ReportStateFilter = ({
     stateDisplay
   ) : (
     <Form.Group>
-      <Form.Control
+      <Form.Select
         id={queryKey}
-        as="select"
         value={value.state}
         onChange={handleChangeState}
         multiple
@@ -73,7 +72,7 @@ const ReportStateFilter = ({
             {label}
           </option>
         ))}
-      </Form.Control>
+      </Form.Select>
       {onlyCancelled && (
         <div style={{ verticalAlign: "top", paddingLeft: "8px" }}>
           due to{" "}

diff --git a/client/src/components/aggregations/CalendarWidget.js b/client/src/components/aggregations/CalendarWidget.js
@@ -21,7 +21,7 @@ const CalendarWidget = ({
   hasPrevNext
 }) => {
   const calendarComponentRef = useRef(null)
-  const events = GET_CALENDAR_EVENTS_FROM[valueType](values)
+  const events = GET_CALENDAR_EVENTS_FROM[valueType]?.(values)
   const history = useHistory()
   if (_isEmpty(events)) {
     return whenUnspecified

diff --git a/client/src/components/assessments/AssessmentModal.js b/client/src/components/assessments/AssessmentModal.js
@@ -1,7 +1,8 @@
 import API from "api"
 import {
   CustomFieldsContainer,
-  customFieldsJSONString
+  customFieldsJSONString,
+  SPECIAL_WIDGET_TYPES
 } from "components/CustomFields"
 import Messages from "components/Messages"
 import Model, {
@@ -30,6 +31,9 @@ const AssessmentModal = ({
   onCancel
 }) => {
   const [assessmentError, setAssessmentError] = useState(null)
+  const hasRichTextEditor = Object.values(assessmentConfig).find(
+    question => question.widget === SPECIAL_WIDGET_TYPES.RICH_TEXT_EDITOR
+  )
   const edit = !!note.uuid
   const initialValues = useMemo(
     () =>
@@ -44,7 +48,8 @@ const AssessmentModal = ({
         centered
         show={showModal}
         onHide={closeModal}
-        style={{ zIndex: "1220" }}
+        dialogClassName={hasRichTextEditor && "rich-text-modal"}
+        style={{ zIndex: "1250" }}
       >
         <Formik
           enableReinitialize

diff --git a/client/src/components/editor/LinkSourceAnet.js b/client/src/components/editor/LinkSourceAnet.js
@@ -28,6 +28,7 @@ const LinkSourceAnet = ({ editor, showModal, setShowModal, selection }) => {
       centered
       show={showModal}
       aria-labelledby="Link chooser"
+      className="editor-link-chooser"
       onHide={() => setShowModal(false)}
     >
       <Modal.Header closeButton>

diff --git a/client/src/components/editor/RichTextEditor.css b/client/src/components/editor/RichTextEditor.css
@@ -41,3 +41,7 @@
 .editor-toggle-button.active{
   background-color: #ccc;
 }
+
+.editor-link-chooser {
+  z-index: 1300;
+}
diff --git a/client/src/index.css b/client/src/index.css
@@ -73,6 +73,10 @@ h4.legend {
   margin-top: -2rem;
 }
 
+.legend small .btn.btn-outline-danger.float-end {
+  margin-top: -1.5rem;
+}
+
 .legend small :not(.btn-group) .btn + .btn {
   margin-left: 1rem;
 }
@@ -1127,7 +1131,8 @@ header.searchPagination {
 }
 
 .rich-text-modal {
-  min-width: 650px;
+  width: 650px;
+  max-width: 100%;
 }
 
 @page {

diff --git a/client/src/pages/tasks/Form.js b/client/src/pages/tasks/Form.js
@@ -188,7 +188,6 @@ const TaskForm = ({ edit, title, initialValues, notesComponent }) => {
                   dictProps={fieldSettings.longName}
                   name="longName"
                   component={FieldHelper.InputField}
-                  asA="textarea"
                 />
 
                 {disabled ? (