WD-15784 - fix: fix issues observed in k8s charm (canonical#1807)

vladimir-cucu · Oct 16, 2024 · 09a8a12 · 09a8a12
1 parent ee407d1
commit 09a8a12
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 11 deletions.
diff --git a/src/components/EntityInfo/EntityInfo.test.tsx b/src/components/EntityInfo/EntityInfo.test.tsx
@@ -16,7 +16,7 @@ describe("Entity info", () => {
       <EntityInfo
         data={{
           name: "model1",
-          controller: "controller1",
+          controller: <span>controller1</span>,
           region: "eu1",
         }}
       />,
@@ -25,6 +25,8 @@ describe("Entity info", () => {
         url: "/models/user-eggman@external/group-test",
       },
     );
-    expect(screen.getByText("eu1")).toHaveAttribute("data-name", "region");
+    expect(screen.getByText("model1")).toHaveClass("u-truncate");
+    expect(screen.getByText("controller1")).not.toHaveClass("u-truncate");
+    expect(screen.getByText("eu1")).toHaveClass("u-truncate");
   });
 });
diff --git a/src/components/EntityInfo/EntityInfo.tsx b/src/components/EntityInfo/EntityInfo.tsx
@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import TruncatedTooltip from "components/TruncatedTooltip";
+
 import "./_entity-info.scss";
 
 type Props = {
@@ -13,7 +15,13 @@ export default function EntityInfo({ data }: Props): JSX.Element {
         return (
           <div className="entity-info__grid-item" key={label}>
             <h4 className="p-muted-heading">{label}</h4>
-            <p data-name={label}>{value}</p>
+            {typeof value === "string" || typeof value === "number" ? (
+              <TruncatedTooltip message={value} element="p">
+                {value}
+              </TruncatedTooltip>
+            ) : (
+              <p>{value}</p>
+            )}
           </div>
         );
       })}

diff --git a/src/components/EntityInfo/_entity-info.scss b/src/components/EntityInfo/_entity-info.scss
@@ -2,12 +2,10 @@
   &__grid {
     display: grid;
 
-    @media (width >= 1580px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
     &-item {
+      min-width: 0;
       overflow-wrap: anywhere;
+      width: 100%;
 
       .p-muted-heading {
         font-size: 0.75rem;

diff --git a/src/components/TruncatedTooltip/TruncatedTooltip.test.tsx b/src/components/TruncatedTooltip/TruncatedTooltip.test.tsx
@@ -71,4 +71,26 @@ describe("TruncatedTooltip", () => {
     });
     expect(screen.getByTestId("tooltip-portal")).not.toHaveClass("u-hide");
   });
+
+  it("should render an inner div by default", () => {
+    const content = "Some content";
+    render(
+      <TruncatedTooltip message="Tooltip content">{content}</TruncatedTooltip>,
+    );
+    const innerElement = screen.getByText(content);
+    expect(innerElement.tagName.toLowerCase()).toBe("div");
+    expect(innerElement).toHaveClass("u-truncate");
+  });
+
+  it("should render an inner custom element type", () => {
+    const content = "Some content";
+    render(
+      <TruncatedTooltip message="Tooltip content" element="button">
+        {content}
+      </TruncatedTooltip>,
+    );
+    expect(screen.getByRole("button", { name: content })).toHaveClass(
+      "u-truncate",
+    );
+  });
 });
diff --git a/src/components/TruncatedTooltip/TruncatedTooltip.tsx b/src/components/TruncatedTooltip/TruncatedTooltip.tsx
@@ -1,7 +1,7 @@
 import type { TooltipProps } from "@canonical/react-components";
 import { Tooltip } from "@canonical/react-components";
 import classNames from "classnames";
-import type { PropsWithChildren } from "react";
+import type { ComponentType, ElementType, PropsWithChildren } from "react";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 
 import "./_truncated-tooltip.scss";
@@ -10,6 +10,7 @@ type Props = {
   tooltipClassName?: TooltipProps["tooltipClassName"];
   positionElementClassName?: TooltipProps["positionElementClassName"];
   wrapperClassName?: string;
+  element?: ElementType | ComponentType;
 } & TooltipProps &
   PropsWithChildren;
 
@@ -21,6 +22,7 @@ const TruncatedTooltip = ({
   positionElementClassName,
   tooltipClassName,
   wrapperClassName,
+  element: Component = "div",
   ...tooltipProps
 }: Props) => {
   const truncatedNode = useRef<HTMLDivElement>(null);
@@ -70,9 +72,9 @@ const TruncatedTooltip = ({
           "u-hide": !truncated,
         })}
       >
-        <div ref={truncatedNode} className="u-truncate">
+        <Component ref={truncatedNode} className="u-truncate">
           {children}
-        </div>
+        </Component>
       </Tooltip>
     </div>
   );

diff --git a/src/pages/AdvancedSearch/SearchForm/SearchHelp/SearchHelp.tsx b/src/pages/AdvancedSearch/SearchForm/SearchHelp/SearchHelp.tsx
@@ -41,7 +41,7 @@ const SearchHelp = ({ search }: Props): JSX.Element => {
           <li>
             Get all available models:{" "}
             <QueryLink
-              query={`. | select(."model-status".current=="available")`}
+              query={`. | select(.model."model-status".current=="available")`}
               handleQuery={handleQuery}
             />
           </li>