fix(ui): drop mobx-react

ui/package.json

@@ -29,7 +29,6 @@
     "lodash.throttle": "4.1.1",
     "lodash.uniqueid": "4.0.1",
     "mobx": "5.15.4",
-    "mobx-react": "6.2.2",
     "mobx-react-lite": "2.0.7",
     "mobx-stored": "1.1.0",
     "moment": "2.26.0",

ui/src/App.tsx

@@ -5,7 +5,7 @@ import React, {
   useCallback,
 } from "react";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Media from "react-media";
 

ui/src/Components/AlertAck/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
 import { toJS } from "mobx";
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import moment from "moment";
 

ui/src/Components/FaviconBadge/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { autorun } from "mobx";
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Favico from "favico.js";
 

ui/src/Components/Fetcher/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
 import { reaction } from "mobx";
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import moment from "moment";
 

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Manager, Reference, Popper } from "react-popper";
 

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faVolumeMute } from "@fortawesome/free-solid-svg-icons/faVolumeMute";

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { APIGroup } from "Models/API";
 import { StaticLabels } from "Common/Query";

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { APIGroup } from "Models/API";
 import { AlertStore } from "Stores/AlertStore";

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Fade } from "react-reveal";
 

ui/src/Components/Grid/AlertGrid/Grid.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import debounce from "lodash.debounce";
 

ui/src/Components/Grid/AlertGrid/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import debounce from "lodash.debounce";
 

ui/src/Components/Grid/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";

ui/src/Components/Labels/FilterInputLabel/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";

ui/src/Components/Labels/FilteringCounterBadge/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import Flash from "react-reveal/Flash";
 

ui/src/Components/Labels/FilteringLabel/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { QueryOperators, FormatQuery } from "Common/Query";
 import { TooltipWrapper } from "Components/TooltipWrapper";

ui/src/Components/Labels/HistoryLabel/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { QueryOperators } from "Common/Query";
 import { AlertStore } from "Stores/AlertStore";

ui/src/Components/Labels/LabelWithPercent/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";

ui/src/Components/Labels/StaticLabel/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { GetClassAndStyle } from "Components/Labels/Utils";
 

ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Select from "react-select";
 

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Select from "react-select";
 

ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Settings } from "Stores/Settings";
 

ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Settings } from "Stores/Settings";
 

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Settings } from "Stores/Settings";
 import { GridLabelName } from "./GridLabelName";

ui/src/Components/MainModal/Configuration/ThemeConfiguration.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Select from "react-select";
 

ui/src/Components/MainModal/MainModalContent.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";

ui/src/Components/ManagedSilence/SilenceProgress.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import moment from "moment";
 import Moment from "react-moment";

ui/src/Components/NavBar/FetchIndicator/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";

ui/src/Components/NavBar/FilterInput/History.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 import { localStored } from "mobx-stored";
 
 import { Manager, Reference, Popper } from "react-popper";

ui/src/Components/NavBar/FilterInput/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Autosuggest from "react-autosuggest";
 import Highlight from "react-highlighter";

ui/src/Components/NavBar/index.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 
 import { reaction } from "mobx";
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import ReactResizeDetector from "react-resize-detector";
 

ui/src/Components/OverviewModal/OverviewModalContent.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";

ui/src/Components/OverviewModal/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Flash from "react-reveal/Flash";
 

ui/src/Components/SilenceModal/AlertManagerInput/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { autorun } from "mobx";
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import Select from "react-select";
 

ui/src/Components/SilenceModal/Browser/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { Fade } from "react-reveal";
 

ui/src/Components/SilenceModal/DateTimeSelect/Duration.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleUp } from "@fortawesome/free-solid-svg-icons/faAngleUp";

ui/src/Components/SilenceModal/DateTimeSelect/HourMinute.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import moment from "moment";
 

ui/src/Components/SilenceModal/DateTimeSelect/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import moment from "moment";
 

ui/src/Components/SilenceModal/PayloadPreview/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import JSONPretty from "react-json-pretty";
 import * as theme from "react-json-pretty/dist/monikai";

ui/src/Components/SilenceModal/SilenceForm.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";

ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 
 import { components } from "react-select";
 

ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";

ui/src/Components/SilenceModal/SilenceMatch/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
+import { useObserver } from "mobx-react-lite";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";