chore: upgrade react-jss to latest (#2302)

19 files changed, 72 insertions, 81 deletions

diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index 652233e55..89b0a4e72 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -22,8 +22,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
-@observer
 class BasicAuthModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -97,4 +95,6 @@ class BasicAuthModal extends Component {
     );
   }
 }
-export default injectIntl(BasicAuthModal);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(BasicAuthModal)),
+);
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index 64f782c8f..0966480d0 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -29,7 +29,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = {
   info: {
     paddingTop: 20,
     paddingBottom: 20,
@@ -51,11 +51,8 @@ const styles = () => ({
     background: '#c45a5a !important',
     color: '#ffffff !important',
   },
-});
+};
 
-@injectSheet(styles)
-@inject('stores', 'actions')
-@observer
 class NightlyBuildsModal extends Component {
   close() {
     ModalState.isModalVisible = false;
@@ -119,7 +116,7 @@ class NightlyBuildsModal extends Component {
   }
 }
 
-NightlyBuildsModal.wrappedComponent.propTypes = {
+NightlyBuildsModal.propTypes = {
   stores: PropTypes.shape({
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
   }).isRequired,
@@ -131,4 +128,8 @@ NightlyBuildsModal.wrappedComponent.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default injectIntl(NightlyBuildsModal);
+export default injectIntl(
+  injectSheet(styles)(
+    inject('stores', 'actions')(observer(NightlyBuildsModal)),
+  ),
+);
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 30bdc13b6..953fc7c21 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -85,14 +85,7 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@inject('stores', 'actions')
-@observer
 class PublishDebugLogModal extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
   state = {
     log: null,
     error: false,
@@ -221,13 +214,18 @@ class PublishDebugLogModal extends Component {
   }
 }
 
-PublishDebugLogModal.wrappedComponent.propTypes = {
+PublishDebugLogModal.propTypes = {
   stores: PropTypes.shape({
     app: PropTypes.instanceOf(AppStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
+  classes: PropTypes.object.isRequired,
 };
 
-export default injectIntl(PublishDebugLogModal);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(
+    inject('stores', 'actions')(observer(PublishDebugLogModal)),
+  ),
+);
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index 75587cc1d..7f9424b6d 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -81,9 +81,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@inject('stores', 'actions')
-@observer
 class QuickSwitchModal extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -349,13 +346,18 @@ class QuickSwitchModal extends Component {
   }
 }
 
-QuickSwitchModal.wrappedComponent.propTypes = {
+QuickSwitchModal.propTypes = {
   stores: PropTypes.shape({
     services: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
+  classes: PropTypes.object.isRequired,
 };
 
-export default injectIntl(QuickSwitchModal);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(
+    inject('stores', 'actions')(observer(QuickSwitchModal)),
+  ),
+);
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 1d423544b..780864b91 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -48,8 +48,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -128,7 +126,6 @@ class TodosWebview extends Component {
     const { handleClientMessage } = this.props;
     if (!this.webview) return;
     this.webview.addEventListener('ipc-message', e => {
-      // console.log(e);
       handleClientMessage({ channel: e.channel, message: e.args[0] });
     });
   }
@@ -201,4 +198,6 @@ class TodosWebview extends Component {
   }
 }
 
-export default TodosWebview;
+export default injectSheet(styles, { injectTheme: true })(
+  observer(TodosWebview),
+);
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 536810d2d..b97506767 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -10,8 +10,6 @@ import { TODOS_MIN_WIDTH } from '../../../config';
 import { todoActions } from '../actions';
 import ServicesStore from '../../../stores/ServicesStore';
 
-@inject('stores', 'actions')
-@observer
 class TodosScreen extends Component {
   render() {
     if (
@@ -44,9 +42,9 @@ class TodosScreen extends Component {
   }
 }
 
-export default TodosScreen;
+export default inject('stores', 'actions')(observer(TodosScreen));
 
-TodosScreen.wrappedComponent.propTypes = {
+TodosScreen.propTypes = {
   stores: PropTypes.shape({
     features: PropTypes.instanceOf(FeaturesStore).isRequired,
     services: PropTypes.instanceOf(ServicesStore).isRequired,
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index d158ed480..2bf4e8fab 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -187,10 +187,6 @@ export default class TodoStore extends FeatureStore {
         break;
       default:
         debug('Other message received', channel, message);
-        console.log(
-          'this.stores.services.isTodosServiceAdded',
-          this.stores.services.isTodosServiceAdded,
-        );
         if (this.stores.services.isTodosServiceAdded) {
           this.actions.service.handleIPCMessage({
             serviceId: this.stores.services.isTodosServiceAdded.id,
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 5650d4cd1..99d78eda0 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -94,8 +94,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WebControls extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -238,4 +236,6 @@ class WebControls extends Component {
   }
 }
 
-export default injectIntl(WebControls);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebControls)),
+);
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 6fba5db86..3dac6997c 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -16,8 +16,6 @@ const URL_EVENTS = [
   'did-navigate-in-page',
 ];
 
-@inject('stores', 'actions')
-@observer
 class WebControlsScreen extends Component {
   @observable url = '';
 
@@ -125,9 +123,9 @@ class WebControlsScreen extends Component {
   }
 }
 
-export default WebControlsScreen;
+export default inject('stores', 'actions')(observer(WebControlsScreen));
 
-WebControlsScreen.wrappedComponent.propTypes = {
+WebControlsScreen.propTypes = {
   service: PropTypes.instanceOf(Service).isRequired,
   stores: PropTypes.shape({
     services: PropTypes.instanceOf(ServicesStore).isRequired,
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 75f6d9f4a..54475eccb 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = {
   form: {
     display: 'flex',
   },
@@ -32,10 +32,8 @@ const styles = () => ({
   submitButton: {
     height: 'inherit',
   },
-});
+};
 
-@injectSheet(styles)
-@observer
 class CreateWorkspaceForm extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -94,4 +92,6 @@ class CreateWorkspaceForm extends Component {
   }
 }
 
-export default injectIntl(CreateWorkspaceForm);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(CreateWorkspaceForm)),
+);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index fa3ea4289..e8bd9d60c 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -58,7 +58,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = {
   nameInput: {
     height: 'auto',
   },
@@ -68,10 +68,8 @@ const styles = () => ({
   keepLoadedInfo: {
     marginBottom: '2rem !important',
   },
-});
+};
 
-@injectSheet(styles)
-@observer
 class EditWorkspaceForm extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -230,4 +228,6 @@ class EditWorkspaceForm extends Component {
   }
 }
 
-export default injectIntl(EditWorkspaceForm);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(EditWorkspaceForm)),
+);
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index d66e0f10d..4fd2b1153 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -88,8 +88,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WorkspaceDrawer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -175,4 +173,6 @@ class WorkspaceDrawer extends Component {
   }
 }
 
-export default injectIntl(WorkspaceDrawer);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawer)),
+);
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index d3c9fa767..22c0a39d9 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -65,8 +65,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WorkspaceDrawerItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -150,4 +148,6 @@ class WorkspaceDrawerItem extends Component {
   }
 }
 
-export default injectIntl(WorkspaceDrawerItem);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawerItem)),
+);
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx
index 6fb02d2f5..f46375c7a 100644
--- a/src/features/workspaces/components/WorkspaceItem.tsx
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -22,8 +22,6 @@ type Props = {
   onItemClick: (workspace) => void;
 };
 
-@injectSheet(styles)
-@observer
 class WorkspaceItem extends Component<Props> {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -42,4 +40,6 @@ class WorkspaceItem extends Component<Props> {
   }
 }
 
-export default WorkspaceItem;
+export default injectSheet(styles, { injectTheme: true })(
+  observer(WorkspaceItem),
+);
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 6e012eb1e..46fda0103 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -36,8 +36,6 @@ type Props = {
   service: any;
 };
 
-@injectSheet(styles)
-@observer
 class WorkspaceServiceListItem extends Component<Props> {
   render() {
     const { classes, isInWorkspace, onToggle, service } = this.props;
@@ -63,4 +61,6 @@ class WorkspaceServiceListItem extends Component<Props> {
   }
 }
 
-export default WorkspaceServiceListItem;
+export default injectSheet(styles, { injectTheme: true })(
+  observer(WorkspaceServiceListItem),
+);
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index ff4e9475a..b2e0adfe7 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -53,8 +53,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WorkspaceSwitchingIndicator extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -85,4 +83,8 @@ class WorkspaceSwitchingIndicator extends Component {
   }
 }
 
-export default injectIntl(WorkspaceSwitchingIndicator);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(
+    observer(WorkspaceSwitchingIndicator),
+  ),
+);
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 1087580b1..9c2f65731 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -49,7 +49,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = {
   table: {
     width: '100%',
     '& td': {
@@ -67,11 +67,8 @@ const styles = () => ({
     margin: [-8, 0, 0, 20],
     alignSelf: 'center',
   },
-});
+};
 
-@inject('stores')
-@injectSheet(styles)
-@observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -190,9 +187,13 @@ class WorkspacesDashboard extends Component {
   }
 }
 
-export default injectIntl(WorkspacesDashboard);
+export default injectIntl(
+  inject('stores')(
+    injectSheet(styles, { injectTheme: true })(observer(WorkspacesDashboard)),
+  ),
+);
 
-WorkspacesDashboard.wrappedComponent.propTypes = {
+WorkspacesDashboard.propTypes = {
   stores: PropTypes.shape({
     ui: PropTypes.instanceOf(UIStore).isRequired,
   }).isRequired,
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.tsx b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index 8e8f8179d..0351ddafb 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.tsx
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -17,8 +17,6 @@ type Props = {
   };
 };
 
-@inject('stores', 'actions')
-@observer
 class EditWorkspaceScreen extends Component<Props> {
   // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
@@ -58,4 +56,4 @@ class EditWorkspaceScreen extends Component<Props> {
   }
 }
 
-export default EditWorkspaceScreen;
+export default inject('stores', 'actions')(observer(EditWorkspaceScreen));
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx
index a07e92439..33808b69d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.tsx
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -17,8 +17,6 @@ type Props = {
   };
 };
 
-@inject('stores', 'actions')
-@observer
 class WorkspacesScreen extends Component<Props> {
   render() {
     const { actions } = this.props;
@@ -38,4 +36,4 @@ class WorkspacesScreen extends Component<Props> {
   }
 }
 
-export default WorkspacesScreen;
+export default inject('stores', 'actions')(observer(WorkspacesScreen));