From d64e7eacfc304c84a8035c407e7804e035e90ecb Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 30 Mar 2023 12:26:32 +0300
Subject: [PATCH] fix(ui/code-editor): stretch code editor content full height
 [EE-5202] (#8673)

---
 app/docker/views/images/build/buildimage.html |  1 +
 .../components/edge-job-form/edgeJobForm.html |  3 ++-
 .../editEdgeStackForm.html                    |  4 +--
 .../docker-compose-form.html                  |  4 +--
 .../kube-manifest-form.html                   |  2 +-
 .../helm/helm-templates/helm-templates.html   |  2 +-
 .../kubernetesConfigurationData.html          |  2 +-
 .../yaml-inspector/yamlInspector.html         |  2 +-
 .../kube-create-custom-template-view.html     |  2 +-
 .../kube-edit-custom-template-view.html       |  2 +-
 .../create/createApplication.html             | 14 +++++------
 app/kubernetes/views/deploy/deploy.html       | 20 +++++++--------
 .../createCustomTemplateView.html             |  6 ++---
 .../customTemplatesView.html                  |  6 ++---
 .../editCustomTemplateView.html               |  6 ++---
 .../devices/profiles/add/addProfile.html      |  1 -
 .../devices/profiles/edit/editProfile.html    |  1 -
 .../views/stacks/create/createstack.html      | 10 +++-----
 app/react/components/CodeEditor.module.css    |  4 +++
 app/react/components/CodeEditor.tsx           | 25 +++++++++++--------
 20 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/app/docker/views/images/build/buildimage.html b/app/docker/views/images/build/buildimage.html
index 5a2c3bddc..36c006347 100644
--- a/app/docker/views/images/build/buildimage.html
+++ b/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">
diff --git a/app/edge/components/edge-job-form/edgeJobForm.html b/app/edge/components/edge-job-form/edgeJobForm.html
index a86357018..44d86681a 100644
--- a/app/edge/components/edge-job-form/edgeJobForm.html
+++ b/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>
diff --git a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html b/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
index 436f393c7..be3d8482e 100644
--- a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
+++ b/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>
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html b/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html
index 189b75a56..93de92133 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html
+++ b/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>
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.html b/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.html
index 4da3d6db9..d8ab1fe3d 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/kube-manifest-form/kube-manifest-form.html
+++ b/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>
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.html b/app/kubernetes/components/helm/helm-templates/helm-templates.html
index 14a37244b..6a655922a 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.html
+++ b/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>
diff --git a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html b/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
index 12d6253f6..bdc100700 100644
--- a/app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
+++ b/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>
diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index e33114ace..4ef25e5ec 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/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' }}"
diff --git a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html b/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
index 823887f80..91dcd8299 100644
--- a/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html
+++ b/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>
diff --git a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html b/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
index ee60a6448..1c55d44ee 100644
--- a/app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.html
+++ b/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>
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 79179ac3c..bb4d86988 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/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
-                        >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 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>
+                        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
+                        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...).
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index cfa13c8f6..dd44f2832 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/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">
-                          <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...).
-                        </p>
-                        <p>
-                          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>.
-                        </p>
-                      </span>
+                      <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...).
+                      </p>
+                      <p>
+                        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>.
+                      </p>
                     </editor-description>
                   </web-editor-form>
                 </div>
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
index d4c6eadbc..a7f519f0c 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
+++ b/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 -->
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index e8b91e575..f31271dfe 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/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 -->
diff --git a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html b/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
index c486bbc1b..25e814d0e 100644
--- a/app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateView.html
+++ b/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 -->
diff --git a/app/portainer/views/devices/profiles/add/addProfile.html b/app/portainer/views/devices/profiles/add/addProfile.html
index e625c60ab..a84f0be8b 100644
--- a/app/portainer/views/devices/profiles/add/addProfile.html
+++ b/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>
 
diff --git a/app/portainer/views/devices/profiles/edit/editProfile.html b/app/portainer/views/devices/profiles/edit/editProfile.html
index 139bc8558..976827b60 100644
--- a/app/portainer/views/devices/profiles/edit/editProfile.html
+++ b/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>
 
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index 4cbb8f19e..fb3dfb9c0 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/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>
-              <div class="col-sm-12" ng-if="state.editorYamlValidationError">
-                <span class="text-danger small">{{ state.editorYamlValidationError }}</span>
-              </div>
+              </p>
+              <p ng-if="state.editorYamlValidationError" class="text-danger">{{ state.editorYamlValidationError }}</p>
             </editor-description>
           </web-editor-form>
 
diff --git a/app/react/components/CodeEditor.module.css b/app/react/components/CodeEditor.module.css
index 3cb2df907..e797160c7 100644
--- a/app/react/components/CodeEditor.module.css
+++ b/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;
+}
diff --git a/app/react/components/CodeEditor.tsx b/app/react/components/CodeEditor.tsx
index 8d77845aa..7e8907c44 100644
--- a/app/react/components/CodeEditor.tsx
+++ b/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}
-      theme={theme}
-      value={value}
-      onChange={onChange}
-      readOnly={readonly}
-      placeholder={placeholder}
-      id={id}
-      extensions={extensions}
-      height={height}
-    />
+    <>
+      {!!placeholder && <TextTip color="blue">{placeholder}</TextTip>}
+      <CodeMirror
+        className={styles.root}
+        theme={theme}
+        value={value}
+        onChange={onChange}
+        readOnly={readonly}
+        id={id}
+        extensions={extensions}
+        height={height}
+      />
+    </>
   );
 }