Upgrade react-dnd and DnD Components to TypeScript

frontend/src/Settings/Quality/Definition/QualityDefinitionLimits.tsx

@@ -3,7 +3,7 @@ import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
 
 interface QualityDefinitionLimitsProps {
-  bytes?: number;
+  bytes: number | null;
   message: string;
 }
 

frontend/src/Settings/Quality/Definition/QualityDefinitions.tsx

@@ -6,7 +6,6 @@ import AppState from 'App/State/AppState';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import usePrevious from 'Helpers/Hooks/usePrevious';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import {
   fetchQualityDefinitions,
   saveQualityDefinitions,
@@ -16,7 +15,7 @@ import {
   SetChildSave,
 } from 'typings/Settings/SettingsState';
 import translate from 'Utilities/String/translate';
-import QualityDefinitionConnector from './QualityDefinitionConnector';
+import QualityDefinition from './QualityDefinition';
 import styles from './QualityDefinitions.css';
 
 function createQualityDefinitionsSelector() {
@@ -50,7 +49,6 @@ function QualityDefinitions({
   onChildStateChange,
 }: QualityDefinitionsProps) {
   const dispatch = useDispatch();
-  const showAdvancedSettings = useShowAdvancedSettings();
   const { items, isFetching, isPopulated, isSaving, error, hasPendingChanges } =
     useSelector(createQualityDefinitionsSelector());
 
@@ -90,32 +88,13 @@ function QualityDefinitions({
         <div className={styles.header}>
           <div className={styles.quality}>{translate('Quality')}</div>
           <div className={styles.title}>{translate('Title')}</div>
-          <div className={styles.sizeLimit}>{translate('SizeLimit')}</div>
-
-          {showAdvancedSettings ? (
-            <div className={styles.megabytesPerMinute}>
-              {translate('MegabytesPerMinute')}
-            </div>
-          ) : null}
         </div>
 
         <div className={styles.definitions}>
           {items.map((item) => {
-            return (
-              <QualityDefinitionConnector
-                key={item.id}
-                {...item}
-                advancedSettings={showAdvancedSettings}
-              />
-            );
+            return <QualityDefinition key={item.id} {...item} />;
           })}
         </div>
-
-        <div className={styles.sizeLimitHelpTextContainer}>
-          <div className={styles.sizeLimitHelpText}>
-            {translate('QualityLimitsSeriesRuntimeHelpText')}
-          </div>
-        </div>
       </PageSectionContent>
     </FieldSet>
   );

frontend/src/Settings/Quality/Quality.js

@@ -1,105 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { icons } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
-import translate from 'Utilities/String/translate';
-import QualityDefinitions from './Definition/QualityDefinitions';
-import ResetQualityDefinitionsModal from './Reset/ResetQualityDefinitionsModal';
-
-class Quality extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._saveCallback = null;
-
-    this.state = {
-      isSaving: false,
-      hasPendingChanges: false,
-      isConfirmQualityDefinitionResetModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onChildMounted = (saveCallback) => {
-    this._saveCallback = saveCallback;
-  };
-
-  onChildStateChange = (payload) => {
-    this.setState(payload);
-  };
-
-  onResetQualityDefinitionsPress = () => {
-    this.setState({ isConfirmQualityDefinitionResetModalOpen: true });
-  };
-
-  onCloseResetQualityDefinitionsModal = () => {
-    this.setState({ isConfirmQualityDefinitionResetModalOpen: false });
-  };
-
-  onSavePress = () => {
-    if (this._saveCallback) {
-      this._saveCallback();
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isSaving,
-      isResettingQualityDefinitions,
-      hasPendingChanges
-    } = this.state;
-
-    return (
-      <PageContent title={translate('QualitySettings')}>
-        <SettingsToolbarConnector
-          isSaving={isSaving}
-          hasPendingChanges={hasPendingChanges}
-          additionalButtons={
-            <Fragment>
-              <PageToolbarSeparator />
-
-              <PageToolbarButton
-                label={translate('ResetDefinitions')}
-                iconName={icons.REFRESH}
-                isSpinning={isResettingQualityDefinitions}
-                onPress={this.onResetQualityDefinitionsPress}
-              />
-            </Fragment>
-          }
-          onSavePress={this.onSavePress}
-        />
-
-        <PageContentBody>
-          <QualityDefinitions
-            onChildMounted={this.onChildMounted}
-            onChildStateChange={this.onChildStateChange}
-          />
-        </PageContentBody>
-
-        <ResetQualityDefinitionsModal
-          isOpen={this.state.isConfirmQualityDefinitionResetModalOpen}
-          onModalClose={this.onCloseResetQualityDefinitionsModal}
-        />
-      </PageContent>
-    );
-  }
-}
-
-Quality.propTypes = {
-  isResettingQualityDefinitions: PropTypes.bool.isRequired
-};
-
-export default Quality;