temp

Author: lorenzo-cavazzi

client/src/components/entities/Entities.css

@@ -0,0 +1,4 @@
+export type EntityTypes =
+  | "code-repository"
+  | "data-connector"
+  | "session-launcher";

client/src/components/entities/entities.types.ts

@@ -0,0 +1,63 @@
+import cx from "classnames";
+import {
+  Database,
+  FileCode,
+  PlayCircle,
+  QuestionCircle,
+} from "react-bootstrap-icons";
+
+import { EntityTypes } from "../entities/entities.types";
+
+interface OffcanvasHeaderWithTypeProps {
+  children?: React.ReactNode;
+  entityIcon?: React.ReactNode;
+  entityName?: string;
+  entityType?: EntityTypes;
+  title: string;
+}
+
+export default function OffcanvasHeaderWithType({
+  children,
+  entityIcon: _entityIcon,
+  entityName: _entityName,
+  entityType,
+  title,
+}: OffcanvasHeaderWithTypeProps) {
+  const entityIcon = _entityIcon ? (
+    _entityIcon
+  ) : entityType === "data-connector" ? (
+    <Database className="me-1" />
+  ) : entityType === "session-launcher" ? (
+    <PlayCircle className="me-1" />
+  ) : entityType === "code-repository" ? (
+    <FileCode className="me-1" />
+  ) : (
+    <QuestionCircle className="me-1" />
+  );
+
+  const entityName = _entityName
+    ? _entityName
+    : entityType === "data-connector"
+      ? "Data connector"
+      : entityType === "session-launcher"
+        ? "Session launcher"
+        : entityType === "code-repository"
+          ? "Code repository"
+          : "Unknown";
+
+  return (
+    <div>
+      <div className={cx("small", "text-muted")}>
+        {entityIcon}
+        {entityName}
+      </div>
+      <h2
+        className={cx("mb-0", "text-break")}
+        data-cy={entityType ? `${entityType}-title` : undefined}
+      >
+        {children && <div className={cx("float-end", "ms-2")}>{children}</div>}
+        {title}
+      </h2>
+    </div>
+  );
+}

client/src/components/offcanvas/OffcanvasHeaderWithType.tsx

@@ -0,0 +1,73 @@
+import cx from "classnames";
+import { useRef } from "react";
+import { ArrowsFullscreen, XLg } from "react-bootstrap-icons";
+import { Link } from "react-router";
+import { UncontrolledTooltip } from "reactstrap";
+
+import { EntityTypes } from "../entities/entities.types";
+
+interface OffcanvasTopButtonsProps {
+  entityType?: EntityTypes;
+  fullPageLink?: string;
+  toggleView: () => void;
+}
+export default function OffcanvasTopButtons({
+  entityType,
+  fullPageLink,
+  toggleView,
+}: OffcanvasTopButtonsProps) {
+  const refClose = useRef(null);
+  const refExpand = useRef(null);
+
+  return (
+    <div className={cx("align-items-center", "d-flex", "gap-2", "mb-3")}>
+      <button
+        aria-label="Close"
+        className={cx(
+          "border-0",
+          "btn",
+          "d-flex",
+          "fs-2",
+          "link-secondary",
+          "p-0",
+          "shadow-none",
+        )}
+        data-cy={
+          entityType
+            ? `${entityType}-close-offcanvas-button`
+            : "close-offcanvas-button"
+        }
+        data-bs-dismiss="offcanvas"
+        ref={refClose}
+        onClick={toggleView}
+      >
+        <XLg />
+        <span className="visually-hidden">Close side panel</span>
+      </button>
+      <UncontrolledTooltip target={refClose}>
+        Close side panel
+      </UncontrolledTooltip>
+
+      {fullPageLink && (
+        <>
+          <Link
+            className={cx("d-flex", "fs-3", "link-secondary")}
+            data-cy={
+              entityType
+                ? `${entityType}-standalone-page-link`
+                : "standalone-page-link"
+            }
+            ref={refExpand}
+            to={fullPageLink}
+          >
+            <ArrowsFullscreen />
+            <span className="visually-hidden">Open full page</span>
+          </Link>
+          <UncontrolledTooltip target={refExpand}>
+            Open full page
+          </UncontrolledTooltip>
+        </>
+      )}
+    </div>
+  );
+}