[Admin Views] Use useWkSelector instead of mapStateToProps (#8774)

- Removed Redux `connect` and `mapStateToProps` from multiple admins
components, including `DatasetAddRemoteView`, `DatasetAddView`,
`ProjectListView`, `ScriptCreateView`, `TaskAnnotationView`, and
`UserListView`.
- Updated components to directly use `useWkSelector` for accessing the
active user state.
- Simplified props by eliminating unnecessary state props related to
active user.

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
- Type checker should be enough

### Issues:
- fixes #

------
(Please delete unneeded items, merge only when none are left open)
- [ ] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx

@@ -32,13 +32,13 @@ import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
-import type { APIDataStore, APIUser } from "types/api_types";
+import type { APIDataStore } from "types/api_types";
 import type { ArbitraryObject } from "types/globals";
 import type { DataLayer, DatasourceConfiguration } from "types/schemas/datasource.types";
 import { Unicode } from "viewer/constants";
-import type { WebknossosState } from "viewer/store";
+
+import { useWkSelector } from "libs/react_hooks";
 import { Hint } from "viewer/view/action-bar/download_modal_view";
 import { dataPrivacyInfo } from "./dataset_upload_view";
 
@@ -48,7 +48,7 @@ const { Password } = Input;
 
 type FileList = UploadFile<any>[];
 
-type OwnProps = {
+type Props = {
   onAdded: (
     uploadedDatasetId: string,
     updatedDatasetName: string,
@@ -61,17 +61,13 @@ type OwnProps = {
   // the exploration and import.
   defaultDatasetUrl?: string | null | undefined;
 };
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-};
-type Props = OwnProps & StateProps;
 
 function ensureLargestSegmentIdsInPlace(datasource: DatasourceConfiguration) {
   for (const layer of datasource.dataLayers) {
     if (layer.category === "color" || layer.largestSegmentId != null) {
       continue;
     }
-    // Make sure the property exists. Otherwise, the field would not be
+    // Make sure the property exists. Otherwise, a field would not be
     // rendered in the form.
     layer.largestSegmentId = null;
   }
@@ -180,7 +176,8 @@ export function GoogleAuthFormItem({
 }
 
 function DatasetAddRemoteView(props: Props) {
-  const { activeUser, onAdded, datastores, defaultDatasetUrl } = props;
+  const { onAdded, datastores, defaultDatasetUrl } = props;
+  const activeUser = useWkSelector((state) => state.activeUser);
 
   const uploadableDatastores = datastores.filter((datastore) => datastore.allowsUpload);
   const hasOnlyOneDatastoreOrNone = uploadableDatastores.length <= 1;
@@ -729,9 +726,4 @@ function AddRemoteLayer({
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(DatasetAddRemoteView);
+export default DatasetAddRemoteView;

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -7,12 +7,9 @@ import features from "features";
 import { useFetch } from "libs/react_helpers";
 import { useWkSelector } from "libs/react_hooks";
 import React, { useState } from "react";
-import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import type { APIDataStore } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 import DatasetAddComposeView from "./dataset_add_compose_view";
 
 const { Content, Sider } = Layout;
@@ -261,12 +258,7 @@ function VoxelyticsBanner() {
   );
 }
 
-const mapStateToProps = (state: WebknossosState) => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(DatasetAddView);
+export default DatasetAddView;
 
 const getPostUploadModal = (
   datasetNeedsConversion: boolean,

frontend/javascripts/admin/project/project_list_view.tsx

@@ -28,35 +28,28 @@ import { AsyncLink } from "components/async_clickables";
 import FormattedDate from "components/formatted_date";
 import { handleGenericError } from "libs/error_handling";
 import Persistence from "libs/persistence";
-import { useEffectOnlyOnce } from "libs/react_hooks";
+import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import {
   type APIProject,
   type APIProjectWithStatus,
-  type APIUser,
   type APIUserBase,
   TracingTypeEnum,
 } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 
 const { Column } = Table;
 const { Search } = Input;
 
-type OwnProps = {
+type Props = {
   initialSearchValue?: string;
   taskTypeId?: string;
 };
-type StateProps = {
-  activeUser: APIUser;
-};
-type Props = OwnProps & StateProps;
 
 const persistence = new Persistence<{ searchQuery: string }>(
   {
@@ -65,9 +58,10 @@ const persistence = new Persistence<{ searchQuery: string }>(
   "projectList",
 );
 
-function ProjectListView({ initialSearchValue, taskTypeId, activeUser }: Props) {
+function ProjectListView({ initialSearchValue, taskTypeId }: Props) {
   const { modal } = App.useApp();
 
+  const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
   const [isLoading, setIsLoading] = useState(true);
   const [projects, setProjects] = useState<APIProjectWithStatus[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -475,9 +469,4 @@ function ProjectListView({ initialSearchValue, taskTypeId, activeUser }: Props)
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(ProjectListView);
+export default ProjectListView;

frontend/javascripts/admin/scripts/script_create_view.tsx

@@ -1,26 +1,24 @@
 import { createScript, getScript, getTeamManagerOrAdminUsers, updateScript } from "admin/rest_api";
 import { Button, Card, Form, Input, Select } from "antd";
+import { useWkSelector } from "libs/react_hooks";
 import { useEffect, useState } from "react";
-import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import type { APIUser } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 
 const FormItem = Form.Item;
-type OwnProps = {
+
+type Props = {
   scriptId?: string | null | undefined;
 };
-type StateProps = {
-  activeUser: APIUser;
-};
-type Props = OwnProps & StateProps;
 
-function ScriptCreateView({ scriptId, activeUser }: Props) {
+function ScriptCreateView({ scriptId }: Props) {
+  const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
   const history = useHistory();
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);
   const [form] = Form.useForm();
+
   useEffect(() => {
     fetchData();
     applyDefaults();
@@ -127,9 +125,4 @@ function ScriptCreateView({ scriptId, activeUser }: Props) {
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(ScriptCreateView);
+export default ScriptCreateView;

frontend/javascripts/admin/task/task_annotation_view.tsx

@@ -23,25 +23,21 @@ import { AsyncLink } from "components/async_clickables";
 import FormattedDate from "components/formatted_date";
 import TransferTaskModal from "dashboard/transfer_task_modal";
 import { formatSeconds } from "libs/format_utils";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import type { APIAnnotation, APITask, APIUser } from "types/api_types";
+import type { APIAnnotation, APITask } from "types/api_types";
 import { getVolumeDescriptors } from "viewer/model/accessors/volumetracing_accessor";
-import type { WebknossosState } from "viewer/store";
 
-type OwnProps = {
+type Props = {
   task: APITask;
 };
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-};
-type Props = OwnProps & StateProps;
 
-function TaskAnnotationView({ task, activeUser }: Props) {
+function TaskAnnotationView({ task }: Props) {
   const { modal } = App.useApp();
 
+  const activeUser = useWkSelector((state) => state.activeUser);
   const [currentAnnotation, setCurrentAnnotation] = useState<APIAnnotation | undefined>(undefined);
   const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
   const [annotations, setAnnotations] = useState<APIAnnotation[]>([]);
@@ -231,9 +227,4 @@ function TaskAnnotationView({ task, activeUser }: Props) {
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(TaskAnnotationView);
+export default TaskAnnotationView;

frontend/javascripts/admin/user/user_list_view.tsx

@@ -21,32 +21,24 @@ import { Alert, App, Button, Col, Input, Modal, Row, Spin, Table, Tag, Tooltip }
 import LinkButton from "components/link_button";
 import dayjs from "dayjs";
 import Persistence from "libs/persistence";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import { location } from "libs/window";
 import _ from "lodash";
 import messages from "messages";
 import React, { type Key, useEffect, useState } from "react";
-import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
 import { Link } from "react-router-dom";
-import type { APIOrganization, APITeamMembership, APIUser, ExperienceMap } from "types/api_types";
+import type { APITeamMembership, APIUser, ExperienceMap } from "types/api_types";
 import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 import EditableTextLabel from "viewer/view/components/editable_text_label";
 import { logoutUserAction } from "../../viewer/model/actions/user_actions";
 import Store from "../../viewer/store";
 
 const { Column } = Table;
 const { Search } = Input;
 
-type StateProps = {
-  activeUser: APIUser;
-  activeOrganization: APIOrganization;
-};
-type Props = RouteComponentProps & StateProps;
-
 type ActivationFilterType = Array<"activated" | "deactivated" | "verified" | "unverified">;
 
 const persistence = new Persistence<{
@@ -60,9 +52,14 @@ const persistence = new Persistence<{
   "userList",
 );
 
-function UserListView({ activeUser, activeOrganization }: Props) {
+function UserListView() {
   const { modal } = App.useApp();
 
+  const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
+  const activeOrganization = useWkSelector((state) =>
+    enforceActiveOrganization(state.activeOrganization),
+  );
+
   const [isLoading, setIsLoading] = useState(true);
   const [users, setUsers] = useState<APIUser[]>([]);
   const [selectedUserIds, setSelectedUserIds] = useState<Key[]>([]);
@@ -650,10 +647,4 @@ function UserListView({ activeUser, activeOrganization }: Props) {
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: enforceActiveUser(state.activeUser),
-  activeOrganization: enforceActiveOrganization(state.activeOrganization),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(UserListView);
+export default UserListView;