From 56bc60e834dfc3339df32debd14ff35b92bbbcab Mon Sep 17 00:00:00 2001 From: Kristen Newbury Date: Thu, 9 Oct 2025 11:50:04 -0400 Subject: [PATCH 1/9] Add test cases ui5/webcomponents-react explore --- .../ui5/src/Diagnostics/InvestigateReact.ql | 15 ++++++++ .../source-react/controlledcomponent.tsx | 38 +++++++++++++++++++ .../models/source-react/propscomponents.tsx | 20 ++++++++++ .../models/source-react/sourceTest.expected | 0 .../test/models/source-react/sourceTest.qlref | 1 + .../source-react/uncontrolledcomponent.tsx | 24 ++++++++++++ 6 files changed, 98 insertions(+) create mode 100644 javascript/frameworks/ui5/src/Diagnostics/InvestigateReact.ql create mode 100644 javascript/frameworks/ui5/test/models/source-react/controlledcomponent.tsx create mode 100644 javascript/frameworks/ui5/test/models/source-react/propscomponents.tsx create mode 100644 javascript/frameworks/ui5/test/models/source-react/sourceTest.expected create mode 100644 javascript/frameworks/ui5/test/models/source-react/sourceTest.qlref create mode 100644 javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx diff --git a/javascript/frameworks/ui5/src/Diagnostics/InvestigateReact.ql b/javascript/frameworks/ui5/src/Diagnostics/InvestigateReact.ql new file mode 100644 index 000000000..b586e0e22 --- /dev/null +++ b/javascript/frameworks/ui5/src/Diagnostics/InvestigateReact.ql @@ -0,0 +1,15 @@ +/** + * @name List properties of react modelling + * @description List properties of react modelling + * @ kind problem + * @problem.severity info + * @precision high + * @id js/ui5-investigate-react + * @tags diagnostics + */ + +import javascript +import semmle.javascript.frameworks.React + +from ViewComponentInput v +select v, v.getSourceType() diff --git a/javascript/frameworks/ui5/test/models/source-react/controlledcomponent.tsx b/javascript/frameworks/ui5/test/models/source-react/controlledcomponent.tsx new file mode 100644 index 000000000..1499e8357 --- /dev/null +++ b/javascript/frameworks/ui5/test/models/source-react/controlledcomponent.tsx @@ -0,0 +1,38 @@ +import { Input, Button } from '@ui5/webcomponents-react'; +import { useRef, useState } from 'react'; +import type { InputDomRef } from '@ui5/webcomponents-react'; + +function ControlledComponent( { props }) { + const inputRef1 = useRef < InputDomRef > (null); + const [inputRef2, setInputValue] = useState(''); + + const handleButtonPress1 = () => { + // Access the input value via the hook + console.log('Current input value:', inputRef1.current.value); // SOURCE + }; + + const handleButtonPress2 = event => { + setInputValue(event.target.value); // SOURCE + console.log('Current input value:', inputRef2); // SOURCE - only because of setInputValue + }; + + return ( +
+ + + + +
+ ); +} + diff --git a/javascript/frameworks/ui5/test/models/source-react/propscomponents.tsx b/javascript/frameworks/ui5/test/models/source-react/propscomponents.tsx new file mode 100644 index 000000000..e171047f3 --- /dev/null +++ b/javascript/frameworks/ui5/test/models/source-react/propscomponents.tsx @@ -0,0 +1,20 @@ +import { Input } from '@ui5/webcomponents-react'; + +// normal react component props +function ChildComponent({ value }) { // SOURCE + + console.log('Input finalized with value:', value); + + return ( +
+ +
+ ); +} + +function ParentComponent() { + const data = "Hello from Parent"; + return ; +} \ No newline at end of file diff --git a/javascript/frameworks/ui5/test/models/source-react/sourceTest.expected b/javascript/frameworks/ui5/test/models/source-react/sourceTest.expected new file mode 100644 index 000000000..e69de29bb diff --git a/javascript/frameworks/ui5/test/models/source-react/sourceTest.qlref b/javascript/frameworks/ui5/test/models/source-react/sourceTest.qlref new file mode 100644 index 000000000..cdf3e859a --- /dev/null +++ b/javascript/frameworks/ui5/test/models/source-react/sourceTest.qlref @@ -0,0 +1 @@ +Diagnostics/InvestigateReact.ql \ No newline at end of file diff --git a/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx b/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx new file mode 100644 index 000000000..199b659b0 --- /dev/null +++ b/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx @@ -0,0 +1,24 @@ +import { Input, Button } from '@ui5/webcomponents-react'; +import type { InputDomRef } from '@ui5/webcomponents-react'; +import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base'; + +function UncontrolledComponent({ props }) { + + //direct event value access, no hook/react specific function + const handleButtonPress = (event: Ui5CustomEvent) => { + const finalValue = event.target.value; // SOURCE + console.log('Input finalized with value:', finalValue); + }; + + return ( +
+ + +
+ ); +} + From 4c2351f746ec5f542df4a0275cef6fc15c44f291 Mon Sep 17 00:00:00 2001 From: Kristen Newbury Date: Mon, 20 Oct 2025 15:19:22 -0400 Subject: [PATCH 2/9] Add event target value source to test cases --- .../source-react/functionalcomponentsetstate.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 javascript/frameworks/ui5/test/models/source-react/functionalcomponentsetstate.tsx diff --git a/javascript/frameworks/ui5/test/models/source-react/functionalcomponentsetstate.tsx b/javascript/frameworks/ui5/test/models/source-react/functionalcomponentsetstate.tsx new file mode 100644 index 000000000..f7388a7ae --- /dev/null +++ b/javascript/frameworks/ui5/test/models/source-react/functionalcomponentsetstate.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; + +function MyFunctionalComponent({ props }) { + const [count, setState] = useState({ count: 0 }); + + const handleClick = event => { + setState({ count: event.target.value + 1 }); // Directly update the state + console.log('Current input value:', count); + }; + + return ( +
+ +
+ ); +} \ No newline at end of file From 7a51865d6db9437934d0fd7bb6dc88a40a9f2296 Mon Sep 17 00:00:00 2001 From: Kristen Newbury Date: Mon, 20 Oct 2025 18:37:45 -0400 Subject: [PATCH 3/9] Fix test case to include previously missing handler --- .../ui5/test/models/source-react/uncontrolledcomponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx b/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx index 199b659b0..bfdd27917 100644 --- a/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx +++ b/javascript/frameworks/ui5/test/models/source-react/uncontrolledcomponent.tsx @@ -5,7 +5,7 @@ import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base'; function UncontrolledComponent({ props }) { //direct event value access, no hook/react specific function - const handleButtonPress = (event: Ui5CustomEvent) => { + const handleClick = (event: Ui5CustomEvent) => { const finalValue = event.target.value; // SOURCE console.log('Input finalized with value:', finalValue); }; @@ -14,6 +14,7 @@ function UncontrolledComponent({ props }) {