From f5f99d9a9372851fc941a2f6079586d1adb434bb Mon Sep 17 00:00:00 2001
From: Pierre Beitz <pbeitz@d2iq.com>
Date: Mon, 24 Aug 2020 14:30:27 +0200
Subject: [PATCH] refactor: small cleanup around fullscreenmodal

removing components that just add classes, so that we can replace them with
their ui-kit pendants some time soon.

pulling out some static content (it's easier to reason about components if there
can't be a `this` involved).

get rid of `.modal-full-screen-header-with-sub-title`, which was aligning the
height of the header when installing Frameworks. chose to remove all the
complexity around it and live with a headline that's off by 2 pixels to replace
it with a ui-kit component in the future.

replace PropTypes with TS-typings.
---
 .../jobs/src/js/components/JobsFormModal.tsx  |  4 +-
 .../js/components/form/GeneralFormSection.tsx | 88 +++++++++----------
 .../components/modals/CreateServiceModal.tsx  |  9 +-
 .../modals/ServiceRootGroupModal/Header.tsx   |  5 +-
 .../__snapshots__/typecheck-test.ts.snap      | 22 -----
 src/js/components/FrameworkConfiguration.tsx  | 10 +--
 src/js/components/form/FieldTextarea.tsx      | 31 +------
 .../modals/FullScreenModalHeader.tsx          | 24 +----
 .../modals/FullScreenModalHeaderActions.tsx   | 38 +++-----
 .../modals/FullScreenModalHeaderSubTitle.tsx  | 23 -----
 .../modals/FullScreenModalHeaderTitle.tsx     | 23 -----
 .../components/modal/full-screen/styles.less  | 14 +--
 12 files changed, 78 insertions(+), 213 deletions(-)
 delete mode 100644 src/js/components/modals/FullScreenModalHeaderSubTitle.tsx
 delete mode 100644 src/js/components/modals/FullScreenModalHeaderTitle.tsx

diff --git a/plugins/jobs/src/js/components/JobsFormModal.tsx b/plugins/jobs/src/js/components/JobsFormModal.tsx
index 0be83e518b..764fc5b9d4 100644
--- a/plugins/jobs/src/js/components/JobsFormModal.tsx
+++ b/plugins/jobs/src/js/components/JobsFormModal.tsx
@@ -12,7 +12,6 @@ import isEqual from "lodash/isEqual";
 import FullScreenModal from "#SRC/js/components/modals/FullScreenModal";
 import FullScreenModalHeader from "#SRC/js/components/modals/FullScreenModalHeader";
 import FullScreenModalHeaderActions from "#SRC/js/components/modals/FullScreenModalHeaderActions";
-import FullScreenModalHeaderTitle from "#SRC/js/components/modals/FullScreenModalHeaderTitle";
 import DataValidatorUtil from "#SRC/js/utils/DataValidatorUtil";
 import ModalHeading from "#SRC/js/components/modals/ModalHeading";
 import ToggleButton from "#SRC/js/components/ToggleButton";
@@ -403,7 +402,8 @@ class JobFormModal extends React.Component<
           actions={this.getSecondaryActions()}
           type="secondary"
         />
-        <FullScreenModalHeaderTitle>{title}</FullScreenModalHeaderTitle>
+
+        <div className="modal-full-screen-header-title">{title}</div>
         <FullScreenModalHeaderActions
           actions={this.getPrimaryActions()}
           type="primary"
diff --git a/plugins/jobs/src/js/components/form/GeneralFormSection.tsx b/plugins/jobs/src/js/components/form/GeneralFormSection.tsx
index 9f2c40840f..7154c15127 100644
--- a/plugins/jobs/src/js/components/form/GeneralFormSection.tsx
+++ b/plugins/jobs/src/js/components/form/GeneralFormSection.tsx
@@ -22,35 +22,37 @@ interface GeneralProps {
   isEdit: boolean;
 }
 
-function getFieldError(path: string, errors: FormError[]) {
-  return errors
-    .filter((e) => {
-      const match = e.path.join(".");
-      return match === path;
-    })
+const getFieldError = (path: string, errors: FormError[]) =>
+  errors
+    .filter((e) => e.path.join(".") === path)
     .map((e) => e.message)
     .join(" ");
-}
 
-class GeneralFormSection extends React.Component<GeneralProps> {
-  constructor(props: Readonly<GeneralProps>) {
-    super(props);
-  }
+const idTooltipContent = (
+  <Trans>
+    Unique identifier for the job consisting of a series of names separated by
+    dots. Each name must be at least 1 character and may only contain digits
+    (`0-9`), dashes (`-`), and lowercase letters (`a-z`). The name may not begin
+    or end with a dash.
+  </Trans>
+);
+const descTooltipContent = <Trans>A description of this job.</Trans>;
+const cpuTooltipContent = (
+  <Trans>
+    The number of CPU shares this job needs per instance. This number does not
+    have to be integer, but can be a fraction.
+  </Trans>
+);
+const gpuTooltipContent = (
+  <Trans>
+    The number of GPU shares this job needs per instance. Only available with
+    the UCR runtime.
+  </Trans>
+);
 
+export default class GeneralFormSection extends React.Component<GeneralProps> {
   public getResourceRow() {
     const { formData, showErrors, errors } = this.props;
-    const cpuTooltipContent = (
-      <Trans>
-        The number of CPU shares this job needs per instance. This number does
-        not have to be integer, but can be a fraction.
-      </Trans>
-    );
-    const gpuTooltipContent = (
-      <Trans>
-        The number of GPU shares this job needs per instance. Only available
-        with the UCR runtime.
-      </Trans>
-    );
     const gpusDisabled = !formData.cmdOnly && formData.container !== "ucr";
 
     const cpusError = getFieldError("run.cpus", errors);
@@ -60,7 +62,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
 
     return (
       <FormRow>
-        <FormGroup className="column-3" showError={showErrors && cpusError}>
+        <FormGroup className="column-3" showError={showErrors && !!cpusError}>
           <FieldLabel>
             <FormGroupHeading required={true}>
               <FormGroupHeadingContent title="CPUs" primary={true}>
@@ -82,12 +84,12 @@ class GeneralFormSection extends React.Component<GeneralProps> {
             type="number"
             name="job.run.cpus"
             value={formData.cpus}
-            autoFocus={showErrors && cpusError}
+            autoFocus={showErrors && !!cpusError}
           />
           <FieldError>{cpusError}</FieldError>
         </FormGroup>
 
-        <FormGroup className="column-3" showError={showErrors && memError}>
+        <FormGroup className="column-3" showError={showErrors && !!memError}>
           <FieldLabel className="text-no-transform">
             <FormGroupHeading required={true}>
               <FormGroupHeadingContent title="Mem">
@@ -99,12 +101,12 @@ class GeneralFormSection extends React.Component<GeneralProps> {
             name="job.run.mem"
             type="number"
             value={formData.mem}
-            autoFocus={showErrors && memError}
+            autoFocus={showErrors && !!memError}
           />
           <FieldError>{memError}</FieldError>
         </FormGroup>
 
-        <FormGroup className="column-3" showError={showErrors && diskError}>
+        <FormGroup className="column-3" showError={showErrors && !!diskError}>
           <FieldLabel className="text-no-transform">
             <FormGroupHeading required={true}>
               <FormGroupHeadingContent title="Disk">
@@ -116,12 +118,12 @@ class GeneralFormSection extends React.Component<GeneralProps> {
             name="job.run.disk"
             type="number"
             value={formData.disk}
-            autoFocus={showErrors && diskError}
+            autoFocus={showErrors && !!diskError}
           />
           <FieldError>{diskError}</FieldError>
         </FormGroup>
 
-        <FormGroup className="column-3" showError={showErrors && gpusError}>
+        <FormGroup className="column-3" showError={showErrors && !!gpusError}>
           <FieldLabel className="text-no-transform">
             <FormGroupHeading>
               <FormGroupHeadingContent title="GPUs">
@@ -144,7 +146,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
             type="number"
             disabled={gpusDisabled}
             value={formData.gpus}
-            autoFocus={showErrors && gpusError}
+            autoFocus={showErrors && !!gpusError}
           />
           <FieldError>{gpusError}</FieldError>
         </FormGroup>
@@ -185,7 +187,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
               checked={!formData.cmdOnly}
               name="cmdOnly"
               type="radio"
-              value={false}
+              value={"false"}
             />
             <Trans render="span">Container Image</Trans>
           </FieldLabel>
@@ -194,7 +196,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
               checked={formData.cmdOnly}
               name="cmdOnly"
               type="radio"
-              value={true}
+              value={"true"}
             />
             <Trans render="span">Command Only</Trans>
           </FieldLabel>
@@ -203,7 +205,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
           <FormRow>
             <FormGroup
               className="column-12"
-              showError={showErrors && containerImageErrors}
+              showError={showErrors && !!containerImageErrors}
             >
               <FieldLabel>
                 <FormGroupHeading required={!formData.cmdOnly}>
@@ -242,7 +244,10 @@ class GeneralFormSection extends React.Component<GeneralProps> {
           </FormRow>
         )}
         <FormRow>
-          <FormGroup className="column-12" showError={showErrors && cmdErrors}>
+          <FormGroup
+            className="column-12"
+            showError={showErrors && !!cmdErrors}
+          >
             <FieldLabel>
               <FormGroupHeading required={formData.cmdOnly}>
                 <FormGroupHeadingContent title="Command" primary={true}>
@@ -282,15 +287,6 @@ class GeneralFormSection extends React.Component<GeneralProps> {
   public render() {
     const { formData, errors, showErrors, isEdit } = this.props;
 
-    const idTooltipContent = (
-      <Trans>
-        Unique identifier for the job consisting of a series of names separated
-        by dots. Each name must be at least 1 character and may only contain
-        digits (`0-9`), dashes (`-`), and lowercase letters (`a-z`). The name
-        may not begin or end with a dash.
-      </Trans>
-    );
-    const descTooltipContent = <Trans>A description of this job.</Trans>;
     const idError = getFieldError("id", errors);
 
     return (
@@ -299,7 +295,7 @@ class GeneralFormSection extends React.Component<GeneralProps> {
           General
         </Trans>
         <FormRow>
-          <FormGroup className="column-12" showError={showErrors && idError}>
+          <FormGroup className="column-12" showError={showErrors && !!idError}>
             <FieldLabel>
               <FormGroupHeading required={true}>
                 <FormGroupHeadingContent title="Job ID" primary={true}>
@@ -362,5 +358,3 @@ class GeneralFormSection extends React.Component<GeneralProps> {
     );
   }
 }
-
-export default GeneralFormSection;
diff --git a/plugins/services/src/js/components/modals/CreateServiceModal.tsx b/plugins/services/src/js/components/modals/CreateServiceModal.tsx
index a7ca920c62..e58ac5fd7d 100644
--- a/plugins/services/src/js/components/modals/CreateServiceModal.tsx
+++ b/plugins/services/src/js/components/modals/CreateServiceModal.tsx
@@ -17,7 +17,6 @@ import DataValidatorUtil from "#SRC/js/utils/DataValidatorUtil";
 import FullScreenModal from "#SRC/js/components/modals/FullScreenModal";
 import FullScreenModalHeader from "#SRC/js/components/modals/FullScreenModalHeader";
 import FullScreenModalHeaderActions from "#SRC/js/components/modals/FullScreenModalHeaderActions";
-import FullScreenModalHeaderTitle from "#SRC/js/components/modals/FullScreenModalHeaderTitle";
 import ModalHeading from "#SRC/js/components/modals/ModalHeading";
 import PodValidators from "#SRC/resources/raml/marathon/v2/types/pod.raml";
 import ToggleButton from "#SRC/js/components/ToggleButton";
@@ -554,9 +553,9 @@ class CreateServiceModal extends React.Component {
             actions={this.getSecondaryActions()}
             type="secondary"
           />
-          <FullScreenModalHeaderTitle>
+          <div className="modal-full-screen-header-title">
             <Trans render="span">Review & Run Service</Trans>
-          </FullScreenModalHeaderTitle>
+          </div>
           <FullScreenModalHeaderActions
             actions={this.getPrimaryActions()}
             type="primary"
@@ -583,7 +582,7 @@ class CreateServiceModal extends React.Component {
           actions={this.getSecondaryActions()}
           type="secondary"
         />
-        <FullScreenModalHeaderTitle>{title}</FullScreenModalHeaderTitle>
+        <div className="modal-full-screen-header-title">{title}</div>
         <FullScreenModalHeaderActions
           actions={this.getPrimaryActions()}
           type="primary"
@@ -783,7 +782,7 @@ class CreateServiceModal extends React.Component {
     }
 
     if (servicePickerActive) {
-      return null;
+      return [];
     }
 
     if (serviceFormActive) {
diff --git a/plugins/services/src/js/components/modals/ServiceRootGroupModal/Header.tsx b/plugins/services/src/js/components/modals/ServiceRootGroupModal/Header.tsx
index 8d07dc95c6..03598d4a59 100644
--- a/plugins/services/src/js/components/modals/ServiceRootGroupModal/Header.tsx
+++ b/plugins/services/src/js/components/modals/ServiceRootGroupModal/Header.tsx
@@ -3,7 +3,6 @@ import { I18n, i18nMark } from "@lingui/core";
 import { Trans } from "@lingui/macro";
 import FullScreenModalHeader from "#SRC/js/components/modals/FullScreenModalHeader";
 import FullScreenModalHeaderActions from "#SRC/js/components/modals/FullScreenModalHeaderActions";
-import FullScreenModalHeaderTitle from "#SRC/js/components/modals/FullScreenModalHeaderTitle";
 
 interface GroupModalHeaderProps {
   i18n: I18n;
@@ -39,13 +38,13 @@ export default (props: GroupModalHeaderProps) => {
         ]}
         type="secondary"
       />
-      <FullScreenModalHeaderTitle>
+      <div className="modal-full-screen-header-title">
         {mode === "create" ? (
           <Trans>New Group</Trans>
         ) : (
           <Trans>Edit Group</Trans>
         )}
-      </FullScreenModalHeaderTitle>
+      </div>
       <FullScreenModalHeaderActions
         actions={[
           {
diff --git a/src/js/__tests__/__snapshots__/typecheck-test.ts.snap b/src/js/__tests__/__snapshots__/typecheck-test.ts.snap
index ec74365fdb..87ef8bec88 100644
--- a/src/js/__tests__/__snapshots__/typecheck-test.ts.snap
+++ b/src/js/__tests__/__snapshots__/typecheck-test.ts.snap
@@ -377,19 +377,6 @@ plugins/jobs/src/js/components/form/ContainerFormSection.tsx: error TS2322: type
 plugins/jobs/src/js/components/form/EnvVarPartial.tsx: error TS2741: Property 'onClick' is missing in type '{}' but required in type *.
 plugins/jobs/src/js/components/form/EnvVarPartial.tsx: error TS2322: Type 'void' is not assignable to type *.
 plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: Type 'false' is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: Type 'true' is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
-plugins/jobs/src/js/components/form/GeneralFormSection.tsx: error TS2322: type * is not assignable to type *.
 plugins/jobs/src/js/components/form/ParametersSection.tsx: error TS2741: Property 'onClick' is missing in type '{}' but required in type *.
 plugins/jobs/src/js/components/form/ParametersSection.tsx: error TS2322: Type 'void' is not assignable to type *.
 plugins/jobs/src/js/components/form/PlacementPartial.tsx: error TS2322: Type 'void' is not assignable to type *.
@@ -1594,7 +1581,6 @@ plugins/organization/submodules/service-accounts/components/ServiceAccountDetail
 plugins/organization/submodules/service-accounts/components/ServiceAccountDetailPage.tsx: error TS2339: Property 'fetchedDetailsError' does not exist on type 'Readonly<{}>'.
 plugins/organization/submodules/service-accounts/components/ServiceAccountDetailPage.tsx: error TS2339: Property 'isRemote' does not exist on type 'ServiceAccount'.
 plugins/organization/submodules/service-accounts/components/ServiceAccountDetailPage.tsx: error TS2339: Property 'isRemote' does not exist on type 'ServiceAccount'.
-plugins/organization/submodules/service-accounts/components/ServiceAccountForm.tsx: error TS2322: type * is not assignable to type *.
 plugins/organization/submodules/service-accounts/components/ServiceAccountsActionsModal.tsx: error TS2339: Property 'store_listeners' does not exist on type 'ServiceAccountsActionsModal'.
 plugins/organization/submodules/service-accounts/components/ServiceAccountsActionsModal.tsx: error TS2339: Property 'store_listeners' does not exist on type 'ServiceAccountsActionsModal'.
 plugins/organization/submodules/service-accounts/components/ServiceAccountsActionsModal.tsx: error TS2556: Expected 0 arguments, but got 1 or more.
@@ -1854,13 +1840,11 @@ plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErr
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErrors' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'textValue' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErrors' does not exist on type 'Readonly<{}>'.
-plugins/secrets/components/SecretFormModal.tsx: error TS2322: type * is not assignable to type *.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'fileValue' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErrors' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErrors' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2322: type * is not assignable to type *.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'localErrors' does not exist on type 'Readonly<{}>'.
-plugins/secrets/components/SecretFormModal.tsx: error TS2322: type * is not assignable to type *.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'path' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'textValue' does not exist on type 'Readonly<{}>'.
 plugins/secrets/components/SecretFormModal.tsx: error TS2339: Property 'fileValue' does not exist on type 'Readonly<{}>'.
@@ -2424,7 +2408,6 @@ plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error
 plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2339: Property 'data' does not exist on type *.
 plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2339: Property 'errors' does not exist on type *.
 plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2339: Property 'path' does not exist on type *.
-plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2322: type * is not assignable to type *.
 plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2339: Property 'configReducers' does not exist on type *.
 plugins/services/src/js/components/forms/ContainerServiceFormSection.tsx: error TS2339: Property 'service' does not exist on type *.
 plugins/services/src/js/components/forms/EnvironmentFormSection.tsx: error TS2339: Property 'onRemoveItem' does not exist on type *.
@@ -5547,11 +5530,6 @@ src/js/components/modals/ActionsModal.tsx: error TS2339: Property 'itemType' doe
 src/js/components/modals/ActionsModal.tsx: error TS2339: Property 'requestErrors' does not exist on type 'Readonly<{}>'.
 src/js/components/modals/ActionsModal.tsx: error TS2339: Property 'validationError' does not exist on type 'Readonly<{}>'.
 src/js/components/modals/FullScreenModal.tsx: error TS2322: Type '\\"100%\\"' is not assignable to type 'null'.
-src/js/components/modals/FullScreenModalHeaderActions.tsx: error TS2448: Block-scoped variable 'classProps' used before its declaration.
-src/js/components/modals/FullScreenModalHeaderActions.tsx: error TS2448: Block-scoped variable 'classProps' used before its declaration.
-src/js/components/modals/FullScreenModalHeaderActions.tsx: error TS2339: Property 'actions' does not exist on type *.
-src/js/components/modals/FullScreenModalHeaderActions.tsx: error TS2339: Property 'className' does not exist on type *.
-src/js/components/modals/FullScreenModalHeaderActions.tsx: error TS2339: Property 'type' does not exist on type *.
 src/js/components/modals/ImageViewerModal.tsx: error TS2339: Property 'isLoadingImage' does not exist on type 'Readonly<{}>'.
 src/js/components/modals/ImageViewerModal.tsx: error TS2339: Property 'onClose' does not exist on type *.
 src/js/components/modals/ImageViewerModal.tsx: error TS2339: Property 'open' does not exist on type *.
diff --git a/src/js/components/FrameworkConfiguration.tsx b/src/js/components/FrameworkConfiguration.tsx
index f500bc1396..3e53556c65 100644
--- a/src/js/components/FrameworkConfiguration.tsx
+++ b/src/js/components/FrameworkConfiguration.tsx
@@ -8,8 +8,6 @@ import { InfoBoxInline } from "@dcos/ui-kit";
 import FullScreenModal from "#SRC/js/components/modals/FullScreenModal";
 import FullScreenModalHeader from "#SRC/js/components/modals/FullScreenModalHeader";
 import FullScreenModalHeaderActions from "#SRC/js/components/modals/FullScreenModalHeaderActions";
-import FullScreenModalHeaderTitle from "#SRC/js/components/modals/FullScreenModalHeaderTitle";
-import FullScreenModalHeaderSubTitle from "#SRC/js/components/modals/FullScreenModalHeaderSubTitle";
 import ToggleButton from "#SRC/js/components/ToggleButton";
 import ModalHeading from "#SRC/js/components/modals/ModalHeading";
 import UniversePackage from "#SRC/js/structs/UniversePackage";
@@ -305,15 +303,15 @@ class FrameworkConfiguration extends React.Component {
           actions={this.getSecondaryActions()}
           type="secondary"
         />
-        <FullScreenModalHeaderTitle className="modal-full-screen-header-with-sub-title">
+        <div className="modal-full-screen-header-title">
           <Trans id={title} render="span" />
-          <FullScreenModalHeaderSubTitle>
+          <div className="small">
             {lastUpdated ? LastUpdated.warningIcon(lastUpdated) : null}{" "}
             {StringUtil.capitalize(packageDetails.getName()) +
               " " +
               packageDetails.getVersion()}
-          </FullScreenModalHeaderSubTitle>
-        </FullScreenModalHeaderTitle>
+          </div>
+        </div>
         <FullScreenModalHeaderActions
           actions={this.getPrimaryActions()}
           type="primary"
diff --git a/src/js/components/form/FieldTextarea.tsx b/src/js/components/form/FieldTextarea.tsx
index 7bd88cbfba..702669fd83 100644
--- a/src/js/components/form/FieldTextarea.tsx
+++ b/src/js/components/form/FieldTextarea.tsx
@@ -1,31 +1,8 @@
 import classNames from "classnames/dedupe";
-import PropTypes from "prop-types";
 import * as React from "react";
 
-import { omit } from "../../utils/Util";
+type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const FieldTextarea = (props) => {
-  const { className } = props;
-  const classes = classNames("form-control", className);
-
-  return <textarea className={classes} {...omit(props, ["className"])} />;
-};
-
-FieldTextarea.defaultProps = {
-  onChange: () => undefined,
-  value: "",
-};
-
-FieldTextarea.propTypes = {
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  // Classes
-  className: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object,
-    PropTypes.string,
-  ]),
-};
-
-export default FieldTextarea;
+export default ({ className, ...props }: Props) => (
+  <textarea className={classNames("form-control", className)} {...props} />
+);
diff --git a/src/js/components/modals/FullScreenModalHeader.tsx b/src/js/components/modals/FullScreenModalHeader.tsx
index f07c72787f..ab23fc71df 100644
--- a/src/js/components/modals/FullScreenModalHeader.tsx
+++ b/src/js/components/modals/FullScreenModalHeader.tsx
@@ -1,23 +1,5 @@
-import classNames from "classnames/dedupe";
-import PropTypes from "prop-types";
 import * as React from "react";
 
-const FullScreenModalHeader = (props) => {
-  const { children, className } = props;
-  const classes = classNames("modal-full-screen-header pod", className);
-
-  return <div className={classes}>{children}</div>;
-};
-
-const classProps = PropTypes.oneOfType([
-  PropTypes.array,
-  PropTypes.object,
-  PropTypes.string,
-]);
-
-FullScreenModalHeader.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: classProps,
-};
-
-export default FullScreenModalHeader;
+export default ({ children }) => (
+  <div className="modal-full-screen-header pod">{children}</div>
+);
diff --git a/src/js/components/modals/FullScreenModalHeaderActions.tsx b/src/js/components/modals/FullScreenModalHeaderActions.tsx
index e1072c1403..20ea1a1be7 100644
--- a/src/js/components/modals/FullScreenModalHeaderActions.tsx
+++ b/src/js/components/modals/FullScreenModalHeaderActions.tsx
@@ -1,23 +1,21 @@
 import { Trans } from "@lingui/macro";
 import classNames from "classnames/dedupe";
-import PropTypes from "prop-types";
 import * as React from "react";
 
-class FullScreenModalHeaderActions extends React.Component {
-  static propTypes = {
-    actions: PropTypes.arrayOf(
-      PropTypes.shape({
-        className: classProps,
-        clickHandler: PropTypes.func,
-        label: PropTypes.node,
-      })
-    ),
-    className: classProps,
-    type: PropTypes.oneOf(["primary", "secondary"]).isRequired,
-  };
+type Action = {
+  className?: string;
+  clickHandler?: (e?: any) => void;
+  disabled?: boolean;
+  label?: string;
+  node?: React.ReactNode;
+};
+class FullScreenModalHeaderActions extends React.Component<{
+  actions: Action[];
+  className?: string;
+  type: "primary" | "secondary";
+}> {
   getActions() {
     const { actions } = this.props;
-
     if (!actions || actions.length === 0) {
       return null;
     }
@@ -45,21 +43,13 @@ class FullScreenModalHeaderActions extends React.Component {
   }
 
   render() {
-    const { className, type } = this.props;
-
     const classes = classNames(
-      `modal-full-screen-actions modal-full-screen-actions-${type} flush-vertical`,
-      className
+      `modal-full-screen-actions modal-full-screen-actions-${this.props.type} flush-vertical`,
+      this.props.className
     );
 
     return <div className={classes}>{this.getActions()}</div>;
   }
 }
 
-const classProps = PropTypes.oneOfType([
-  PropTypes.array,
-  PropTypes.object,
-  PropTypes.string,
-]);
-
 export default FullScreenModalHeaderActions;
diff --git a/src/js/components/modals/FullScreenModalHeaderSubTitle.tsx b/src/js/components/modals/FullScreenModalHeaderSubTitle.tsx
deleted file mode 100644
index bc5d7d4647..0000000000
--- a/src/js/components/modals/FullScreenModalHeaderSubTitle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import classNames from "classnames/dedupe";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const FullScreenModalHeaderSubTitle = (props) => {
-  const { children, className } = props;
-  const classes = classNames("small", className);
-
-  return <div className={classes}>{children}</div>;
-};
-
-const classProps = PropTypes.oneOfType([
-  PropTypes.array,
-  PropTypes.object,
-  PropTypes.string,
-]);
-
-FullScreenModalHeaderSubTitle.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: classProps,
-};
-
-export default FullScreenModalHeaderSubTitle;
diff --git a/src/js/components/modals/FullScreenModalHeaderTitle.tsx b/src/js/components/modals/FullScreenModalHeaderTitle.tsx
deleted file mode 100644
index 1e577da2f3..0000000000
--- a/src/js/components/modals/FullScreenModalHeaderTitle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import classNames from "classnames/dedupe";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const FullScreenModalHeaderTitle = (props) => {
-  const { children, className } = props;
-  const classes = classNames("modal-full-screen-header-title", className);
-
-  return <div className={classes}>{children}</div>;
-};
-
-const classProps = PropTypes.oneOfType([
-  PropTypes.array,
-  PropTypes.object,
-  PropTypes.string,
-]);
-
-FullScreenModalHeaderTitle.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: classProps,
-};
-
-export default FullScreenModalHeaderTitle;
diff --git a/src/styles/components/modal/full-screen/styles.less b/src/styles/components/modal/full-screen/styles.less
index 031a098928..4b45171ca8 100644
--- a/src/styles/components/modal/full-screen/styles.less
+++ b/src/styles/components/modal/full-screen/styles.less
@@ -68,13 +68,11 @@
     font-size: @modal-full-screen-header-title-font-size;
     font-weight: @modal-full-screen-header-title-font-weight;
     line-height: @modal-full-screen-header-title-line-height;
-    text-align: center;
-  }
-
-  .modal-full-screen-header-with-sub-title {
-    bottom: 8px; // approximation of canvas small line-height / 2
     height: @modal-full-screen-header-title-line-height;
-    position: relative;
+    text-align: center;
+    .small {
+      margin: 0;
+    }
   }
 
   .modal-full-screen-actions {
@@ -179,10 +177,6 @@
       line-height: @modal-full-screen-header-title-line-height-screen-large;
     }
 
-    .modal-full-screen-header-with-sub-title {
-      height: @modal-full-screen-header-title-line-height-screen-large;
-    }
-
     .modal-full-screen-actions-primary {
       right: @pod-margin-right-screen-large;
     }