Skip to content

Show error for external set uri #677

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

Open
roppazvan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Show error for external set uri #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87320fa
Show error for external set uri
roppazvan Mar 13, 2025
a155946
fix lint
roppazvan Mar 14, 2025
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
7 changes: 7 additions & 0 deletions .changeset/tame-bobcats-shop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@tokens-studio/graph-engine-nodes-design-tokens": patch
"@tokens-studio/graph-editor": patch
"@tokens-studio/graph-engine": patch
---

Better handling of input error for the external tokens node.
10 changes: 9 additions & 1 deletion packages/graph-editor/src/components/portPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ import {
DropdownMenu,
IconButton,
Label,
Message,
Stack,
Tooltip,
} from '@tokens-studio/ui';
import { Port as GraphPort } from '@tokens-studio/graph-engine';
import {
Port as GraphPort,
annotatedInputError,
} from '@tokens-studio/graph-engine';
import { Input } from '@tokens-studio/graph-engine';
import { observer } from 'mobx-react-lite';
import { useSelector } from 'react-redux';
Expand Down Expand Up @@ -47,6 +51,9 @@ export const PortPanel = observer(({ ports, readOnly }: IPortPanel) => {
export const Port = observer(({ port, readOnly: isReadOnly }: IField) => {
const readOnly = isReadOnly || port.isConnected;
const controlSelector = useSelector(controls);
const hasError = Boolean(port.annotations[annotatedInputError]);
const errorMessage = port.annotations[annotatedInputError]?.message;

const graph = useGraph();
const isInput = 'studio.tokens.generic.input' === port.node.factory.type;
const isDynamicInput = Boolean(port.annotations[deletable]);
Expand Down Expand Up @@ -166,6 +173,7 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IField) => {
</Stack>
</Stack>
{inner}
{hasError && <Message appearance="danger">{errorMessage}</Message>}
</Stack>
);
});
7 changes: 7 additions & 0 deletions packages/graph-engine/src/annotations/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,10 @@ export const annotatedNodeRunning = 'engine.nodeRunning';
* Unique id of the entity
*/
export const annotatedId = 'engine.id';

/**
* Indicates that the node failed to load resources
*/
export const annotatedInputError = 'engine.inputError';


33 changes: 28 additions & 5 deletions packages/nodes-design-tokens/src/nodes/externalTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {
INodeDefinition,
Node,
StringSchema
StringSchema,
annotatedInputError
} from '@tokens-studio/graph-engine';
import { TokenSchema } from '../schemas/index.js';
import { arrayOf } from '../schemas/utils.js';
Expand All @@ -22,15 +23,37 @@ export default class ExternalTokensNode extends Node {
});
}

async execute() {
override async execute() {
const { uri } = this.getAllInputs();

if (!uri) {
this.outputs.tokenSet.set([]);
return;
throw new Error('No uri specified');
}

const tokens = await this.load(uri);
this.outputs.tokenSet.set(tokens);

if (!tokens) {
// set this so we can show a red border around the node to indicate an error
this.error = new Error('Failed to load tokens');
Copy link
Contributor

@SorsOps SorsOps Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be automatically populated as there is a run handler around a node that calls the execute function. It populates the error value with whatever error is thrown

Copy link
Contributor

@SorsOps SorsOps Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just tried with the panic node and it feels like the error is being swallowed, we need to find where this is occurring as its more fundamental and would solve the problem easier. Then we can just service the error message directly in the editor without needing an annotation

if (this.inputs['uri']) {
// set this so we can show an error in the graph editor input sheet
this.inputs['uri'].annotations[annotatedInputError] = {
message:
'Failed to load tokens. Check if the uri is valid and the set was not deleted or renamed.'
};
}
} else {
if (this.outputs && this.outputs.tokenSet) {
this.outputs.tokenSet.set(tokens);
}

// clear the error if there is one
if (this.error) {
this.error = null;
if (this.inputs['uri']) {
delete this.inputs['uri'].annotations[annotatedInputError];
}
}
}
}
}
Loading