vdk-jupyter: fix arguments input size (#2685)

What: Refined RunJobDialog and VDKTextInput components. Ensured the arguments input uses VDKTextInput and streamlined RunJobDialog state management. ![Screenshot 2023-09-21 at 12 39 08](https://github.com/vmware/versatile-data-kit/assets/87015481/b1c08f1a-32aa-4e90-bd82-18cb448197c5) Why: The old approach had sizing inconsistencies between the arguments and path inputs. Converting arguments input to VDKTextInput clears its association with VDK data, enhancing visibility and cohesion. Additionally, removing the unnecessary inputWidth state from RunJobDialog makes the code leaner and more manageable. Signed-off-by: Duygu Hasan [[email protected]](mailto:[email protected])
vmware · Sep 21, 2023 · 6a2a3f7 · 6a2a3f7
1 parent 0f3adc0
commit 6a2a3f7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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}
+              />
           </>
     );
   }

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
@@ -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;