ENH: Add RMS wellbore page

frontend/src/components/common.tsx

@@ -1,5 +1,5 @@
 import { useIsAuthenticated, useMsal } from "@azure/msal-react";
-import { Dialog } from "@equinor/eds-core-react";
+import { Dialog, List } from "@equinor/eds-core-react";
 import {
   QueryErrorResetBoundary,
   useSuspenseQuery,
@@ -17,7 +17,10 @@ import { userGetUserOptions } from "#client/@tanstack/react-query.gen";
 import { GeneralButton } from "#components/form/button";
 import type { HealthCheck } from "#services/smda";
 import {
+  ActionButtonsContainer,
   GenericDialog,
+  OrphanWarningContainer,
+  OrphanWarningList,
   PageCode,
   PageHeader,
   PageText,
@@ -39,6 +42,48 @@ export function Loading() {
   return <PageText>Loading...</PageText>;
 }
 
+const ORPHAN_LIST_PREVIEW_LIMIT = 20;
+
+export function OrphanWarningBox({
+  message,
+  listItems,
+  buttonLabel,
+  onRemove,
+}: {
+  message: string;
+  listItems: string[];
+  buttonLabel: string;
+  onRemove: () => void;
+}) {
+  const visibleListItems = listItems.slice(0, ORPHAN_LIST_PREVIEW_LIMIT);
+  const hiddenItemCount = listItems.length - visibleListItems.length;
+
+  return (
+    <OrphanWarningContainer>
+      <PageText>{message}</PageText>
+
+      <OrphanWarningList>
+        {visibleListItems.map((item) => (
+          <List.Item key={item}>{item}</List.Item>
+        ))}
+        {hiddenItemCount > 0 && (
+          <List.Item key="remaining-items">
+            and {hiddenItemCount} more
+          </List.Item>
+        )}
+      </OrphanWarningList>
+
+      <ActionButtonsContainer>
+        <GeneralButton
+          label={buttonLabel}
+          variant="outlined"
+          onClick={onRemove}
+        />
+      </ActionButtonsContainer>
+    </OrphanWarningContainer>
+  );
+}
+
 function ErrorFallback({
   error,
   resetErrorBoundary,

frontend/src/components/project/rms/Overview.tsx

@@ -13,6 +13,7 @@ import {
   projectPatchRmsMutation,
   rmsDeleteRmsProjectMutation,
   rmsGetHorizonsQueryKey,
+  rmsGetWellsQueryKey,
   rmsGetZonesQueryKey,
   rmsPostRmsProjectMutation,
   sessionGetSessionQueryKey,
@@ -258,6 +259,9 @@ function RmsProjectActions({
       void queryClient.invalidateQueries({
         queryKey: rmsGetZonesQueryKey(),
       });
+      void queryClient.invalidateQueries({
+        queryKey: rmsGetWellsQueryKey(),
+      });
     },
     onError: (error, variables) => {
       if (error.response?.status === HTTP_STATUS_422_UNPROCESSABLE_CONTENT) {

frontend/src/components/project/rms/Stratigraphy.style.ts

@@ -1,8 +1,6 @@
 import { tokens } from "@equinor/eds-tokens";
 import styled from "styled-components";
 
-import { WarningBox } from "#styles/common";
-
 export const StratigraphyEditorContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -16,7 +14,3 @@ export const StratigraphyEditorContainer = styled.div`
     text-decoration: underline;
   }
 `;
-
-export const OrphanTypesContainer = styled(WarningBox)`
-  margin-top: ${tokens.spacings.comfortable.medium};
-`;

frontend/src/components/project/rms/Stratigraphy.tsx

@@ -1,4 +1,4 @@
-import { Dialog, List } from "@equinor/eds-core-react";
+import { Dialog } from "@equinor/eds-core-react";
 import { type AnyFormApi, createFormHook } from "@tanstack/react-form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
@@ -17,7 +17,7 @@ import {
   rmsGetHorizonsOptions,
   rmsGetZonesOptions,
 } from "#client/@tanstack/react-query.gen";
-import { ConfirmCloseDialog } from "#components/common";
+import { ConfirmCloseDialog, OrphanWarningBox } from "#components/common";
 import {
   CancelButton,
   GeneralButton,
@@ -44,10 +44,7 @@ import { fieldContext, formContext, useFormContext } from "#utils/form";
 import { useConfirmClose } from "#utils/ui.ts";
 import { StratigraphicFramework } from "../stratigraphicFramework/StratigraphicFramework.tsx";
 import { Horizons, Zones } from "./StratigraphicFramework";
-import {
-  OrphanTypesContainer,
-  StratigraphyEditorContainer,
-} from "./Stratigraphy.style";
+import { StratigraphyEditorContainer } from "./Stratigraphy.style";
 import { namesNotInReference, useItemHandlers } from "./utils.ts";
 
 type ConfirmAction = "add" | "remove" | "";
@@ -100,33 +97,6 @@ function ConfirmActionDialog({
   );
 }
 
-function OrphanWarningBox({
-  orphanZoneNames,
-  orphanHorizonNames,
-}: {
-  orphanZoneNames: string[];
-  orphanHorizonNames: string[];
-}) {
-  return (
-    <OrphanTypesContainer>
-      <PageText>
-        There are horizons or zones in the project stratigraphy that are no
-        longer available in RMS. They need to be removed before data can be
-        saved.
-      </PageText>
-
-      <List>
-        {orphanHorizonNames.length > 0 && (
-          <List.Item>{orphanHorizonNames.join(", ")}</List.Item>
-        )}
-        {orphanZoneNames.length > 0 && (
-          <List.Item>{orphanZoneNames.join(", ")}</List.Item>
-        )}
-      </List>
-    </OrphanTypesContainer>
-  );
-}
-
 function StratigraphyEditor({
   availableHorizons,
   availableZones,
@@ -185,6 +155,28 @@ function StratigraphyEditor({
   );
   const hasOrphans =
     orphanHorizonNames.length > 0 || orphanZoneNames.length > 0;
+  const orphanCount = orphanHorizonNames.length + orphanZoneNames.length;
+  const orphanTypeCounts = [
+    orphanHorizonNames.length > 0
+      ? `${orphanHorizonNames.length} ${
+          orphanHorizonNames.length === 1 ? "horizon" : "horizons"
+        }`
+      : "",
+    orphanZoneNames.length > 0
+      ? `${orphanZoneNames.length} ${
+          orphanZoneNames.length === 1 ? "zone" : "zones"
+        }`
+      : "",
+  ].filter(Boolean);
+  const orphanListItems = [
+    ...orphanHorizonNames.map((name) => `Horizon: ${name}`),
+    ...orphanZoneNames.map((name) => `Zone: ${name}`),
+  ];
+
+  const removeOrphans = () => {
+    removeItems("horizons", orphanHorizonNames);
+    removeItems("zones", orphanZoneNames);
+  };
 
   useEffect(() => {
     form.setErrorMap({
@@ -216,8 +208,19 @@ function StratigraphyEditor({
 
         {hasOrphans && (
           <OrphanWarningBox
-            orphanZoneNames={orphanZoneNames}
-            orphanHorizonNames={orphanHorizonNames}
+            message={`${orphanTypeCounts.join(" and ")} stored in the project ${
+              orphanCount === 1 ? "is" : "are"
+            } no longer available in RMS. Remove ${
+              orphanCount === 1 ? "it" : "them"
+            } before saving.`}
+            listItems={orphanListItems}
+            buttonLabel={`Remove outdated ${[
+              orphanHorizonNames.length > 0 ? "horizons" : "",
+              orphanZoneNames.length > 0 ? "zones" : "",
+            ]
+              .filter(Boolean)
+              .join(" and ")}`}
+            onRemove={removeOrphans}
           />
         )}
 

frontend/src/components/project/rms/Wellbores.style.ts

@@ -0,0 +1,31 @@
+import { tokens } from "@equinor/eds-tokens";
+import styled from "styled-components";
+
+export const WellsContainer = styled.div`
+  width: fit-content;
+  max-width: 100%;
+  margin-bottom: ${tokens.spacings.comfortable.medium};
+
+  .table-wrapper {
+    /* EDS's Firefox table workaround makes interactive DataGrid headers taller
+       than the 48px row height used by the virtualizer. */
+    thead th {
+      height: 48px !important;
+      vertical-align: middle !important;
+    }
+
+    thead th [class*="CellInner"] {
+      height: 100% !important;
+      padding-block: 0 !important;
+      gap: ${tokens.spacings.comfortable.small};
+    }
+
+    thead th [class*="SortButton"] {
+      width: auto !important;
+    }
+
+    thead th.persistent-filter [class*="FilterVisibility"] {
+      opacity: 1 !important;
+    }
+  }
+`;