chore: improve type safety

while trying to establish type safety for volume types i realized that react infers state-types from a class field, but not from a property set in a constructor. let's use that to our advantage and decrease the amount of type errors by over 10% while providing higher quality messages when something really is off.
dcos · Sep 28, 2020 · ce312f2 · ce312f2
1 parent 88b5d75
commit ce312f2
Show file tree

Hide file tree

Showing 191 changed files with 1,124 additions and 2,719 deletions.
diff --git a/packages/foundation-ui/src/mount/Mount.tsx b/packages/foundation-ui/src/mount/Mount.tsx
@@ -35,14 +35,8 @@ class Mount extends React.Component {
     type: PropTypes.string.isRequired,
     wrapper: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   };
-  constructor(props) {
-    super(props);
 
-    // Get components and init state
-    this.state = {
-      components: MountService.findComponentsWithType(this.props.type),
-    };
-  }
+  state = { components: MountService.findComponentsWithType(this.props.type) };
 
   UNSAFE_componentWillMount() {
     MountService.addListener(CHANGE, this.onMountServiceChange);

diff --git a/packages/foundation-ui/src/mount/MountService.ts b/packages/foundation-ui/src/mount/MountService.ts
@@ -5,8 +5,8 @@ import { CHANGE } from "./MountEvent";
  * MountService
  */
 class MountService extends EventEmitter {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
 
     /**
      * Private Context

diff --git a/plugins/auth-providers/components/AuthProviderDetailTab.tsx b/plugins/auth-providers/components/AuthProviderDetailTab.tsx
@@ -19,13 +19,9 @@ class AuthProviderDetailTab extends React.Component {
   static propTypes = {
     provider: PropTypes.object,
   };
-  constructor(...args) {
-    super(...args);
 
-    this.state = {
-      hideSecret: true,
-    };
-  }
+  state = { hideSecret: true };
+
   handleSecretToggle = () => {
     const { hideSecret } = this.state;
     this.setState({ hideSecret: !hideSecret });

diff --git a/plugins/auth-providers/components/AuthProvidersModal.tsx b/plugins/auth-providers/components/AuthProvidersModal.tsx
@@ -16,15 +16,13 @@ class AuthProvidersModal extends React.Component {
     open: PropTypes.bool.isRequired,
     provider: PropTypes.instanceOf(AuthProvider),
   };
-  constructor(...args) {
-    super(...args);
 
-    this.triggerFormSubmit = () => {};
+  state = {
+    selectedProviderType: null,
+  };
+
+  triggerFormSubmit = () => {};
 
-    this.state = {
-      selectedProviderType: null,
-    };
-  }
   handleIdentitySelection = (selectedProviderType) => {
     this.setState({ selectedProviderType });
   };

diff --git a/plugins/auth-providers/components/AuthProvidersModalForm.tsx b/plugins/auth-providers/components/AuthProvidersModalForm.tsx
@@ -25,20 +25,17 @@ class AuthProvidersModalForm extends mixin(StoreMixin) {
     providerType: PropTypes.string,
     triggerSubmit: PropTypes.func,
   };
-  constructor(...args) {
-    super(...args);
 
-    // prettier-ignore
-    this.store_listeners = [
-      { name: "authProvider", events: ["createSuccess", "createError", "updateSuccess", "updateError"], suppressUpdate: true }
-    ];
+  // prettier-ignore
+  store_listeners = [
+    { name: "authProvider", events: ["createSuccess", "createError", "updateSuccess", "updateError"], suppressUpdate: true }
+  ];
 
-    this.state = {
-      disableSubmit: false,
-      errorCode: false,
-      errorMsg: false,
-    };
-  }
+  state = {
+    disableSubmit: false,
+    errorCode: false,
+    errorMsg: false,
+  };
   onAuthProviderStoreCreateSuccess = () => {
     this.setState({
       disableSubmit: false,

diff --git a/plugins/auth-providers/components/AuthProvidersTable.tsx b/plugins/auth-providers/components/AuthProvidersTable.tsx
@@ -12,9 +12,6 @@ class AuthProvidersTable extends React.Component {
   static propTypes = {
     data: PropTypes.array,
   };
-  constructor(...args) {
-    super(...args);
-  }
 
   getClassName(prop, sortBy, row) {
     return classNames({

diff --git a/plugins/auth-providers/components/LoginModalProviders.tsx b/plugins/auth-providers/components/LoginModalProviders.tsx
@@ -21,16 +21,13 @@ class LoginModalProviders extends mixin(StoreMixin) {
     onUpdate: PropTypes.func,
     target: PropTypes.string,
   };
-  constructor(...args) {
-    super(...args);
 
-    this.state = { showAllProviders: false };
+  state = { showAllProviders: false };
 
-    this.store_listeners = [{ name: "authProviders", events: ["change"] }];
-  }
+  store_listeners = [{ name: "authProviders", events: ["change"] }];
 
-  componentDidMount(...args) {
-    super.componentDidMount(...args);
+  componentDidMount() {
+    super.componentDidMount();
     AuthProvidersStore.fetch();
   }
   handleViewAllClick = () => {

diff --git a/plugins/auth-providers/pages/AuthProviderDetailPage.tsx b/plugins/auth-providers/pages/AuthProviderDetailPage.tsx
@@ -51,23 +51,19 @@ const AuthProviderDetailBreadcrumbs = ({ provider }) => {
 };
 
 class AuthProviderDetailPage extends mixin(StoreMixin) {
-  constructor(...args) {
-    super(...args);
-
-    this.state = {
-      deleteUpdateError: null,
-      fetchedDetailsError: false,
-      openDeleteConfirmation: false,
-      openEditFormModal: false,
-      pendingRequest: false,
-    };
+  state = {
+    deleteUpdateError: null,
+    fetchedDetailsError: false,
+    openDeleteConfirmation: false,
+    openEditFormModal: false,
+    pendingRequest: false,
+  };
 
-    // prettier-ignore
-    this.store_listeners = [
-      {name: "authProvider", events: ["success", "error", "deleteSuccess", "deleteError", "callbackUrlSuccess", "updateSuccess"], suppressUpdate: true},
-      {name: "summary", events: ["success"], unmountWhen: (store, event) => event === "success" && store.get("statesProcessed") }
-    ];
-  }
+  // prettier-ignore
+  store_listeners = [
+    {name: "authProvider", events: ["success", "error", "deleteSuccess", "deleteError", "callbackUrlSuccess", "updateSuccess"], suppressUpdate: true},
+    {name: "summary", events: ["success"], unmountWhen: (store, event) => event === "success" && store.get("statesProcessed") }
+  ];
 
   componentDidMount(...args) {
     super.componentDidMount(...args);

diff --git a/plugins/auth-providers/pages/AuthProvidersTab.tsx b/plugins/auth-providers/pages/AuthProvidersTab.tsx
@@ -37,20 +37,14 @@ const AuthProvidersBreadcrumbs = () => {
 };
 
 class AuthProvidersTab extends mixin(StoreMixin) {
-  constructor(...args) {
-    super(...args);
+  store_listeners = [{ name: "authProviders", events: ["change", "error"] }];
 
-    this.store_listeners = [
-      { name: "authProviders", events: ["change", "error"] },
-    ];
-
-    this.state = {
-      openNewItemModal: false,
-      searchString: "",
-      storeFetchError: false,
-      storeFetchSuccess: false,
-    };
-  }
+  state = {
+    openNewItemModal: false,
+    searchString: "",
+    storeFetchError: false,
+    storeFetchSuccess: false,
+  };
 
   componentDidMount() {
     super.componentDidMount();

diff --git a/plugins/auth/components/LoginModal.tsx b/plugins/auth/components/LoginModal.tsx
@@ -21,22 +21,15 @@ export default withI18n()(
       router: routerShape,
     };
 
-    constructor() {
-      super();
+    state = { disableLogin: false, errorMsg: false };
 
-      this.state = {
-        disableLogin: false,
-        errorMsg: false,
-      };
-
-      // prettier-ignore
-      this.store_listeners = [
+    // prettier-ignore
+    store_listeners = [
       {name: "auth", events: ["success", "error"]},
       // We need to listen for this event so that the component will update when
       // the providers are received.
       {name: "authProviders", events: ["change"]}
     ];
-    }
 
     onAuthStoreError(errorMsg, xhr) {
       const { i18n } = this.props;

diff --git a/plugins/bootstrap-config/components/BootstrapConfigHashMap.tsx b/plugins/bootstrap-config/components/BootstrapConfigHashMap.tsx
@@ -21,11 +21,10 @@ const userHasCapability = Hooks.applyFilter.bind(
 );
 
 class BootstrapConfigHashMap extends React.Component {
+  state = { loaded: false };
   constructor(...args) {
     super(...args);
 
-    this.state = { loaded: false };
-
     BootstrapConfigStore.addChangeListener(
       BOOTSTRAP_CONFIG_SUCCESS,
       this.handleBootstrapConfigSuccess

diff --git a/plugins/catalog/src/js/repositories/components/AddRepositoryFormModal.tsx b/plugins/catalog/src/js/repositories/components/AddRepositoryFormModal.tsx
@@ -15,9 +15,6 @@ class AddRepositoryFormModal extends React.Component {
     open: PropTypes.bool,
     addRepository: PropTypes.func.isRequired,
   };
-  constructor() {
-    super();
-  }
   handleAddRepository = (model) => {
     this.props.addRepository(model);
   };

diff --git a/plugins/catalog/src/js/repositories/components/RepositoriesTabUI.tsx b/plugins/catalog/src/js/repositories/components/RepositoriesTabUI.tsx
@@ -10,13 +10,8 @@ import RepositoriesTable from "./RepositoriesTable";
 import RepositoriesAdd from "../RepositoriesAdd";
 
 class RepositoriesTabUI extends React.Component {
-  constructor() {
-    super();
+  state = { addRepositoryModalOpen: false };
 
-    this.state = {
-      addRepositoryModalOpen: false,
-    };
-  }
   handleCloseAddRepository = () => {
     this.setState({ addRepositoryModalOpen: false });
   };

diff --git a/plugins/catalog/src/js/repositories/components/RepositoriesTable.tsx b/plugins/catalog/src/js/repositories/components/RepositoriesTable.tsx
@@ -24,13 +24,9 @@ class RepositoriesTable extends React.Component {
     repositoryRemoveError: PropTypes.string,
     pendingRequest: PropTypes.bool.isRequired,
   };
-  constructor() {
-    super();
 
-    this.state = {
-      repositoryToRemove: null,
-    };
-  }
+  state = { repositoryToRemove: null };
+
   handleOpenConfirm = (repositoryToRemove) => {
     this.setState({ repositoryToRemove });
   };

diff --git a/plugins/cluster-linking/components/ClusterLinkingModalTrigger.tsx b/plugins/cluster-linking/components/ClusterLinkingModalTrigger.tsx
@@ -4,10 +4,7 @@ import ClusterLinkingStore from "../stores/ClusterLinkingStore";
 import { CLUSTER_LIST_SUCCESS } from "../constants/EventTypes";
 
 export default class ClusterLinkingModalTrigger extends React.Component {
-  constructor() {
-    super();
-    this.state = { clusterList: ClusterLinkingStore.getLinkedClusters() };
-  }
+  state = { clusterList: ClusterLinkingStore.getLinkedClusters() };
 
   componentDidMount() {
     ClusterLinkingStore.addListener(

diff --git a/plugins/cluster-linking/pages/LinkedClustersPage.tsx b/plugins/cluster-linking/pages/LinkedClustersPage.tsx
@@ -64,13 +64,7 @@ const EmptyLinkedClustersAlert = () => (
 );
 
 class LinkedClustersPage extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      clusters: [],
-      loading: true,
-    };
-  }
+  state = { clusters: [], loading: true };
   componentDidMount() {
     ClusterLinkingStore.addListener(
       CLUSTER_LIST_SUCCESS,

diff --git a/plugins/jobs/src/js/components/JobsForm.tsx b/plugins/jobs/src/js/components/JobsForm.tsx
@@ -88,11 +88,10 @@ class JobsForm extends React.Component<JobsFormProps, JobsFormState> {
     { id: "runconfig", key: "runConfig", label: i18nMark("Run Configuration") },
   ];
 
+  state = { editorWidth: undefined };
   constructor(props: Readonly<JobsFormProps>) {
     super(props);
 
-    this.state = { editorWidth: undefined };
-
     this.onInputChange = this.onInputChange.bind(this);
     this.handleJSONChange = this.handleJSONChange.bind(this);
     this.handleJSONErrorStateChange = this.handleJSONErrorStateChange.bind(

diff --git a/plugins/jobs/src/js/components/JobsOverviewList.tsx b/plugins/jobs/src/js/components/JobsOverviewList.tsx
@@ -27,13 +27,10 @@ class JobsOverviewList extends React.PureComponent<
   JobsOverviewListProps,
   JobsOverviewListState
 > {
+  state = { isJobFormModalOpen: false };
   constructor(props: Readonly<JobsOverviewListProps>) {
     super(props);
 
-    this.state = {
-      isJobFormModalOpen: false,
-    };
-
     this.handleCloseJobFormModal = this.handleCloseJobFormModal.bind(this);
     this.handleOpenJobFormModal = this.handleOpenJobFormModal.bind(this);
     this.handleFilterChange = this.handleFilterChange.bind(this);

diff --git a/plugins/jobs/src/js/components/form/ArgsSection.tsx b/plugins/jobs/src/js/components/form/ArgsSection.tsx
@@ -25,10 +25,6 @@ interface ArgsSectionProps {
 }
 
 class ArgsSection extends React.Component<ArgsSectionProps> {
-  constructor(props: ArgsSectionProps) {
-    super(props);
-  }
-
   public getArgsInputs() {
     const {
       formData: { args },

diff --git a/plugins/jobs/src/js/components/form/ContainerFormSection.tsx b/plugins/jobs/src/js/components/form/ContainerFormSection.tsx
@@ -21,10 +21,6 @@ interface ContainerSectionProps {
 }
 
 class ContainerFormSection extends React.Component<ContainerSectionProps> {
-  constructor(props: ContainerSectionProps) {
-    super(props);
-  }
-
   public getDisabledBanner() {
     const { formData } = this.props;
     const message = (

diff --git a/plugins/jobs/src/js/components/form/ParametersSection.tsx b/plugins/jobs/src/js/components/form/ParametersSection.tsx
@@ -26,10 +26,6 @@ class ParametersSection extends React.Component<
   ParametersSectionProps,
   object
 > {
-  constructor(props: ParametersSectionProps) {
-    super(props);
-  }
-
   public getParamsInputs() {
     const {
       formData: { dockerParams },

diff --git a/plugins/jobs/src/js/components/form/RunConfigFormSection.tsx b/plugins/jobs/src/js/components/form/RunConfigFormSection.tsx
@@ -28,10 +28,6 @@ interface RunConfigSectionProps {
 }
 
 class RunConfigFormSection extends React.Component<RunConfigSectionProps> {
-  constructor(props: RunConfigSectionProps) {
-    super(props);
-  }
-
   public render() {
     const {
       formData,

diff --git a/plugins/jobs/src/js/components/form/ScheduleFormSection.tsx b/plugins/jobs/src/js/components/form/ScheduleFormSection.tsx
@@ -23,10 +23,6 @@ interface ScheduleSectionProps {
 }
 
 class ScheduleFormSection extends React.Component<ScheduleSectionProps> {
-  constructor(props: ScheduleSectionProps) {
-    super(props);
-  }
-
   public render() {
     const { formData, showErrors, errors } = this.props;
     const idTooltipContent = (

diff --git a/plugins/jobs/src/js/components/form/VolumesFormSection.tsx b/plugins/jobs/src/js/components/form/VolumesFormSection.tsx
@@ -38,10 +38,6 @@ function isFBS(volume: JobVolume | SecretVolume): volume is SecretVolume {
 }
 
 class VolumesFormSection extends React.Component<VolumesSectionProps> {
-  constructor(props: VolumesSectionProps) {
-    super(props);
-  }
-
   public getVolumesLines() {
     const {
       formData: { volumes = [] },