From 3928f3590ed49e8b6755336ff7c3b2df7f7341e0 Mon Sep 17 00:00:00 2001
From: Duygu Hasan <duyguhsnhsn@gmail.com>
Date: Thu, 21 Sep 2023 12:27:18 +0300
Subject: [PATCH 1/2] add custom change handler for VdkTextInput

---
 .../src/components/VdkTextInput.tsx                       | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx
index 9a76e94a17..d56050f5e8 100644
--- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx
+++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx
@@ -24,6 +24,10 @@ export interface IVdkTextInputProps {
    * Optional tooltip content.
    */
   tooltip?: string;
+  /**
+   * Custom change handler if provided
+   */
+   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 interface IVdkInputState {
@@ -147,6 +151,10 @@ export default class VDKTextInput extends Component<IVdkTextInputProps> {
    * @param event - The event object containing details about the change event.
    */
   private onInputChange = (event: any): void => {
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
+
     const nameInput = event.currentTarget as HTMLInputElement;
     let value = nameInput.value;
     if (!value) value = this.props.value;

From 1a5527c2811035bc3f5c4b9d614b98208690850a Mon Sep 17 00:00:00 2001
From: Duygu Hasan <duyguhsnhsn@gmail.com>
Date: Thu, 21 Sep 2023 12:39:45 +0300
Subject: [PATCH 2/2] use VdkTextInput on run arguments

---
 .../src/components/RunJob.tsx                 | 28 ++++---------------
 1 file changed, 6 insertions(+), 22 deletions(-)

diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/RunJob.tsx b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/RunJob.tsx
index 7b387449db..d1058b0d55 100644
--- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/RunJob.tsx
+++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/RunJob.tsx
@@ -11,14 +11,8 @@ import { RUN_FAILED_BUTTON_LABEL, RUN_JOB_BUTTON_LABEL } from '../utils';
 import { StatusButton } from './StatusButton';
 import { checkIcon } from '@jupyterlab/ui-components';
 
-interface IRunJobDialogState {
-  inputWidth: number;
-}
 
 export default class RunJobDialog extends Component<IJobPathProp> {
-  state: IRunJobDialogState = {
-    inputWidth: 0
-  };
 
   /**
    * Returns a React component for rendering a run menu.
@@ -36,29 +30,19 @@ export default class RunJobDialog extends Component<IJobPathProp> {
    * @returns React element
    */
   render(): React.ReactElement {
-      const { inputWidth } = this.state;
       return (
           <>
               <VDKTextInput
                   option={VdkOption.PATH}
                   value={this.props.jobPath}
                   label="Path to job directory:"
-                  onWidthComputed={(width) => this.setState({ inputWidth: width })}
               />
-              <div className="jp-vdk-input-wrapper">
-                  <label className="jp-vdk-label" htmlFor="arguments">
-                      Arguments:
-                  </label>
-                  <input
-                      type="text"
-                      id="arguments"
-                      className="jp-vdk-input"
-                      placeholder='{"key": "value"}'
-                      onChange={this._onArgsChange}
-                      style={{ width: `${inputWidth}px` }}
-                  />
-              </div>
-              <ul id="argumentsUl" className="hidden"></ul>
+              <VDKTextInput
+                  option={VdkOption.ARGUMENTS}
+                  value={'{"key": "value"}'}
+                  label="Arguments:"
+                  onChange={this._onArgsChange}
+              />
           </>
     );
   }