feat(helm): helm actions [r8s-259] (#715)

Co-authored-by: James Player <james.player@portainer.io>
Co-authored-by: Cara Ryan <cara.ryan@portainer.io>
Co-authored-by: stevensbkang <skan070@gmail.com>

app/react/components/CodeEditor/FileNameHeader.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+
+import { AutomationTestingProps } from '@/types';
+
+import { CopyButton } from '@@/buttons/CopyButton';
+
+type FileNameHeaderProps = {
+  fileName: string;
+  copyText: string;
+  className?: string;
+  style?: React.CSSProperties;
+} & AutomationTestingProps;
+
+/**
+ * FileNameHeaderRow: Outer container for file name headers (single or multiple columns).
+ * Use this to wrap one or more <FileNameHeader> components (and optional dividers).
+ */
+export function FileNameHeaderRow({
+  children,
+  className,
+  style,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div
+      className={clsx(
+        'flex w-full text-sm text-muted border-0 border-b border-solid border-b-gray-5 th-dark:border-b-gray-7 th-highcontrast:border-b-gray-2 bg-gray-2 th-dark:bg-gray-10 th-highcontrast:bg-black [scrollbar-gutter:stable] overflow-auto',
+        className
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * FileNameHeader: Renders a file name with a copy button, styled for use above a code editor or diff viewer.
+ * Should be used inside FileNameHeaderRow.
+ */
+export function FileNameHeader({
+  fileName,
+  copyText,
+  className = '',
+  style,
+  'data-cy': dataCy,
+}: FileNameHeaderProps) {
+  return (
+    <div
+      className={clsx(
+        'w-full overflow-auto flex justify-between items-center gap-x-2 px-4 py-1 text-sm text-muted',
+        className
+      )}
+      style={style}
+    >
+      {fileName}
+      <CopyButton
+        data-cy={dataCy}
+        copyText={copyText}
+        color="link"
+        className="!pr-0 !text-sm !font-medium hover:no-underline focus:no-underline"
+        indicatorPosition="left"
+      >
+        Copy
+      </CopyButton>
+    </div>
+  );
+}