fix(helm): add clarifying text and new badge to helm user repo settings table [EE-6609] (#11018)

app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx

@@ -6,6 +6,7 @@ import helm from '@/assets/ico/vendor/helm.svg?c';
 import { Datatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { columns } from './columns';
 import { HelmRepositoryDatatableActions } from './HelmRepositoryDatatableActions';
@@ -43,6 +44,7 @@ export function HelmRepositoryDatatable() {
     <Datatable
       getRowId={(row) => String(row.Id)}
       dataset={helmRepos}
+      description={<HelmDatatableDescription />}
       settingsManager={tableState}
       columns={columns}
       title="Helm Repositories"
@@ -56,3 +58,14 @@ export function HelmRepositoryDatatable() {
     />
   );
 }
+
+function HelmDatatableDescription() {
+  return (
+    <TextTip color="blue" className="mb-3">
+      Adding a Helm repo here only makes it available in your own user
+      account&apos;s Portainer UI. Helm charts are pulled down from these repos
+      (plus the globally-set Helm repo) and shown in the Create from Manifest
+      screen&apos;s Helm charts list.
+    </TextTip>
+  );
+}

app/react/portainer/account/AccountView/HelmRepositoryDatatable/columns/url.tsx

@@ -1,3 +1,17 @@
+import { Badge } from '@@/Badge';
+
 import { columnHelper } from './helper';
 
-export const url = columnHelper.accessor('URL', { id: 'url' });
+export const url = columnHelper.accessor('URL', {
+  id: 'url',
+  cell: ({ row }) => (
+    <div className="flex">
+      {row.original.URL}
+      {row.original.Global && (
+        <Badge type="success" className="ml-2">
+          Globally-set
+        </Badge>
+      )}
+    </div>
+  ),
+});