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>
+  );
+}

app/react/components/ExternalLink.tsx

@@ -0,0 +1,32 @@
+import { ExternalLink as ExternalLinkIcon } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { AutomationTestingProps } from '@/types';
+
+import { Icon } from '@@/Icon';
+
+interface Props {
+  to: string;
+  className?: string;
+}
+
+export function ExternalLink({
+  to,
+  className,
+  children,
+  'data-cy': dataCy,
+}: PropsWithChildren<Props & AutomationTestingProps>) {
+  return (
+    <a
+      href={to}
+      target="_blank"
+      rel="noreferrer"
+      data-cy={dataCy}
+      className={clsx('inline-flex items-center gap-1', className)}
+    >
+      <Icon icon={ExternalLinkIcon} />
+      <span>{children}</span>
+    </a>
+  );
+}

app/react/components/WebEditorForm.tsx

@@ -8,55 +8,14 @@ import {
 import { useTransitionHook } from '@uirouter/react';
 import { JSONSchema7 } from 'json-schema';
 
-import { BROWSER_OS_PLATFORM } from '@/react/constants';
-
 import { CodeEditor } from '@@/CodeEditor';
-import { Tooltip } from '@@/Tip/Tooltip';
 
 import { FormSectionTitle } from './form-components/FormSectionTitle';
 import { FormError } from './form-components/FormError';
 import { confirm } from './modals/confirm';
 import { ModalType } from './modals';
 import { buildConfirmButton } from './modals/utils';
-
-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;
+import { ShortcutsTooltip } from './CodeEditor/ShortcutsTooltip';
 
 type CodeEditorProps = ComponentProps<typeof CodeEditor>;
 
@@ -69,7 +28,7 @@ interface Props extends CodeEditorProps {
 
 export function WebEditorForm({
   id,
-  titleContent = '',
+  titleContent = 'Web editor',
   hideTitle,
   children,
   error,
@@ -81,10 +40,7 @@ export function WebEditorForm({
     <div>
       <div className="web-editor overflow-x-hidden">
         {!hideTitle && (
-          <>
-            <DefaultTitle id={id} />
-            {titleContent ?? null}
-          </>
+          <DefaultTitle id={id}>{titleContent ?? null}</DefaultTitle>
         )}
         {children && (
           <div className="form-group text-muted small">
@@ -111,15 +67,11 @@ export function WebEditorForm({
   );
 }
 
-function DefaultTitle({ id }: { id: string }) {
+function DefaultTitle({ id, children }: { id: string; children?: ReactNode }) {
   return (
     <FormSectionTitle htmlFor={id}>
-      Web editor
-      <div className="text-muted small vertical-center ml-auto">
-        {editorConfig[BROWSER_OS_PLATFORM].searchCmdLabel}
-
-        <Tooltip message={editorConfig[BROWSER_OS_PLATFORM].tooltip} />
-      </div>
+      {children}
+      <ShortcutsTooltip />
     </FormSectionTitle>
   );
 }

app/react/components/modals/Modal/Modal.tsx

@@ -21,7 +21,7 @@ interface Props {
   onDismiss?(): void;
   'aria-label'?: string;
   'aria-labelledby'?: string;
-  size?: 'md' | 'lg';
+  size?: 'md' | 'lg' | 'xl';
   className?: string;
 }
 
@@ -53,6 +53,7 @@ export function Modal({
             {
               'w-[450px]': size === 'md',
               'w-[700px]': size === 'lg',
+              'w-[1000px]': size === 'xl',
             }
           )}
         >