fix(web-editor): add search hint text [EE-3967] (#7496)

app/constants.js

@@ -31,7 +31,7 @@ export const KUBERNETES_SYSTEM_NAMESPACES = ['kube-system', 'kube-public', 'kube
 export const PORTAINER_FADEOUT = 1500;
 export const STACK_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
 export const TEMPLATE_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
-export const BROWSER_OS_PLATFORM = navigator.userAgent.indexOf('Windows NT') > -1 ? 'win' : 'lin';
+export const BROWSER_OS_PLATFORM = navigator.userAgent.indexOf('Windows') > -1 ? 'win' : navigator.userAgent.indexOf('Mac') > -1 ? 'mac' : 'lin';
 export const NEW_LINE_BREAKER = BROWSER_OS_PLATFORM === 'win' ? '\r\n' : '\n';
 
 // don't declare new constants, either:
@@ -66,4 +66,5 @@ angular
   .constant('PAGINATION_MAX_ITEMS', PAGINATION_MAX_ITEMS)
   .constant('APPLICATION_CACHE_VALIDITY', APPLICATION_CACHE_VALIDITY)
   .constant('CONSOLE_COMMANDS_LABEL_PREFIX', CONSOLE_COMMANDS_LABEL_PREFIX)
-  .constant('PREDEFINED_NETWORKS', PREDEFINED_NETWORKS);
+  .constant('PREDEFINED_NETWORKS', PREDEFINED_NETWORKS)
+  .constant('BROWSER_OS_PLATFORM', BROWSER_OS_PLATFORM);

app/portainer/components/form-components/web-editor-form/web-editor-form.controller.js

@@ -1,7 +1,8 @@
 class WebEditorFormController {
   /* @ngInject */
-  constructor() {
+  constructor(BROWSER_OS_PLATFORM) {
     this.editorUpdate = this.editorUpdate.bind(this);
+    this.BROWSER_OS_PLATFORM = BROWSER_OS_PLATFORM;
   }
 
   editorUpdate(cm) {

app/portainer/components/form-components/web-editor-form/web-editor-form.html

@@ -1,7 +1,41 @@
 <ng-form name="$ctrl.webEditorForm">
-  <div class="web-editor overflow-x-hidden">
+  <div class="web-editor overflow-auto">
-    <div ng-if="!$ctrl.hideTitle" class="col-sm-12 form-section-title">Web editor</div>
+    <div ng-if="!$ctrl.hideTitle" class="col-sm-12 form-section-title pr-0"
-    <div class="trancluded-item form-group col-sm-12 col-lg-12 text-muted small" ng-transclude="description"></div>
+      >Web editor
+      <div class="text-muted small vertical-center float-right mt-0">
+        <span ng-if="$ctrl.BROWSER_OS_PLATFORM !== 'mac'" class="vertical-center">Ctrl+F for search</span>
+        <span ng-if="$ctrl.BROWSER_OS_PLATFORM === 'mac'" class="vertical-center">Cmd+F for search</span>
+        <portainer-tooltip
+          ng-if="$ctrl.BROWSER_OS_PLATFORM !== 'mac'"
+          message="'Ctrl+F - Start searching <br />
+              Ctrl+G - Find next <br />
+              Ctrl+Shift+G - Find previous <br />
+              Ctrl+Shift+F - Replace <br />
+              Ctrl+Shift+R - Replace all <br />
+              Alt+G - Jump to line <br />
+              Alt+F - Persistent search: <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter - Find next <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift+Enter - Find previous <br />'"
+          class-name="'[&>span]:!text-left'"
+        >
+        </portainer-tooltip>
+        <portainer-tooltip
+          ng-if="$ctrl.BROWSER_OS_PLATFORM === 'mac'"
+          message="'Cmd+F - Start searching <br />
+              Cmd+G - Find next <br />
+              Cmd+Shift+G - Find previous <br />
+              Cmd+Option+F - Replace <br />
+              Cmd+Option+R - Replace all <br />
+              Option+G - Jump to line <br />
+              Option+F - Persistent search: <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enter - Find next <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift+Enter - Find previous <br />'"
+          class-name="'[&>span]:!text-left'"
+        >
+        </portainer-tooltip>
+      </div>
+    </div>
+    <div class="trancluded-item form-group col-sm-9 col-lg-10 text-muted small" ng-transclude="description"></div>
     <div class="form-group">
       <div class="col-sm-12 col-lg-12">
         <code-editor

app/portainer/react/components/index.ts

@@ -29,7 +29,7 @@ export const componentsModule = angular
   )
   .component(
     'portainerTooltip',
-    react2angular(Tooltip, ['message', 'position'])
+    react2angular(Tooltip, ['message', 'position', 'className'])
   )
   .component('fileUploadField', fileUploadField)
   .component('porSwitchField', switchField)

app/portainer/services/codeMirror.js

@@ -8,7 +8,7 @@ import 'codemirror/addon/search/search.js';
 import 'codemirror/addon/search/searchcursor.js';
 import 'codemirror/addon/search/jump-to-line.js';
 import 'codemirror/addon/dialog/dialog.js';
-import 'codemirror/addon/dialog/dialog.css';
+import './codeMirrorDialog.css';
 
 angular.module('portainer.app').factory('CodeMirrorService', function CodeMirrorService() {
   'use strict';

app/portainer/services/codeMirrorDialog.css

@@ -0,0 +1,49 @@
+/* styles from https://github.com/codemirror/codemirror5/blob/master/addon/dialog/dialog.css with the button styles updated */
+
+.CodeMirror-dialog {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: inherit;
+  z-index: 15;
+  padding: 0.1em 0.8em;
+  overflow: hidden;
+  color: inherit;
+}
+
+.CodeMirror-dialog-top {
+  border-bottom: 1px solid #eee;
+  top: 0;
+}
+
+.CodeMirror-dialog-bottom {
+  border-top: 1px solid #eee;
+  bottom: 0;
+}
+
+.CodeMirror-dialog input {
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 20em;
+  color: inherit;
+  font-family: monospace;
+}
+
+.CodeMirror-dialog button {
+  /* apply styles from btn-default */
+  @apply bg-white border-gray-5 text-gray-9;
+  @apply hover:bg-gray-3 hover:border-gray-5 hover:text-gray-10;
+  /* dark mode */
+  @apply th-dark:bg-gray-warm-10 th-dark:border-gray-warm-7 th-dark:text-gray-warm-4;
+  @apply th-dark:hover:bg-gray-warm-9 th-dark:hover:border-gray-6 th-dark:hover:text-gray-warm-4;
+  /* highcontrast mode */
+  @apply th-highcontrast:bg-gray-warm-10 th-highcontrast:border-gray-warm-7 th-highcontrast:text-white;
+  @apply th-highcontrast:hover:bg-gray-warm-9 th-highcontrast:hover:border-gray-6 th-highcontrast:hover:text-white;
+
+  @apply font-sans;
+  @apply border-solid	border;
+  font-size: 85%;
+  padding: 0px 8px;
+  border-radius: 8px;
+}

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -10,9 +10,10 @@ type Position = 'top' | 'right' | 'bottom' | 'left';
 export interface Props {
   position?: Position;
   message: string;
+  className?: string;
 }
 
-export function Tooltip({ message, position = 'bottom' }: Props) {
+export function Tooltip({ message, position = 'bottom', className }: Props) {
   const id = _.uniqueId('tooltip-');
 
   return (
@@ -28,7 +29,7 @@ export function Tooltip({ message, position = 'bottom' }: Props) {
         type="info"
         place={position}
         effect="solid"
-        className={styles.tooltip}
+        className={clsx(styles.tooltip, className)}
         arrowColor="transparent"
       />
     </span>