fix(UI): some minor fixes [EE-6667] (#11061)

* minor tweeks for kubernetes settings

* address review comments

app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html

@@ -21,7 +21,8 @@
   </div>
   <div class="w-full">
     <div class="mb-2 small text-muted"
-      >Select the Helm chart to use. Bring further Helm charts into your selection list via <a ui-sref="portainer.account">User settings - Helm repositories</a>.</div
+      >Select the Helm chart to use. Bring further Helm charts into your selection list via
+      <a ui-sref="portainer.account({'#': 'helm-repositories'})">User settings - Helm repositories</a>.</div
     >
     <beta-alert
       is-html="true"

app/react/components/Widget/Widget.tsx

@@ -2,19 +2,23 @@ import { createContext, PropsWithChildren, useContext } from 'react';
 
 const Context = createContext<null | boolean>(null);
 Context.displayName = 'WidgetContext';
-
 export function useWidgetContext() {
   const context = useContext(Context);
-
   if (context == null) {
     throw new Error('Should be inside a Widget component');
   }
 }
-
-export function Widget({ children }: PropsWithChildren<unknown>) {
+export function Widget({
+  children,
+  id,
+}: PropsWithChildren<{
+  id?: string;
+}>) {
   return (
     <Context.Provider value>
-      <div className="widget">{children}</div>
+      <div id={id} className="widget">
+        {children}
+      </div>
     </Context.Provider>
   );
 }

app/react/components/datatables/Datatable.tsx

@@ -58,6 +58,7 @@ export interface Props<D extends DefaultType> extends AutomationTestingProps {
   emptyContentLabel?: string;
   title?: string;
   titleIcon?: IconProps['icon'];
+  titleId?: string;
   initialTableState?: Partial<TableState>;
   isLoading?: boolean;
   description?: ReactNode;
@@ -78,6 +79,7 @@ export function Datatable<D extends DefaultType>({
   getRowId = defaultGetRowId,
   isRowSelectable = () => true,
   title,
+  titleId,
   titleIcon,
   emptyContentLabel,
   initialTableState = {},
@@ -172,6 +174,7 @@ export function Datatable<D extends DefaultType>({
         onSearchChange={handleSearchBarChange}
         searchValue={settings.search}
         title={title}
+        titleId={titleId}
         titleIcon={titleIcon}
         description={description}
         renderTableActions={() => renderTableActions(selectedItems)}

app/react/components/datatables/DatatableHeader.tsx

@@ -13,6 +13,7 @@ type Props = {
   renderTableSettings?(): ReactNode;
   renderTableActions?(): ReactNode;
   description?: ReactNode;
+  titleId?: string;
 };
 
 export function DatatableHeader({
@@ -23,6 +24,7 @@ export function DatatableHeader({
   title,
   titleIcon,
   description,
+  titleId,
 }: Props) {
   if (!title) {
     return null;
@@ -37,7 +39,12 @@ export function DatatableHeader({
   );
 
   return (
-    <Table.Title label={title} icon={titleIcon} description={description}>
+    <Table.Title
+      id={titleId}
+      label={title}
+      icon={titleIcon}
+      description={description}
+    >
       {searchBar}
       {tableActions}
       {tableTitleSettings}

app/react/components/datatables/TableTitle.tsx

@@ -8,6 +8,7 @@ interface Props {
   label: string;
   description?: ReactNode;
   className?: string;
+  id?: string;
 }
 
 export function TableTitle({
@@ -16,10 +17,11 @@ export function TableTitle({
   children,
   description,
   className,
+  id,
 }: PropsWithChildren<Props>) {
   return (
     <>
-      <div className={clsx('toolBar flex-col', className)}>
+      <div className={clsx('toolBar flex-col', className)} id={id}>
         <div className="flex w-full items-center gap-1 p-0">
           <div className="toolBarTitle">
             {icon && (

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

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useCurrentUser } from '@/react/hooks/useUser';
 import helm from '@/assets/ico/vendor/helm.svg?c';
 
+import { Link } from '@@/Link';
 import { Datatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
@@ -64,8 +65,11 @@ function HelmDatatableDescription() {
     <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.
+      (plus the{' '}
+      <Link to="portainer.settings" params={{ '#': 'kubernetes-settings' }}>
+        <span>globally-set Helm repo</span>
+      </Link>
+      ) and shown in the Create from Manifest screen&apos;s Helm charts list.
     </TextTip>
   );
 }

app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx

@@ -17,7 +17,7 @@ export function DeploymentOptionsSection() {
 
   const limitedFeature = isLimitedToBE(FeatureId.ENFORCE_DEPLOYMENT_OPTIONS);
   return (
-    <FormSection title="Deployment Options">
+    <FormSection title="Deployment options">
       <div className="form-group">
         <div className="col-sm-12">
           <SwitchField

app/react/portainer/settings/SettingsView/KubeSettingsPanel/HelmSection.tsx

@@ -9,7 +9,7 @@ export function HelmSection() {
   const [{ name }, { error }] = useField<string>('helmRepositoryUrl');
 
   return (
-    <FormSection title="Helm Repository">
+    <FormSection title="Helm repository">
       <div className="mb-2">
         <TextTip color="blue">
           You can specify the URL to your own Helm repository here. See the{' '}

app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx

@@ -44,7 +44,7 @@ export function KubeSettingsPanel() {
   };
 
   return (
-    <Widget>
+    <Widget id="kubernetes-settings">
       <Widget.Title icon={kubeIcon} title="Kubernetes settings" />
       <Widget.Body>
         <Formik
@@ -66,7 +66,7 @@ export function KubeSettingsPanel() {
                     loadingText="Saving"
                     className="!ml-0"
                   >
-                    Save Kubernetes Settings
+                    Save Kubernetes settings
                   </LoadingButton>
                 </div>
               </div>

app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx

@@ -121,7 +121,7 @@ function SSLSettingsPanel() {
                     loadingText={reloadingPage ? 'Reloading' : 'Saving'}
                     className="!ml-0"
                   >
-                    Save SSL Settings
+                    Save SSL settings
                   </LoadingButton>
                 </div>
               </div>