fix(ui/code-editor): stretch code editor content full height [EE-5202] (#8672)

app/docker/views/images/build/buildimage.html

@@ -73,6 +73,7 @@
               <box-selector options="options" slim="true" value="state.BuildType" on-change="(onChangeBuildType)"></box-selector>
 
               <!-- web-editor -->
+              <!-- TODO use web-editor-form component -->
               <div ng-show="state.BuildType === 'editor'">
                 <div class="col-sm-12 form-section-title"> Web editor </div>
                 <div class="form-group">

app/edge/components/edge-job-form/edgeJobForm.html

@@ -135,13 +135,14 @@
   <!-- !execution-method -->
 
   <!-- web-editor -->
+  <!-- TODO use web-editor-form component -->
   <div ng-show="$ctrl.formValues.method === 'editor'">
     <div class="col-sm-12 form-section-title"> Web editor </div>
     <div class="form-group">
       <div class="col-sm-12">
         <code-editor
           identifier="execute-edge-job-editor"
-          placeholder="# Define or paste the content of your script file here"
+          placeholder="Define or paste the content of your script file here"
           on-change="($ctrl.editorUpdate)"
           value="$ctrl.model.FileContent"
         ></code-editor>

app/edge/components/edit-edge-stack-form/editEdgeStackForm.html

@@ -34,7 +34,7 @@
     value="$ctrl.model.StackFileContent"
     yml="true"
     identifier="compose-editor"
-    placeholder="# Define or paste the content of your docker compose file here"
+    placeholder="Define or paste the content of your docker compose file here"
     on-change="($ctrl.onChangeComposeConfig)"
     read-only="$ctrl.hasKubeEndpoint()"
   >
@@ -63,7 +63,7 @@
       value="$ctrl.model.StackFileContent"
       yml="true"
       identifier="kube-manifest-editor"
-      placeholder="# Define or paste the content of your manifest here"
+      placeholder="Define or paste the content of your manifest here"
       on-change="($ctrl.onChangeKubeManifest)"
     >
       <editor-description>

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html

@@ -8,7 +8,7 @@
   on-change="($ctrl.onChangeFileContent)"
   ng-required="true"
   yml="true"
-  placeholder="# Define or paste the content of your docker compose file here"
+  placeholder="Define or paste the content of your docker compose file here"
 >
   <editor-description>
     You can get more information about Compose file format in the
@@ -55,7 +55,7 @@
     value="$ctrl.formValues.StackFileContent"
     on-change="($ctrl.onChangeFileContent)"
     yml="true"
-    placeholder="# Define or paste the content of your docker compose file here"
+    placeholder="Define or paste the content of your docker compose file here"
     ng-required="true"
   >
   </web-editor-form>

app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.html

@@ -18,7 +18,7 @@
   value="$ctrl.formValues.StackFileContent"
   on-change="($ctrl.onChangeFileContent)"
   yml="true"
-  placeholder="# Define or paste the content of your manifest here"
+  placeholder="Define or paste the content of your manifest here"
   ng-required="true"
 >
   <editor-description>

app/kubernetes/components/helm/helm-templates/helm-templates.html

@@ -124,7 +124,7 @@
                     value="$ctrl.state.values"
                     on-change="($ctrl.editorUpdate)"
                     yml="true"
-                    placeholder="# Define or paste the content of your values yaml file here"
+                    placeholder="Define or paste the content of your values yaml file here"
                   >
                     <editor-description class="vertical-center">
                       <pr-icon icon="'info'" mode="'primary'"></pr-icon>

app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html

@@ -159,7 +159,7 @@
       value="$ctrl.formValues.DataYaml"
       on-change="($ctrl.editorUpdate)"
       yml="true"
-      placeholder="# Define or paste key-value pairs, one pair per line"
+      placeholder="Define or paste key-value pairs, one pair per line"
     >
     </web-editor-form>
   </div>

app/kubernetes/components/yaml-inspector/yamlInspector.html

@@ -3,7 +3,7 @@
     identifier="application-details-yaml"
     value="$ctrl.data"
     yml="true"
-    placeholder="# Define or paste the content of your manifest here"
+    placeholder="Define or paste the content of your manifest here"
     read-only="true"
     hide-title="true"
     height="{{ $ctrl.expanded ? '800px' : '500px' }}"

app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

@@ -19,7 +19,7 @@
               on-change="($ctrl.onChangeFileContent)"
               ng-required="true"
               yml="true"
-              placeholder="# Define or paste the content of your manifest file here"
+              placeholder="Define or paste the content of your manifest file here"
             >
               <editor-description>
                 <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html

@@ -13,7 +13,7 @@
             on-change="($ctrl.onChangeFileContent)"
             ng-required="true"
             yml="true"
-            placeholder="# Define or paste the content of your manifest file here"
+            placeholder="Define or paste the content of your manifest file here"
           >
             <editor-description>
               <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>

app/kubernetes/views/applications/create/createApplication.html

@@ -114,11 +114,11 @@
                 value="ctrl.stackFileContent"
                 yml="true"
                 identifier="kubernetes-deploy-editor"
-                placeholder="# Define or paste the content of your manifest file here"
+                placeholder="Define or paste the content of your manifest file here"
                 on-change="(ctrl.onChangeFileContent)"
               >
                 <editor-description>
-                  <div class="text-muted small flex gap-1" ng-show="ctrl.stack.IsComposeFormat">
+                  <div class="flex gap-1" ng-show="ctrl.stack.IsComposeFormat">
                     <pr-icon icon="'alert-circle'" mode="'warning'" class-name="'!mt-1'"></pr-icon>
                     <div>
                       <p>
@@ -127,17 +127,17 @@
                         conversion tool which enables this. The reason for this is because Kompose now poses a security risk, since it has a number of Common Vulnerabilities and
                         Exposures (CVEs).
                       </p>
-                      <p
+                      <p>
-                        >Unfortunately, while the Kompose project has a maintainer and is part of the CNCF, it is not being actively maintained. Releases are very infrequent and
+                        Unfortunately, while the Kompose project has a maintainer and is part of the CNCF, it is not being actively maintained. Releases are very infrequent and new
-                        new pull requests to the project (including ones we've submitted) are taking months to be merged, with new CVEs arising in the meantime.</p
+                        pull requests to the project (including ones we've submitted) are taking months to be merged, with new CVEs arising in the meantime.
-                      >
+                      </p>
                       <p>
                         We advise installing your own instance of Kompose in a sandbox environment, performing conversions of your Docker Compose files to Kubernetes manifests and
                         using those manifests to set up applications.
                       </p>
                     </div>
                   </div>
-                  <span class="text-muted small" ng-show="!ctrl.stack.IsComposeFormat">
+                  <span ng-show="!ctrl.stack.IsComposeFormat">
                     <p class="vertical-center">
                       <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                       This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).

app/kubernetes/views/deploy/deploy.html

@@ -114,19 +114,17 @@
                     on-change="(ctrl.onChangeFileContent)"
                     ng-required="true"
                     yml="true"
-                    placeholder="# Define or paste the content of your manifest file here"
+                    placeholder="Define or paste the content of your manifest file here"
                   >
                     <editor-description>
-                      <span class="col-sm-12 text-muted small">
+                      <p class="vertical-center">
-                        <p class="vertical-center">
+                        <pr-icon icon="'info'" mode="'primary'"></pr-icon>
-                          <pr-icon icon="'info'" mode="'primary'"></pr-icon>
+                        This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
-                          This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
+                      </p>
-                        </p>
+                      <p>
-                        <p>
+                        You can get more information about Kubernetes file format in the
-                          You can get more information about Kubernetes file format in the
+                        <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
-                          <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
+                      </p>
-                        </p>
-                      </span>
                     </editor-description>
                   </web-editor-form>
                 </div>

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -34,14 +34,14 @@
             on-change="($ctrl.editorUpdate)"
             ng-required="true"
             yml="true"
-            placeholder="# Define or paste the content of your docker compose file here"
+            placeholder="Define or paste the content of your docker compose file here"
           >
             <editor-description>
-              <span class="col-sm-12 text-muted">
+              <p>
                 You can get more information about Compose file format in the
                 <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
                 .
-              </span>
+              </p>
             </editor-description>
           </web-editor-form>
           <!-- !web-editor -->

app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html

@@ -36,14 +36,14 @@
         on-change="($ctrl.editorUpdate)"
         ng-required="true"
         yml="true"
-        placeholder="# Define or paste the content of your docker compose file here"
+        placeholder="Define or paste the content of your docker compose file here"
       >
         <editor-description>
-          <span class="col-sm-12 text-muted">
+          <p>
             You can get more information about Compose file format in the
             <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
             .
-          </span>
+          </p>
         </editor-description>
       </web-editor-form>
       <!-- !web-editor -->

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html

@@ -14,14 +14,14 @@
             on-change="($ctrl.editorUpdate)"
             ng-required="true"
             yml="true"
-            placeholder="# Define or paste the content of your docker compose file here"
+            placeholder="Define or paste the content of your docker compose file here"
           >
             <editor-description>
-              <span class="col-sm-12 text-muted">
+              <p>
                 You can get more information about Compose file format in the
                 <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
                 .
-              </span>
+              </p>
             </editor-description>
           </web-editor-form>
           <!-- !web-editor -->

app/portainer/views/devices/profiles/add/addProfile.html

@@ -26,7 +26,6 @@
             value="formValues.profileFileContent"
             on-change="(onChangeFileContent)"
             ng-required="true"
-            placeholder="#"
           >
           </web-editor-form>
 

app/portainer/views/devices/profiles/edit/editProfile.html

@@ -27,7 +27,6 @@
             value="formValues.profileFileContent"
             on-change="(onChangeFileContent)"
             ng-required="true"
-            placeholder="#"
           >
           </web-editor-form>
 

app/portainer/views/stacks/create/createstack.html

@@ -113,15 +113,13 @@
             on-change="(onChangeFileContent)"
             ng-required="true"
             yml="true"
-            placeholder="# Define or paste the content of your docker compose file here"
+            placeholder="Define or paste the content of your docker compose file here"
           >
             <editor-description>
-              <span class="col-sm-12 text-muted small">
+              <p>
                 You can get more information about Compose file format in the <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
-              </span>
+              </p>
-              <div class="col-sm-12" ng-if="state.editorYamlValidationError">
+              <p ng-if="state.editorYamlValidationError" class="text-danger">{{ state.editorYamlValidationError }}</p>
-                <span class="text-danger small">{{ state.editorYamlValidationError }}</span>
-              </div>
             </editor-description>
           </web-editor-form>
 

app/react/components/CodeEditor.module.css

@@ -70,3 +70,7 @@
   background-color: var(--bg-inputbox);
   color: var(--text-form-control-color);
 }
+
+.root :global(.cm-content[contenteditable='true']) {
+  @apply h-full;
+}

app/react/components/CodeEditor.tsx

@@ -6,6 +6,7 @@ import { createTheme } from '@uiw/codemirror-themes';
 import { tags as highlightTags } from '@lezer/highlight';
 
 import styles from './CodeEditor.module.css';
+import { TextTip } from './Tip/TextTip';
 
 interface Props {
   id: string;
@@ -53,16 +54,18 @@ export function CodeEditor({
   const extensions = useMemo(() => (isYaml ? [yamlLanguage] : []), [isYaml]);
 
   return (
-    <CodeMirror
+    <>
-      className={styles.root}
+      {!!placeholder && <TextTip color="blue">{placeholder}</TextTip>}
-      theme={theme}
+      <CodeMirror
-      value={value}
+        className={styles.root}
-      onChange={onChange}
+        theme={theme}
-      readOnly={readonly}
+        value={value}
-      placeholder={placeholder}
+        onChange={onChange}
-      id={id}
+        readOnly={readonly}
-      extensions={extensions}
+        id={id}
-      height={height}
+        extensions={extensions}
-    />
+        height={height}
+      />
+    </>
   );
 }