Skip to content

Add copy button for TD affordances (actions, properties, events) #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
AyushPrakash414 wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Add copy button for TD affordances (actions, properties, events) #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d2879cf
Add copy button for TD affordances (actions, properties, events)
AyushPrakash414 Jan 9, 2026
342a433
Refactor affordance copy logic and improve UX
AyushPrakash414 Jan 12, 2026
1edd605
chore: apply prettier formatting
AyushPrakash414 Feb 23, 2026
49204b6
fix: finalize copy affordance logic and tests
AyushPrakash414 Feb 23, 2026
42099cd
refactor: address review UI comments
AyushPrakash414 Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 72 additions & 24 deletions src/components/TDViewer/components/Action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
********************************************************************************/
import React, { useContext, useState } from "react";
import { Trash2 } from "react-feather";
import { Trash2, Copy } from "react-feather";
import ediTDorContext from "../../../context/ediTDorContext";
import {
buildAttributeListObject,
Expand All @@ -22,17 +22,18 @@ import InfoIconWrapper from "../../base/InfoIconWrapper";
import { getFormsTooltipContent } from "../../../utils/TooltipMapper";
import Form from "./Form";
import AddFormElement from "../base/AddFormElement";
import { copyAffordance } from "../../../utils/copyAffordance";

const alreadyRenderedKeys = ["title", "forms", "description"];

const Action: React.FC<any> = (props) => {
const context = useContext(ediTDorContext);

const [isExpanded, setIsExpanded] = useState(false);

const addFormDialog = React.useRef();
const addFormDialog = React.useRef<any>();

const handleOpenAddFormDialog = () => {
addFormDialog.current.openModal();
addFormDialog.current?.openModal();
};

if (
Expand All @@ -54,35 +55,80 @@ const Action: React.FC<any> = (props) => {
props.action,
alreadyRenderedKeys
);
const attributes = Object.keys(attributeListObject).map((x) => {
return (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
);
});

const attributes = Object.keys(attributeListObject).map((x) => (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
));

const handleDeleteAction = () => {
context.removeOneOfAKindReducer("actions", props.actionName);
};

const handleCopyAction = () => {
try {
const { updatedTD, newName } = copyAffordance({
parsedTD: context.parsedTD,
section: "actions",
originalName: props.actionName,
affordance: action,
});

context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));

setIsExpanded(true);

setTimeout(() => {
document.getElementById(`action-${newName}`)?.scrollIntoView({
behavior: "smooth",
block: "center",
});
}, 100);
} catch (e) {
console.error(e);
}
};

return (
<details
id={`action-${props.actionName}`}
className="mb-1"
open={isExpanded}
onToggle={() => setIsExpanded(!isExpanded)}
>
<summary
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${isExpanded ? "bg-gray-500" : ""}`}
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${
isExpanded ? "bg-gray-500" : ""
}`}
>
<h3 className="flex-grow px-2">{action.title ?? props.actionName}</h3>

{isExpanded && (
<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
onClick={handleDeleteAction}
>
<Trash2 size={16} color="white" />
</button>
<>
<button
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();
e.stopPropagation();
handleCopyAction();
}}
>
<Copy size={16} color="white" />
</button>
<button
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();
e.stopPropagation();
handleDeleteAction();
}}
>
<Trash2 size={16} color="white" />
</button>
</>
)}
</summary>

Expand All @@ -92,6 +138,7 @@ const Action: React.FC<any> = (props) => {
{action.description}
</div>
)}

<ul className="list-disc pl-6 text-base text-gray-300">{attributes}</ul>

<div className="flex items-center justify-start pb-2 pt-2">
Expand All @@ -105,23 +152,24 @@ const Action: React.FC<any> = (props) => {
</div>

<AddFormElement onClick={handleOpenAddFormDialog} />

<AddFormDialog
type={"action"}
type="action"
interaction={action}
interactionName={props.actionName}
ref={addFormDialog}
/>

{forms.map((form, i) => (
<Form
key={`${i}-${form.href}`}
key={`${i}-${form?.href ?? "nohref"}`}
form={form}
propName={props.actionName}
interactionType={"action"}
></Form>
interactionType="action"
/>
))}
</div>
</details>
);
};

export default Action;
export default Action;
124 changes: 78 additions & 46 deletions src/components/TDViewer/components/Event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
*
* SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
********************************************************************************/
import React, { useContext, useState } from "react";
import { Trash2 } from "react-feather";
import React, { useContext, useState, useRef } from "react";
import { Trash2, Copy } from "react-feather";
import ediTDorContext from "../../../context/ediTDorContext";
import {
buildAttributeListObject,
Expand All @@ -22,66 +22,95 @@ import InfoIconWrapper from "../../base/InfoIconWrapper";
import { getFormsTooltipContent } from "../../../utils/TooltipMapper";
import Form from "./Form";
import AddFormElement from "../base/AddFormElement";
import { copyAffordance } from "../../../utils/copyAffordance";

const alreadyRenderedKeys = ["title", "forms", "description"];

const Event: React.FC<any> = (props) => {
const context = useContext(ediTDorContext);

const [isExpanded, setIsExpanded] = useState(false);

const addFormDialog = React.useRef();
const addFormDialog = useRef<{ openModal: () => void }>(null);

const handleOpenAddFormDialog = () => {
addFormDialog.current.openModal();
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) => {
return (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
);
});

const handleDeleteEventClicked = () => {
context.removeOneOfAKindReducer("events", props.eventName);
};

const handleCopyEvent = () => {
try {
const { updatedTD, newName } = copyAffordance({
parsedTD: context.parsedTD,
section: "events",
originalName: props.eventName,
affordance: event,
});

context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));
setIsExpanded(true);

setTimeout(() => {
document
.getElementById(`event-${newName}`)
?.scrollIntoView({ behavior: "smooth", block: "center" });
}, 100);
} catch (e) {
console.error(e);
}
};

return (
<details
id={`event-${props.eventName}`}
className="mb-1"
open={isExpanded}
onToggle={() => setIsExpanded(!isExpanded)}
>
<summary
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${isExpanded ? "bg-gray-500" : ""}`}
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${
isExpanded ? "bg-gray-500" : ""
}`}
>
<div className="flex-grow px-2">{event.title ?? props.eventName}</div>

{isExpanded && (
<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
onClick={handleDeleteEventClicked}
>
<Trash2 size={16} color="white" />
</button>
<>
<button
className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400"
title="Copy event"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopyEvent();
}}
>
<Copy size={16} color="white" />
</button>

<button
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();
e.stopPropagation();
handleDeleteEventClicked();
}}
>
<Trash2 size={16} color="white" />
</button>
</>
)}
</summary>

Expand All @@ -91,32 +120,35 @@ const Event: React.FC<any> = (props) => {
{event.description}
</div>
)}
<ul className="list-disc pl-6 text-base text-gray-300">{attributes}</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>

<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="events">
<h4 className="text-lg font-bold text-white">Forms</h4>
</InfoIconWrapper>

<AddFormElement onClick={handleOpenAddFormDialog} />

<AddFormDialog
type={"event"}
type="event"
interaction={event}
interactionName={props.eventName}
ref={addFormDialog}
/>

{forms.map((form, i) => (
<Form
key={`${i}-${form.href}`}
form={form}
propName={props.eventName}
interactionType={"event"}
></Form>
interactionType="event"
/>
))}
</div>
</details>
Expand Down
Loading