refactor: address review UI comments

AyushPrakash414 · AyushPrakash414 · commit 42099cde1ce1 · 2026-02-26T11:23:56.000+05:30
diff --git a/src/components/TDViewer/components/Action.tsx b/src/components/TDViewer/components/Action.tsx
@@ -31,6 +31,7 @@ const Action: React.FC<any> = (props) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const addFormDialog = React.useRef<any>();
+
   const handleOpenAddFormDialog = () => {
     addFormDialog.current?.openModal();
   };
@@ -79,9 +80,10 @@ const Action: React.FC<any> = (props) => {
       setIsExpanded(true);
 
       setTimeout(() => {
-        document
-          .getElementById(`action-${newName}`)
-          ?.scrollIntoView({ behavior: "smooth", block: "center" });
+        document.getElementById(`action-${newName}`)?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
       }, 100);
     } catch (e) {
       console.error(e);
@@ -105,7 +107,7 @@ const Action: React.FC<any> = (props) => {
         {isExpanded && (
           <>
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-lg bg-gray-400 text-base"
               title="Copy action"
               onClick={(e) => {
                 e.preventDefault();
@@ -115,9 +117,8 @@ const Action: React.FC<any> = (props) => {
             >
               <Copy size={16} color="white" />
             </button>
-
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-lg rounded-tr-lg bg-gray-400 text-base"
               title="Delete action"
               onClick={(e) => {
                 e.preventDefault();
@@ -161,7 +162,7 @@ const Action: React.FC<any> = (props) => {
 
         {forms.map((form, i) => (
           <Form
-            key={`${i}-${form.href}`}
+            key={`${i}-${form?.href ?? "nohref"}`}
             form={form}
             propName={props.actionName}
             interactionType="action"
@@ -171,5 +172,4 @@ const Action: React.FC<any> = (props) => {
     </details>
   );
 };
-
-export default Action;
+export default Action;
diff --git a/src/components/TDViewer/components/Event.tsx b/src/components/TDViewer/components/Event.tsx
@@ -31,36 +31,20 @@ const Event: React.FC<any> = (props) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const addFormDialog = useRef<{ openModal: () => void }>(null);
+
   const handleOpenAddFormDialog = () => {
     addFormDialog.current?.openModal();
   };
 
-  if (
-    Object.keys(props.event).length === 0 &&
-    props.event.constructor !== Object
-  ) {
-    return (
-      <div className="text-3xl text-white">
-        Event could not be rendered because mandatory fields are missing.
-      </div>
-    );
-  }
-
   const event = props.event;
-  const forms = separateForms(props.event.forms);
+  const forms = separateForms(event.forms);
 
   const attributeListObject = buildAttributeListObject(
     { name: props.eventName },
-    props.event,
+    event,
     alreadyRenderedKeys
   );
 
-  const attributes = Object.keys(attributeListObject).map((x) => (
-    <li key={x}>
-      {x} : {JSON.stringify(attributeListObject[x])}
-    </li>
-  ));
-
   const handleDeleteEventClicked = () => {
     context.removeOneOfAKindReducer("events", props.eventName);
   };
@@ -75,7 +59,6 @@ const Event: React.FC<any> = (props) => {
       });
 
       context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));
-
       setIsExpanded(true);
 
       setTimeout(() => {
@@ -104,9 +87,8 @@ const Event: React.FC<any> = (props) => {
 
         {isExpanded && (
           <>
-            {/* COPY BUTTON */}
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400"
               title="Copy event"
               onClick={(e) => {
                 e.preventDefault();
@@ -117,9 +99,8 @@ const Event: React.FC<any> = (props) => {
               <Copy size={16} color="white" />
             </button>
 
-            {/* DELETE BUTTON */}
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-lg rounded-tr-lg bg-gray-400"
               title="Delete event"
               onClick={(e) => {
                 e.preventDefault();
@@ -140,19 +121,20 @@ const Event: React.FC<any> = (props) => {
           </div>
         )}
 
-        <ul className="list-disc pl-6 text-base text-gray-300">{attributes}</ul>
+        <ul className="list-disc pl-6 text-base text-gray-300">
+          {Object.entries(attributeListObject).map(([k, v]) => (
+            <li key={k}>
+              {k}: {JSON.stringify(v)}
+            </li>
+          ))}
+        </ul>
 
-        <div className="flex items-center justify-start pb-2 pt-2">
-          <InfoIconWrapper
-            className="flex-grow"
-            tooltip={getFormsTooltipContent()}
-            id="events"
-          >
-            <h4 className="pr-1 text-lg font-bold text-white">Forms</h4>
-          </InfoIconWrapper>
-        </div>
+        <InfoIconWrapper tooltip={getFormsTooltipContent()} id="events">
+          <h4 className="text-lg font-bold text-white">Forms</h4>
+        </InfoIconWrapper>
 
         <AddFormElement onClick={handleOpenAddFormDialog} />
+
         <AddFormDialog
           type="event"
           interaction={event}
diff --git a/src/components/TDViewer/components/Property.tsx b/src/components/TDViewer/components/Property.tsx
@@ -26,56 +26,21 @@ import { copyAffordance } from "../../../utils/copyAffordance";
 
 const alreadyRenderedKeys = ["title", "forms", "description"];
 
-interface IProperty {
-  prop: {
-    title: string;
-    forms: Array<{
-      href: string;
-      contentType?: string;
-      op?: string | string[];
-      [key: string]: any;
-    }>;
-    description?: string;
-    [key: string]: any;
-  };
-  propName: string;
-}
-
-const Property: React.FC<IProperty> = (props) => {
+const Property: React.FC<any> = (props) => {
   const context = useContext(ediTDorContext);
   const [isExpanded, setIsExpanded] = useState(false);
 
   const addFormDialog = useRef<{ openModal: () => void }>(null);
-  const handleOpenAddFormDialog = () => {
-    addFormDialog.current?.openModal();
-  };
-
-  if (
-    Object.keys(props.prop).length === 0 &&
-    props.prop.constructor !== Object
-  ) {
-    return (
-      <div className="text-3xl text-white">
-        Property could not be rendered because mandatory fields are missing.
-      </div>
-    );
-  }
 
   const property = props.prop;
-  const forms = separateForms(structuredClone(props.prop.forms));
+  const forms = separateForms(structuredClone(property.forms));
 
   const attributeListObject = buildAttributeListObject(
     { name: props.propName },
-    props.prop,
+    property,
     alreadyRenderedKeys
   );
 
-  const attributes = Object.keys(attributeListObject).map((x) => (
-    <li key={x}>
-      {x} : {JSON.stringify(attributeListObject[x])}
-    </li>
-  ));
-
   const handleDeletePropertyClicked = () => {
     context.removeOneOfAKindReducer("properties", props.propName);
   };
@@ -90,7 +55,6 @@ const Property: React.FC<IProperty> = (props) => {
       });
 
       context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));
-
       setIsExpanded(true);
 
       setTimeout(() => {
@@ -119,9 +83,8 @@ const Property: React.FC<IProperty> = (props) => {
 
         {isExpanded && (
           <>
-            {/* COPY BUTTON */}
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400"
               title="Copy property"
               onClick={(e) => {
                 e.preventDefault();
@@ -132,9 +95,8 @@ const Property: React.FC<IProperty> = (props) => {
               <Copy size={16} color="white" />
             </button>
 
-            {/* DELETE BUTTON */}
             <button
-              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
+              className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-lg rounded-tr-lg bg-gray-400"
               title="Delete property"
               onClick={(e) => {
                 e.preventDefault();
@@ -155,15 +117,20 @@ const Property: React.FC<IProperty> = (props) => {
           </div>
         )}
 
-        <ul className="list-disc pl-6 text-base text-gray-300">{attributes}</ul>
+        <ul className="list-disc pl-6 text-base text-gray-300">
+          {Object.entries(attributeListObject).map(([k, v]) => (
+            <li key={k}>
+              {k}: {JSON.stringify(v)}
+            </li>
+          ))}
+        </ul>
+
+        <InfoIconWrapper tooltip={getFormsTooltipContent()} id="properties">
+          <h4 className="text-lg font-bold text-white">Forms</h4>
+        </InfoIconWrapper>
 
-        <div className="flex items-center justify-start pb-2 pt-2">
-          <InfoIconWrapper tooltip={getFormsTooltipContent()} id="properties">
-            <h4 className="pr-1 text-lg font-bold text-white">Forms</h4>
-          </InfoIconWrapper>
-        </div>
+        <AddFormElement onClick={() => addFormDialog.current?.openModal()} />
 
-        <AddFormElement onClick={handleOpenAddFormDialog} />
         <AddFormDialog
           type="property"
           interaction={property}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -55,4 +55,7 @@ declare global {
     quality?: number;
   }
 }
+
+export type InteractionKey = "actions" | "properties" | "events";
+
 export {};
diff --git a/src/utils/copyAffordance.ts b/src/utils/copyAffordance.ts
@@ -12,12 +12,11 @@
  ********************************************************************************/
 
 import test from "node:test";
-
-type Section = "actions" | "properties" | "events";
+import type { InteractionKey } from "../types/global";
 
 interface CopyAffordanceParams {
   parsedTD: any;
-  section: Section;
+  section: InteractionKey;
   originalName: string;
   affordance: any;
 }

Original file line number	Diff line number	Diff line change
`@@ -55,4 +55,7 @@ declare global {`
`55`	`55`	`quality?: number;`
`56`	`56`	`}`
`57`	`57`	`}`
	`58`	`+`
	`59`	`+export type InteractionKey = "actions" \| "properties" \| "events";`
	`60`	`+`
`58`	`61`	`export {};`