From ddd64252d4bd2e09d63ac222f590df0ce522785d Mon Sep 17 00:00:00 2001
From: Ayobami Akingbade <akingbadefred@gmail.com>
Date: Thu, 28 Dec 2023 02:02:23 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(form-select):=20use=20characte?=
 =?UTF-8?q?r=20length=20to=20trigger=20select=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/components/SchemaForm/_RenderFormInput.tsx | 6 +++++-
 src/frontend/design-system/components/Table/Stories.tsx | 6 +++---
 src/frontend/views/data/Details/RelationsDetails.tsx    | 6 +-----
 src/frontend/views/data/Details/RelationsTable.tsx      | 1 -
 src/frontend/views/data/Details/_Layout.tsx             | 4 +---
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/frontend/components/SchemaForm/_RenderFormInput.tsx b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
index 4aab89d42..442b15f76 100644
--- a/src/frontend/components/SchemaForm/_RenderFormInput.tsx
+++ b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
@@ -38,7 +38,11 @@ export function RenderFormInput(props: IRenderFormInputProps) {
   };
 
   if (entityFieldSelections.length > 0) {
-    if (entityFieldSelections.length > 1 && entityFieldSelections.length <= 4) {
+    if (
+      entityFieldSelections.reduce((acc, selection) => {
+        return acc + selection.label.length;
+      }, 0) < 15
+    ) {
       return (
         <FormSelectButton {...formProps} selectData={entityFieldSelections} />
       );
diff --git a/src/frontend/design-system/components/Table/Stories.tsx b/src/frontend/design-system/components/Table/Stories.tsx
index 112d9509f..f8b7bf447 100644
--- a/src/frontend/design-system/components/Table/Stories.tsx
+++ b/src/frontend/design-system/components/Table/Stories.tsx
@@ -5,7 +5,7 @@ import { action } from "@storybook/addon-actions";
 import { IPaginatedDataState } from "shared/types/data";
 import { ApplicationRoot } from "frontend/components/ApplicationRoot";
 import { Table, DEFAULT_TABLE_STATE } from ".";
-import { IProps } from "./types";
+import { ITableProps } from "./types";
 import { TABLE_COLUMNS, TABLE_DATA } from "./data";
 
 export default {
@@ -29,10 +29,10 @@ export default {
     syncPaginatedDataStateOut: action("setPaginatedDataState"),
     columns: TABLE_COLUMNS,
     tableData: TABLE_DATA,
-  } as IProps<unknown>,
+  } as ITableProps<unknown>,
 };
 
-const Template: Story<IProps<unknown>> = (args) => {
+const Template: Story<ITableProps<unknown>> = (args) => {
   const [paginatedDataState, setPaginatedDataState] = useState<
     IPaginatedDataState<any>
   >({ ...DEFAULT_TABLE_STATE });
diff --git a/src/frontend/views/data/Details/RelationsDetails.tsx b/src/frontend/views/data/Details/RelationsDetails.tsx
index 3144c3c70..c9dbdb4de 100644
--- a/src/frontend/views/data/Details/RelationsDetails.tsx
+++ b/src/frontend/views/data/Details/RelationsDetails.tsx
@@ -92,11 +92,7 @@ export function EntityRelationDetails() {
   });
 
   return (
-    <DetailsLayout
-      entity={parentEntity}
-      menuKey={childEntity}
-      childEntity={childEntity}
-    >
+    <DetailsLayout entity={parentEntity} menuKey={childEntity}>
       {dataDetails.error ? (
         <SectionBox
           title={title}
diff --git a/src/frontend/views/data/Details/RelationsTable.tsx b/src/frontend/views/data/Details/RelationsTable.tsx
index 434803129..051a4d05e 100644
--- a/src/frontend/views/data/Details/RelationsTable.tsx
+++ b/src/frontend/views/data/Details/RelationsTable.tsx
@@ -49,7 +49,6 @@ export function EntityRelationTable() {
   return (
     <DetailsLayout
       entity={parentEntity}
-      childEntity={childEntity}
       menuKey={childEntity}
       menuItems={menuItems}
     >
diff --git a/src/frontend/views/data/Details/_Layout.tsx b/src/frontend/views/data/Details/_Layout.tsx
index 6a2a567db..26077a23f 100644
--- a/src/frontend/views/data/Details/_Layout.tsx
+++ b/src/frontend/views/data/Details/_Layout.tsx
@@ -30,13 +30,11 @@ interface IProps {
   entity: string;
   menuItems?: IDropDownMenuItem[];
   menuKey: string;
-  childEntity?: string;
 }
 
 export function DetailsLayout({
   children,
   entity,
-  childEntity,
   menuKey,
   menuItems = [],
 }: IProps) {
@@ -46,7 +44,7 @@ export function DetailsLayout({
       EntityActionTypes.Form,
       EntityActionTypes.Labels,
     ],
-    childEntity
+    entity
   );
   const entityId = useEntityId();