feat(helm): enhance helm chart install [r8s-341] (#766)

app/react/components/CodeEditor/CodeEditor.module.css

@@ -141,9 +141,11 @@
 }
 
 .root :global(.cm-content[aria-readonly='true']) {
-  @apply bg-gray-3;
-  @apply th-dark:bg-gray-iron-10;
-  @apply th-highcontrast:bg-black;
+  /* make sure the bg has transparency, so that the selected text is visible */
+  /* https://discuss.codemirror.net/t/how-do-i-get-selected-text-to-highlight/7115/2 */
+  @apply bg-gray-3/50;
+  @apply th-dark:bg-gray-iron-10/50;
+  @apply th-highcontrast:bg-black/50;
 }
 
 .root :global(.cm-textfield) {

app/react/components/CodeEditor/CodeEditor.tsx

@@ -33,6 +33,7 @@ interface Props extends AutomationTestingProps {
   schema?: JSONSchema7;
   fileName?: string;
   placeholder?: string;
+  showToolbar?: boolean;
 }
 
 export const theme = createTheme({
@@ -75,6 +76,7 @@ export function CodeEditor({
   'data-cy': dataCy,
   fileName,
   placeholder,
+  showToolbar = true,
 }: Props) {
   const [isRollback, setIsRollback] = useState(false);
 
@@ -94,38 +96,40 @@ export function CodeEditor({
 
   return (
     <>
-      <div className="mb-2 flex flex-col">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            {!!textTip && <TextTip color="blue">{textTip}</TextTip>}
+      {showToolbar && (
+        <div className="mb-2 flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              {!!textTip && <TextTip color="blue">{textTip}</TextTip>}
+            </div>
+            {/* the copy button is in the file name header, when fileName is provided */}
+            {!fileName && (
+              <div className="flex-2 ml-auto mr-2 flex items-center gap-x-2">
+                <CopyButton
+                  data-cy={`copy-code-button-${id}`}
+                  fadeDelay={2500}
+                  copyText={value}
+                  color="link"
+                  className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
+                  indicatorPosition="left"
+                >
+                  Copy
+                </CopyButton>
+              </div>
+            )}
           </div>
-          {/* the copy button is in the file name header, when fileName is provided */}
-          {!fileName && (
-            <div className="flex-2 ml-auto mr-2 flex items-center gap-x-2">
-              <CopyButton
-                data-cy={`copy-code-button-${id}`}
-                fadeDelay={2500}
-                copyText={value}
-                color="link"
-                className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
-                indicatorPosition="left"
-              >
-                Copy
-              </CopyButton>
+          {versions && (
+            <div className="mt-2 flex">
+              <div className="ml-auto mr-2">
+                <StackVersionSelector
+                  versions={versions}
+                  onChange={handleVersionChange}
+                />
+              </div>
             </div>
           )}
         </div>
-        {versions && (
-          <div className="mt-2 flex">
-            <div className="ml-auto mr-2">
-              <StackVersionSelector
-                versions={versions}
-                onChange={handleVersionChange}
-              />
-            </div>
-          </div>
-        )}
-      </div>
+      )}
       <div className="overflow-hidden rounded-lg border border-solid border-gray-5 th-dark:border-gray-7 th-highcontrast:border-gray-2">
         {fileName && (
           <FileNameHeaderRow>

app/react/components/CodeEditor/ShortcutsTooltip.tsx

@@ -0,0 +1,52 @@
+import { BROWSER_OS_PLATFORM } from '@/react/constants';
+
+import { Tooltip } from '@@/Tip/Tooltip';
+
+const otherEditorConfig = {
+  tooltip: (
+    <>
+      <div>Ctrl+F - Start searching</div>
+      <div>Ctrl+G - Find next</div>
+      <div>Ctrl+Shift+G - Find previous</div>
+      <div>Ctrl+Shift+F - Replace</div>
+      <div>Ctrl+Shift+R - Replace all</div>
+      <div>Alt+G - Jump to line</div>
+      <div>Persistent search:</div>
+      <div className="ml-5">Enter - Find next</div>
+      <div className="ml-5">Shift+Enter - Find previous</div>
+    </>
+  ),
+  searchCmdLabel: 'Ctrl+F for search',
+} as const;
+
+export const editorConfig = {
+  mac: {
+    tooltip: (
+      <>
+        <div>Cmd+F - Start searching</div>
+        <div>Cmd+G - Find next</div>
+        <div>Cmd+Shift+G - Find previous</div>
+        <div>Cmd+Option+F - Replace</div>
+        <div>Cmd+Option+R - Replace all</div>
+        <div>Option+G - Jump to line</div>
+        <div>Persistent search:</div>
+        <div className="ml-5">Enter - Find next</div>
+        <div className="ml-5">Shift+Enter - Find previous</div>
+      </>
+    ),
+    searchCmdLabel: 'Cmd+F for search',
+  },
+
+  lin: otherEditorConfig,
+  win: otherEditorConfig,
+} as const;
+
+export function ShortcutsTooltip() {
+  return (
+    <div className="text-muted small vertical-center ml-auto">
+      {editorConfig[BROWSER_OS_PLATFORM].searchCmdLabel}
+
+      <Tooltip message={editorConfig[BROWSER_OS_PLATFORM].tooltip} />
+    </div>
+  );
+}