vdk-jupyter: small fixtures on the ui (#2161)

With the current UI we had some problems in term of accessibility and
design:
- the placeholder text in vdk inputs for job path was too much and could
not be read
- the create job dialog was not aligned well (caused be typo in
classname)
See: 
<img width="259" alt="Screenshot 2023-05-30 at 18 36 05"
src="https://github.com/vmware/versatile-data-kit/assets/87015481/71a7a3ad-5db4-4eb6-8cf2-24f37696c03e">
<img width="623" alt="Screenshot 2023-05-30 at 18 36 22"
src="https://github.com/vmware/versatile-data-kit/assets/87015481/207ce897-f398-4bfd-a366-74eb346cd7b4">

The changes introduced: 
- the job path input placeholder shows only the parent directory: 
<img width="282" alt="Screenshot 2023-05-30 at 18 37 14"
src="https://github.com/vmware/versatile-data-kit/assets/87015481/73410cc4-dc33-44ed-95b3-a16751d44ebd">

- and create job items are aligned better
<img width="313" alt="Screenshot 2023-05-30 at 18 38 06"
src="https://github.com/vmware/versatile-data-kit/assets/87015481/5db09b92-7b28-47ea-90a1-e026a962120f">

Signed-off-by: Duygu Hasan [[email protected]](mailto:[email protected])

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/VdkTextInput.tsx

@@ -17,6 +17,17 @@ export interface IVdkTextInputProps {
   label: string;
 }
 
+
+/**
+   * This function is used to be sure that placeholder text is not overflowing in case of long path
+   * if the string that is given is not path it will return the same string
+   * if it is a path it will return the last directory
+   */
+const  getLastPartOfPath = (path: string): string => {
+  const pathParts = path.split(/(?=[/\\])/); // Lookahead assertion to keep delimiter
+  return pathParts[pathParts.length - 1];
+}
+
 export default class VDKTextInput extends Component<IVdkTextInputProps> {
   /**
    * Returns a React component for rendering a div with input and value  for VDK Option.
@@ -43,7 +54,7 @@ export default class VDKTextInput extends Component<IVdkTextInputProps> {
             type="text"
             id={this.props.option}
             className="jp-vdk-input"
-            placeholder={this.props.value}
+            placeholder={getLastPartOfPath(this.props.value)}
             onChange={this.onInputChange}
           />
         </div>

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/vdkDialogs.css

@@ -13,14 +13,16 @@
   display: none;
 }
 
-.jp-vdk-checkbox-wrapper {
+.jp-vdk-checkbox-wrappers {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .jp-vdk-checkbox {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 
 #enable {