github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/8710/head
Chaim Lev-Ari 2023-03-30 12:26:35 +03:00 committed by GitHub
parent 23e6a982b9
commit e063cba81b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/docker/views/images/build/buildimage.html
View File

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

3
app/edge/components/edge-job-form/edgeJobForm.html
View File

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

4
app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
View File

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

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

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

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

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

2
app/kubernetes/components/helm/helm-templates/helm-templates.html
View File

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

2
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
View File

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

2
app/kubernetes/components/yaml-inspector/yamlInspector.html
View File

@ -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' }}"

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

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

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

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

14
app/kubernetes/views/applications/create/createApplication.html
View File

@ -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...).

20
app/kubernetes/views/deploy/deploy.html
View File

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

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

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

6
app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
View File

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

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

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

1
app/portainer/views/devices/profiles/add/addProfile.html
View File

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

1
app/portainer/views/devices/profiles/edit/editProfile.html
View File

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

10
app/portainer/views/stacks/create/createstack.html
View File

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

4
app/react/components/CodeEditor.module.css
View File

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

25
app/react/components/CodeEditor.tsx
View File

@ -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}
/>
</>
);
}