feat: Add internal portal wrapper to search cards (#3666)

api.planx.uk/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#2dccab9",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",

e2e/tests/api-driven/package.json

@@ -7,7 +7,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#2dccab9",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",

e2e/tests/ui-driven/package.json

@@ -8,7 +8,7 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#2dccab9",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
     "axios": "^1.7.4",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#2dccab9",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/@planx/components/ui.tsx

@@ -6,6 +6,7 @@ import CloudUpload from "@mui/icons-material/CloudUpload";
 import ContactPage from "@mui/icons-material/ContactPage";
 import CopyAll from "@mui/icons-material/CopyAll";
 import Create from "@mui/icons-material/Create";
+import DoorFrontOutlined from "@mui/icons-material/DoorFrontOutlined";
 import Event from "@mui/icons-material/Event";
 import FilterAltOutlined from "@mui/icons-material/FilterAltOutlined";
 import FunctionsIcon from "@mui/icons-material/Functions";
@@ -74,7 +75,7 @@ export const ICONS: {
   [TYPES.Filter]: FilterAltOutlined,
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
-  [TYPES.InternalPortal]: undefined,
+  [TYPES.InternalPortal]: DoorFrontOutlined,
   [TYPES.List]: ListAlt,
   [TYPES.MapAndLabel]: ShapeLine,
   [TYPES.Notice]: ReportProblemOutlined,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@apollo/client";
-import DoorFrontOutlined from "@mui/icons-material/DoorFrontOutlined";
 import MoreVert from "@mui/icons-material/MoreVert";
+import { ComponentType } from "@opensystemslab/planx-core/types";
+import { ICONS } from "@planx/components/ui";
 import classNames from "classnames";
 import gql from "graphql-tag";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -125,6 +126,8 @@ const InternalPortal: React.FC<any> = (props) => {
     copyNode(props.id);
   };
 
+  const Icon = ICONS[ComponentType.InternalPortal];
+
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
@@ -135,7 +138,7 @@ const InternalPortal: React.FC<any> = (props) => {
           ref={drag}
           onContextMenu={handleContext}
         >
-          <DoorFrontOutlined />
+          {Icon && <Icon />}
           <span>{props.data.text}</span>
         </Link>
         <Link href={editHref} prefetch={false} className="portalMenu">

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx

@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import ListItemButton from "@mui/material/ListItemButton";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { IndexedNode } from "@opensystemslab/planx-core/types";
+import { ComponentType, IndexedNode } from "@opensystemslab/planx-core/types";
 import { ICONS } from "@planx/components/ui";
 import type { SearchResult } from "hooks/useSearch";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -13,72 +13,104 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import { Headline } from "../Headline";
 import { getDisplayDetailsForResult } from "./DataDisplayMap";
 
-export const Root = styled(ListItemButton)(({ theme }) => ({
-  padding: theme.spacing(1),
+const SearchResultCardRoot = styled(ListItemButton, {
+  shouldForwardProp: (prop) => prop !== "portalId",
+})<{ portalId?: string }>(({ theme, portalId }) => ({
   border: `1px solid ${theme.palette.common.black}`,
   display: "block",
+  padding: 0,
+  borderWidth: portalId ? 4 : 2,
 }));
 
+const HeaderRoot = styled(Box)(({ theme }) => ({
+  padding: [theme.spacing(1), theme.spacing(0.5)],
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: theme.palette.common.black,
+  color: theme.palette.common.white,
+  width: "100%",
+  borderColor: theme.palette.common.black,
+  borderWidth: 4,
+}));
+
+const InternalPortalHeader: React.FC<{ portalId: string }> = ({ portalId }) => {
+  const portalName = useStore((state) => state.flow)[portalId].data.text;
+  const Icon = ICONS[ComponentType.InternalPortal];
+
+  return (
+    <HeaderRoot>
+      {Icon && <Icon />}
+      <Typography
+        variant="body2"
+        fontSize={14}
+        fontWeight={FONT_WEIGHT_SEMI_BOLD}
+        ml={1}
+      >
+        {portalName}
+      </Typography>
+    </HeaderRoot>
+  );
+};
+
 export const SearchResultCard: React.FC<{
   result: SearchResult<IndexedNode>;
 }> = ({ result }) => {
-  // TODO - display portal wrapper
   const { iconKey, componentType, title, key, headline } =
     getDisplayDetailsForResult(result);
   const Icon = ICONS[iconKey];
 
   const getURLForNode = useStore((state) => state.getURLForNode);
   const { navigate } = useNavigation();
 
+  const portalId = result.item.internalPortalId;
+
   const handleClick = () => {
     const url = getURLForNode(result.item.id);
     navigate(url);
   };
 
   return (
-    <Root onClick={handleClick}>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          mb: 1,
-        }}
-      >
-        {Icon && (
-          <Icon
-            sx={{
-              mr: 1,
-            }}
-          />
-        )}
-        <Typography
-          variant="body2"
-          fontSize={14}
-          fontWeight={FONT_WEIGHT_SEMI_BOLD}
+    <SearchResultCardRoot onClick={handleClick} portalId={portalId}>
+      {portalId && <InternalPortalHeader portalId={portalId} />}
+      <Box p={1}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            mb: 1,
+          }}
         >
-          {componentType}
-        </Typography>
-        {title && (
+          {Icon && <Icon />}
           <Typography
             variant="body2"
             fontSize={14}
-            ml={0.5}
-            overflow="hidden"
-            textOverflow="ellipsis"
-            whiteSpace="nowrap"
+            fontWeight={FONT_WEIGHT_SEMI_BOLD}
+            ml={1}
           >
-            {` • ${title}`}
+            {componentType}
           </Typography>
-        )}
+          {title && (
+            <Typography
+              variant="body2"
+              fontSize={14}
+              ml={0.5}
+              overflow="hidden"
+              textOverflow="ellipsis"
+              whiteSpace="nowrap"
+            >
+              {` • ${title}`}
+            </Typography>
+          )}
+        </Box>
+        <Typography variant="body2" display="inline-block" mr={0.5}>
+          {key} -
+        </Typography>
+        <Headline
+          text={headline}
+          matchIndices={result.matchIndices!}
+          variant="data"
+        />
       </Box>
-      <Typography variant="body2" display="inline-block" mr={0.5}>
-        {key} -
-      </Typography>
-      <Headline
-        text={headline}
-        matchIndices={result.matchIndices!}
-        variant="data"
-      />
-    </Root>
+    </SearchResultCardRoot>
   );
 };