From bbb7764103cea63638723d169f73e3bac7da1d7d Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Thu, 13 Apr 2023 13:54:27 +0300
Subject: [PATCH] Add modification for wrapping text with ellipsis

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../ui-components/src/element/element.tsx     |  2 ++
 .../word-wrap/word-wrap.test.tsx              | 18 ++++++++++++++
 .../prop-modifications/word-wrap/word-wrap.ts | 24 +++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx
 create mode 100644 packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts

diff --git a/packages/technical-features/ui-components/src/element/element.tsx b/packages/technical-features/ui-components/src/element/element.tsx
index 152ea0eb92..2373048474 100644
--- a/packages/technical-features/ui-components/src/element/element.tsx
+++ b/packages/technical-features/ui-components/src/element/element.tsx
@@ -3,6 +3,7 @@ import { pipeline } from "@ogre-tools/fp";
 import { flexParentModification } from "./prop-modifications/flex/flex-parent";
 import { classNameModification } from "./prop-modifications/class-names/class-names";
 import { vanillaClassNameAdapterModification } from "./prop-modifications/class-names/vanilla-class-name-adapter";
+import { wordWrapModification } from "./prop-modifications/word-wrap/word-wrap";
 
 export const ElementFor =
   <T extends HTMLElement, Y extends HTMLAttributes<T>>(TagName: React.ElementType) =>
@@ -11,6 +12,7 @@ export const ElementFor =
       props,
       vanillaClassNameAdapterModification,
       flexParentModification,
+      wordWrapModification,
       classNameModification,
     );
 
diff --git a/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx b/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx
new file mode 100644
index 0000000000..18e2691220
--- /dev/null
+++ b/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Div } from "../../elements";
+import { render } from "@testing-library/react";
+import { discoverFor } from "@k8slens/react-testing-library-discovery";
+
+describe("word-wrap", () => {
+  it("given word wrap wit, renders with class name", () => {
+    const rendered = render(
+      <Div _wordWrap _className={["some-class-name"]} data-some-element-test />,
+    );
+
+    const discover = discoverFor(() => rendered);
+
+    const { discovered } = discover.getSingleElement("some-element");
+
+    expect(discovered.className).toBe("overflow-hidden text-ellipsis some-class-name");
+  });
+});
diff --git a/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts b/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts
new file mode 100644
index 0000000000..62fe0631dc
--- /dev/null
+++ b/packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts
@@ -0,0 +1,24 @@
+import type { ClassName } from "../class-names/class-names";
+
+declare global {
+  interface ElementProps {
+    _className?: ClassName;
+    _wordWrap?: boolean;
+  }
+}
+
+export const wordWrapModification = <T extends ElementProps>({
+  _wordWrap,
+  _className,
+  ...props
+}: T) => {
+  if (!_wordWrap) {
+    return { _className, ...props };
+  }
+
+  return {
+    ...props,
+
+    _className: ["overflow-hidden", "text-ellipsis", _className],
+  };
+};