FIX-2594 Priority servers (#2599)

Src/WitsmlExplorer.Api/Models/Connection.cs

@@ -14,6 +14,7 @@ public Connection(Server server)
             CredentialIds = server.CredentialIds;
             Id = server.Id;
             DepthLogDecimals = server.DepthLogDecimals;
+            IsPriority = server.IsPriority;
         }
 
         [JsonPropertyName("usernames")]

Src/WitsmlExplorer.Api/Models/Server.cs

@@ -25,6 +25,8 @@ public Server() : base(Guid.NewGuid())
         public IList<string> CredentialIds { get; init; }
         [JsonPropertyName("depthLogDecimals")]
         public int DepthLogDecimals { get; init; }
+        [JsonPropertyName("isPriority")]
+        public bool IsPriority { get; init; }
 
         public override string ToString()
         {

Src/WitsmlExplorer.Frontend/__testUtils__/testUtils.tsx

@@ -157,6 +157,7 @@ export function getServer(overrides?: Partial<Server>): Server {
     roles: [],
     credentialIds: [],
     depthLogDecimals: 0,
+    isPriority: false,
     ...overrides
   };
 }

Src/WitsmlExplorer.Frontend/components/ContentViews/ServerManager.tsx

@@ -1,6 +1,7 @@
 import { useIsAuthenticated } from "@azure/msal-react";
 import {
   ButtonProps,
+  Switch,
   Table,
   TextField,
   Typography
@@ -14,23 +15,31 @@ import UserCredentialsModal, {
 } from "components/Modals/UserCredentialsModal";
 import ProgressSpinner from "components/ProgressSpinner";
 import { Button } from "components/StyledComponents/Button";
+import { CommonPanelContainer } from "components/StyledComponents/Container";
 import { useConnectedServer } from "contexts/connectedServerContext";
-import { getSearchRegex } from "contexts/filter";
+import { FilterContext } from "contexts/filter";
 import { useLoggedInUsernames } from "contexts/loggedInUsernamesContext";
 import { LoggedInUsernamesActionType } from "contexts/loggedInUsernamesReducer";
+import { UserTheme } from "contexts/operationStateReducer";
 import OperationType from "contexts/operationType";
-import { useGetServers } from "hooks/query/useGetServers";
+import { getServersQueryKey, useGetServers } from "hooks/query/useGetServers";
 import { useOperationState } from "hooks/useOperationState";
-import { Server, emptyServer } from "models/server";
+import { useServerFilter } from "hooks/useServerFilter";
+import { emptyServer, Server } from "models/server";
 import { adminRole, getUserAppRoles, msalEnabled } from "msal/MsalAuthProvider";
-import React, { ChangeEvent, useEffect, useState } from "react";
+import React, { ChangeEvent, useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { getWellsViewPath } from "routes/utils/pathBuilder";
 import AuthorizationService from "services/authorizationService";
 import NotificationService from "services/notificationService";
+import ServerService from "services/serverService";
 import styled from "styled-components";
 import { Colors } from "styles/Colors";
 import Icon from "styles/Icons";
+import {
+  setLocalStorageItem,
+  STORAGE_FILTER_PRIORITYSERVERS_KEY
+} from "tools/localStorageHelpers";
 
 const NEW_SERVER_ID = "1";
 
@@ -42,18 +51,16 @@ const ServerManager = (): React.ReactElement => {
     placeholderData: []
   });
   const {
-    operationState: { colors },
+    operationState: { colors, theme },
     dispatchOperation
   } = useOperationState();
   const editDisabled = msalEnabled && !getUserAppRoles().includes(adminRole);
   const navigate = useNavigate();
   const { connectedServer, setConnectedServer } = useConnectedServer();
   const { dispatchLoggedInUsernames } = useLoggedInUsernames();
-  const [filter, setFilter] = useState<string>("");
-  const searchRegex = getSearchRegex(filter);
-  const filteredServers = servers?.filter(
-    (s) => !filter || searchRegex.test(s.name) || searchRegex.test(s.url)
-  );
+  const [filterByName, setFilterByName] = useState<string>("");
+  const { selectedFilter, updateSelectedFilter } = useContext(FilterContext);
+  const filteredServers = useServerFilter(servers, filterByName);
 
   useEffect(() => {
     if (isError) {
@@ -100,6 +107,36 @@ const ServerManager = (): React.ReactElement => {
     });
   };
 
+  const togglePriority = async (server: Server) => {
+    try {
+      // Optimistically update the query cache to avoid full rerenders and to keep the scroll position.
+      queryClient.setQueryData(getServersQueryKey(), (oldServers: Server[]) =>
+        oldServers?.map((s) =>
+          s.id === server.id ? { ...s, isPriority: !s.isPriority } : s
+        )
+      );
+
+      const freshServer = await ServerService.updateServer({
+        ...server,
+        isPriority: !server.isPriority
+      });
+      if (freshServer) {
+        AuthorizationService.onServerStateChange(freshServer);
+      }
+    } catch (error) {
+      // Roll back on failure
+      queryClient.setQueryData(getServersQueryKey(), (oldServers: Server[]) =>
+        oldServers?.map((s) => (s.id === server.id ? server : s))
+      );
+
+      NotificationService.Instance.alertDispatcher.dispatch({
+        serverUrl: null,
+        message: `Unable to update priority: ${error.message}`,
+        isSuccess: false
+      });
+    }
+  };
+
   const CellStyle = {
     color: colors.interactive.primaryResting,
     padding: "0.3rem",
@@ -144,11 +181,34 @@ const ServerManager = (): React.ReactElement => {
           </Typography>
           <StyledTextField
             id="serverSearch"
-            value={filter}
+            value={filterByName}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setFilter(e.target.value)
+              setFilterByName(e.target.value)
             }
           />
+          <CommonPanelContainer>
+            <Switch
+              checked={selectedFilter.filterPriorityServers}
+              onChange={() => {
+                setLocalStorageItem<boolean>(
+                  STORAGE_FILTER_PRIORITYSERVERS_KEY,
+                  !selectedFilter.filterPriorityServers
+                );
+                updateSelectedFilter({
+                  filterPriorityServers: !selectedFilter.filterPriorityServers
+                });
+              }}
+              size={theme === UserTheme.Compact ? "small" : "default"}
+            />
+            <Typography
+              style={{
+                color: colors.infographic.primaryMossGreen,
+                whiteSpace: "nowrap"
+              }}
+            >
+              Only show priority servers
+            </Typography>
+          </CommonPanelContainer>
         </div>
         <Button
           variant="outlined"
@@ -169,6 +229,7 @@ const ServerManager = (): React.ReactElement => {
             <Table.Cell style={CellHeaderStyle}>Username</Table.Cell>
             <Table.Cell style={CellHeaderStyle} />
             <Table.Cell style={CellHeaderStyle}>Status</Table.Cell>
+            <Table.Cell style={CellHeaderStyle}>Priority</Table.Cell>
             <Table.Cell style={CellHeaderStyle}></Table.Cell>
             <Table.Cell style={CellHeaderStyle}></Table.Cell>
           </Table.Row>
@@ -214,6 +275,23 @@ const ServerManager = (): React.ReactElement => {
                     }
                   />
                 </Table.Cell>
+                <Table.Cell style={CellStyle}>
+                  <Button
+                    variant="ghost"
+                    disabled={editDisabled || isError}
+                    onClick={() => togglePriority(server)}
+                  >
+                    <Icon
+                      name={
+                        server.isPriority
+                          ? "favoriteFilled"
+                          : "favoriteOutlined"
+                      }
+                      size={24}
+                      color={colors.text.staticIconsTertiary}
+                    />
+                  </Button>
+                </Table.Cell>
                 <Table.Cell style={CellStyle}>
                   <Button variant="ghost" onClick={() => onEditItem(server)}>
                     <Icon
@@ -226,7 +304,7 @@ const ServerManager = (): React.ReactElement => {
                 <Table.Cell style={CellStyle}>
                   <Button
                     data-testid="deleteServerButton"
-                    disabled={editDisabled}
+                    disabled={editDisabled || isError}
                     variant="ghost"
                     onClick={() =>
                       showDeleteServerModal(

Src/WitsmlExplorer.Frontend/components/ContextMenus/BhaRunContextMenu.tsx

@@ -12,6 +12,7 @@ import { useConnectedServer } from "contexts/connectedServerContext";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOpenInQueryView } from "hooks/useOpenInQueryView";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import BhaRun from "models/bhaRun";
 import { ObjectType } from "models/objectType";
 import React from "react";
@@ -24,6 +25,7 @@ const BhaRunContextMenu = (
   const { dispatchOperation } = useOperationState();
   const openInQueryView = useOpenInQueryView();
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
   const { connectedServer } = useConnectedServer();
   const queryClient = useQueryClient();
 
@@ -35,6 +37,7 @@ const BhaRunContextMenu = (
           ObjectType.BhaRun,
           connectedServer,
           servers,
+          filteredServers,
           dispatchOperation,
           queryClient,
           openInQueryView,

Src/WitsmlExplorer.Frontend/components/ContextMenus/CopyComponentsToServer.tsx

@@ -9,6 +9,7 @@ import { useConnectedServer } from "contexts/connectedServerContext";
 import OperationType from "contexts/operationType";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import { ComponentType } from "models/componentType";
 import LogCurveInfo from "models/logCurveInfo";
 import ObjectOnWellbore from "models/objectOnWellbore";
@@ -37,6 +38,7 @@ export const CopyComponentsToServerMenuItem = (
   } = props;
   const { connectedServer } = useConnectedServer();
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
   const { dispatchOperation } = useOperationState();
   const menuComponents = menuItemText("copy", componentType, componentsToCopy);
   const menuText =
@@ -87,7 +89,7 @@ export const CopyComponentsToServerMenuItem = (
       label={menuText}
       disabled={componentsToCopy.length < 1 || disableMenuItem}
     >
-      {servers?.map(
+      {filteredServers?.map(
         (server: Server) =>
           server.id !== connectedServer?.id && (
             <MenuItem

Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidContextMenu.tsx

@@ -17,6 +17,7 @@ import { useClipboardComponentReferencesOfType } from "components/ContextMenus/U
 import { useConnectedServer } from "contexts/connectedServerContext";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import { ComponentType } from "models/componentType";
 import Fluid from "models/fluid";
 import FluidsReport from "models/fluidsReport";
@@ -40,6 +41,7 @@ const FluidContextMenu = (props: FluidContextMenuProps): React.ReactElement => {
   );
   const { connectedServer } = useConnectedServer();
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
 
   const toDelete = createComponentReferences(
     checkedFluids.map((fluid) => fluid.uid),
@@ -111,7 +113,7 @@ const FluidContextMenu = (props: FluidContextMenuProps): React.ReactElement => {
           </Typography>
         </MenuItem>,
         <NestedMenuItem key={"showOnServer"} label={"Show on server"}>
-          {servers.map((server: Server) => (
+          {filteredServers.map((server: Server) => (
             <MenuItem
               key={server.name}
               onClick={() =>

Src/WitsmlExplorer.Frontend/components/ContextMenus/FluidsReportContextMenu.tsx

@@ -17,6 +17,7 @@ import { useConnectedServer } from "contexts/connectedServerContext";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOpenInQueryView } from "hooks/useOpenInQueryView";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import { ComponentType } from "models/componentType";
 import FluidsReport from "models/fluidsReport";
 import { ObjectType } from "models/objectType";
@@ -28,6 +29,7 @@ const FluidsReportContextMenu = (
 ): React.ReactElement => {
   const { checkedObjects } = props;
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
   const { dispatchOperation } = useOperationState();
   const openInQueryView = useOpenInQueryView();
   const fluidReferences = useClipboardComponentReferencesOfType(
@@ -66,6 +68,7 @@ const FluidsReportContextMenu = (
           ObjectType.FluidsReport,
           connectedServer,
           servers,
+          filteredServers,
           dispatchOperation,
           queryClient,
           openInQueryView,

Src/WitsmlExplorer.Frontend/components/ContextMenus/FormationMarkerContextMenu.tsx

@@ -12,6 +12,7 @@ import { useConnectedServer } from "contexts/connectedServerContext";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOpenInQueryView } from "hooks/useOpenInQueryView";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import FormationMarker from "models/formationMarker";
 import { ObjectType } from "models/objectType";
 import React from "react";
@@ -26,6 +27,7 @@ const FormationMarkerContextMenu = (
   const { connectedServer } = useConnectedServer();
   const queryClient = useQueryClient();
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
 
   const extraMenuItems = (): React.ReactElement[] => {
     return [
@@ -55,6 +57,7 @@ const FormationMarkerContextMenu = (
           ObjectType.FormationMarker,
           connectedServer,
           servers,
+          filteredServers,
           dispatchOperation,
           queryClient,
           openInQueryView,

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogCurveInfoContextMenu.tsx

@@ -36,6 +36,7 @@ import {
   HideModalAction
 } from "contexts/operationStateReducer";
 import OperationType from "contexts/operationType";
+import { useServerFilter } from "hooks/useServerFilter";
 import { ComponentType } from "models/componentType";
 import { IndexCurve } from "models/indexCurve";
 import { createComponentReferences } from "models/jobs/componentReferences";
@@ -82,6 +83,8 @@ const LogCurveInfoContextMenu = (
     isMultiLog = false
   } = props;
 
+  const filteredServers = useServerFilter(servers);
+
   const onlyPrioritizedCurvesAreChecked = checkedLogCurveInfoRows.every(
     (row, index) =>
       prioritizedLocalCurves.includes(row.mnemonic) ||
@@ -374,7 +377,7 @@ const LogCurveInfoContextMenu = (
           label={"Show on server"}
           disabled={isMultiLog}
         >
-          {servers.map((server: Server) => (
+          {filteredServers.map((server: Server) => (
             <MenuItem
               key={server.name}
               onClick={() =>

Src/WitsmlExplorer.Frontend/components/ContextMenus/LogObjectContextMenu.tsx

@@ -41,6 +41,7 @@ import OperationType from "contexts/operationType";
 import { useGetServers } from "hooks/query/useGetServers";
 import { useOpenInQueryView } from "hooks/useOpenInQueryView";
 import { useOperationState } from "hooks/useOperationState";
+import { useServerFilter } from "hooks/useServerFilter";
 import { ComponentType } from "models/componentType";
 import CheckLogHeaderJob from "models/jobs/checkLogHeaderJob";
 import CompareLogDataJob from "models/jobs/compareLogData";
@@ -74,6 +75,7 @@ const LogObjectContextMenu = (
     useClipboardComponentReferencesOfType(ComponentType.Mnemonic);
   const { connectedServer } = useConnectedServer();
   const { servers } = useGetServers();
+  const filteredServers = useServerFilter(servers);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
@@ -479,6 +481,7 @@ const LogObjectContextMenu = (
           ObjectType.Log,
           connectedServer,
           servers,
+          filteredServers,
           dispatchOperation,
           queryClient,
           openInQueryView,