Allow code editor to be resized (elyra-ai#729)

Update the metadata code editor components so they can be resized.

Author: vabarbosa

packages/code-snippet/style/index.css

@@ -55,6 +55,11 @@
   fill: var(--jp-ui-font-color1);
 }
 
+.elyra-codeSnippetsHeader + div:first-of-type {
+  overflow-y: auto;
+  height: calc(100vh - 95px);
+}
+
 .elyra-codeSnippet-item {
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
   display: flex;
@@ -63,18 +68,18 @@
   padding: 0;
 }
 
-.elyra-codeSnippet-item .CodeMirror-wrap {
+.elyra-codeSnippet-item .elyra-expandableContainer-details-visible {
+  background-color: var(--jp-cell-editor-background);
+  resize: vertical;
+  height: 100px;
+}
+
+.elyra-codeSnippet-item .CodeMirror.cm-s-jupyter {
   background-color: inherit;
   border: none;
   font-family: var(--jp-code-font-family);
   font-size: var(--jp-code-font-size);
   line-height: var(--jp-code-line-height);
-  height: 100%;
-  width: 100%;
-  resize: vertical;
-  white-space: pre;
-  word-wrap: normal;
-  overflow-x: scroll;
 }
 
 .elyra-codeSnippet-saveButton {

packages/metadata-editor/src/MetadataEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { FormGroup, Intent } from '@blueprintjs/core';
+import { FormGroup, Intent, ResizeSensor } from '@blueprintjs/core';
 
 import { FrontendServices, IDictionary } from '@elyra/application';
 import { DropDown } from '@elyra/ui-components';
@@ -343,13 +343,19 @@ export class MetadataEditor extends ReactWidget {
       }
       return (
         <FormGroup
-          style={{ width: '100%', display: 'flex' }}
+          className={'elyra-metadataEditor-code'}
           labelInfo={required}
           label={'Code'}
           intent={this.schema[fieldName].uihints.intent}
           helperText={helperText}
         >
-          <div id={'code:' + this.id} className="elyra-form-code"></div>
+          <ResizeSensor
+            onResize={(): void => {
+              this.editor.refresh();
+            }}
+          >
+            <div id={'code:' + this.id} className="elyra-form-code va-va"></div>
+          </ResizeSensor>
         </FormGroup>
       );
     } else {
@@ -373,7 +379,6 @@ export class MetadataEditor extends ReactWidget {
     return (
       <div className={ELYRA_METADATA_EDITOR_CLASS}>
         <h3> {headerText} </h3>
-        <br />
         {this.renderTextInput(
           'Name',
           '',

packages/metadata-editor/style/index.css

@@ -3,10 +3,10 @@
 }
 
 .elyra-metadataEditor .bp3-form-group {
-  width: 40%;
-  float: left;
   margin-bottom: 12px;
   margin-right: 20px;
+  flex-basis: 40%;
+  height: 65px;
 }
 
 .bp3-select-popover {
@@ -23,40 +23,60 @@
 }
 
 .elyra-metadataEditor {
-  margin: 20px;
+  padding: 20px;
   display: flex;
   flex-wrap: wrap;
+  height: 100%;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
 }
 
 .elyra-metadataEditor h3 {
-  width: 100%;
-  margin-bottom: 10px;
+  flex-basis: 100%;
+  margin-bottom: 15px;
   color: var(--jp-ui-font-color1);
 }
 
 .elyra-metadataEditor label.bp3-label {
   color: var(--jp-ui-font-color1);
 }
 
-.elyra-metadataEditor .CodeMirror-wrap {
+.elyra-metadataEditor .elyra-form-code.jp-CodeMirrorEditor {
+  background-color: var(--jp-cell-editor-background);
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  overflow-y: auto;
+  resize: vertical;
+  min-height: 150px;
+  height: 150px;
+  padding-bottom: 10px;
+  cursor: initial;
+}
+
+.elyra-metadataEditor .CodeMirror.cm-s-jupyter {
   background-color: inherit;
-  box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
-  font-family: var(--jp-code-font-family);
-  font-size: var(--jp-code-font-size);
-  line-height: var(--jp-code-line-height);
   height: 100%;
-  width: 100%;
-  resize: vertical;
-  white-space: pre;
-  word-wrap: normal;
-  overflow: scroll;
+}
+
+.elyra-metadataEditor .bp3-form-group.elyra-metadataEditor-code {
+  height: auto;
+  flex-basis: 100%;
+  display: flex;
+}
+
+.elyra-metadataEditor-code .bp3-form-content {
+  height: 100%;
 }
 
 .bp3-dark .bp3-input {
   border: var(--jp-border-width) solid var(--jp-input-border-color);
   color: var(--jp-ui-font-color1);
 }
 
+.elyra-metadata-editor {
+  overflow-y: auto;
+}
+
 .elyra-metadata-editor.bp3-dark {
   background-color: var(--jp-border-color3);
 }