refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/BEFeatureIndicator/BEFeatureIndicator.css

@@ -0,0 +1,26 @@
+.be-indicator {
+  border: solid 1px var(--BE-only);
+  border-radius: 15px;
+  padding: 5px 10px;
+  font-weight: 400;
+  touch-action: all;
+  pointer-events: all;
+  white-space: nowrap;
+}
+
+.be-indicator .be-indicator-icon {
+  color: #000000;
+}
+
+.be-indicator:hover {
+  text-decoration: none;
+}
+
+.be-indicator:hover .be-indicator-label {
+  text-decoration: underline;
+}
+
+.be-indicator-container {
+  border: solid 1px var(--BE-only);
+  margin: 15px;
+}

app/react/components/BEFeatureIndicator/BEFeatureIndicator.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react';
+
+import { Edition, FeatureId } from '@/portainer/feature-flags/enums';
+import { init as initFeatureService } from '@/portainer/feature-flags/feature-flags.service';
+
+import { BEFeatureIndicator, Props } from './BEFeatureIndicator';
+
+export default {
+  component: BEFeatureIndicator,
+  title: 'Components/BEFeatureIndicator',
+  argTypes: {
+    featureId: {
+      control: { type: 'select', options: Object.values(FeatureId) },
+    },
+  },
+} as Meta<Props>;
+
+// : JSX.IntrinsicAttributes & PropsWithChildren<Props>
+function Template({ featureId }: Props) {
+  initFeatureService(Edition.CE);
+
+  return <BEFeatureIndicator featureId={featureId} />;
+}
+
+export const Example = Template.bind({});

app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx

@@ -0,0 +1,42 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+import { FeatureId } from '@/portainer/feature-flags/enums';
+
+import { getFeatureDetails } from './utils';
+
+export interface Props {
+  featureId?: FeatureId;
+  showIcon?: boolean;
+  className?: string;
+}
+
+export function BEFeatureIndicator({
+  featureId,
+  children,
+  showIcon = true,
+  className = '',
+}: PropsWithChildren<Props>) {
+  const { url, limitedToBE } = getFeatureDetails(featureId);
+
+  if (!limitedToBE) {
+    return null;
+  }
+
+  return (
+    <a
+      className={clsx('be-indicator', className)}
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+      {showIcon && (
+        <i className="fas fa-briefcase space-right be-indicator-icon" />
+      )}
+      <span className="be-indicator-label break-words">
+        Business Edition Feature
+      </span>
+    </a>
+  );
+}

app/react/components/BEFeatureIndicator/index.ts

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

app/react/components/BEFeatureIndicator/utils.ts

@@ -0,0 +1,15 @@
+import { FeatureId } from '@/portainer/feature-flags/enums';
+import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
+
+const BE_URL = 'https://www.portainer.io/business-upsell?from=';
+
+export function getFeatureDetails(featureId?: FeatureId) {
+  if (!featureId) {
+    return {};
+  }
+  const url = `${BE_URL}${featureId}`;
+
+  const limitedToBE = isLimitedToBE(featureId);
+
+  return { url, limitedToBE };
+}