feat(kubernetes): edit yaml support EE-2855 (#8016)

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css

@@ -0,0 +1,41 @@
+:global(portainer-tooltip) {
+  @apply inline-flex;
+}
+
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip {
+  background-color: var(--bg-tooltip-color) !important;
+  padding: 0.833em 1em !important;
+  color: var(--text-tooltip-color) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  max-width: 400px;
+  text-align: left;
+  font-size: 12px !important;
+  font-weight: 400;
+}
+
+.tooltip:hover {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.tooltip-container {
+  line-height: 18px;
+}
+
+.tooltip-heading {
+  font-weight: 500;
+}
+
+.tooltip-beteaser {
+  color: var(--ui-warning-5);
+}
+
+.tooltip-beteaser:hover {
+  color: var(--ui-warning-5);
+}

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx

@@ -0,0 +1,83 @@
+import ReactTooltip from 'react-tooltip';
+import clsx from 'clsx';
+import _ from 'lodash';
+import ReactDOMServer from 'react-dom/server';
+
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+
+import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
+
+import styles from './TooltipWithChildren.module.css';
+
+type Position = 'top' | 'right' | 'bottom' | 'left';
+
+export interface Props {
+  position?: Position;
+  message: string;
+  className?: string;
+  children: React.ReactNode;
+  heading?: string;
+  BEFeatureID?: FeatureId;
+}
+
+export function TooltipWithChildren({
+  message,
+  position = 'bottom',
+  className,
+  children,
+  heading,
+  BEFeatureID,
+}: Props) {
+  const id = _.uniqueId('tooltip-');
+
+  const { url, limitedToBE } = BEFeatureID
+    ? getFeatureDetails(BEFeatureID)
+    : { url: '', limitedToBE: false };
+
+  const messageHTML = (
+    <div className={styles.tooltipContainer}>
+      <div
+        className={clsx(
+          'w-full mb-2 inline-flex justify-between',
+          styles.tooltipHeading
+        )}
+      >
+        {heading && <span>{heading}</span>}
+        {BEFeatureID && limitedToBE && (
+          <a
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            className={styles.tooltipBeteaser}
+          >
+            Business Edition Only
+          </a>
+        )}
+      </div>
+      <div>{message}</div>
+    </div>
+  );
+
+  return (
+    <span
+      data-html
+      data-multiline
+      data-tip={ReactDOMServer.renderToString(messageHTML)}
+      data-for={id}
+      className={clsx(styles.icon, 'inline-flex text-base')}
+    >
+      {children}
+      <ReactTooltip
+        id={id}
+        multiline
+        type="info"
+        place={position}
+        effect="solid"
+        className={clsx(styles.tooltip, className)}
+        arrowColor="var(--bg-tooltip-color)"
+        delayHide={400}
+        clickable
+      />
+    </span>
+  );
+}

app/react/components/Tip/TooltipWithChildren/index.ts

@@ -0,0 +1 @@
+export { TooltipWithChildren } from './TooltipWithChildren';