From 01cd64037fbe9004d49abda3840503541595a229 Mon Sep 17 00:00:00 2001 From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com> Date: Tue, 6 Feb 2024 12:17:38 +1300 Subject: [PATCH] fix(UI): some minor fixes [EE-6667] (#11061) * minor tweeks for kubernetes settings * address review comments --- .../helm-templates-list/helm-templates-list.html | 3 ++- app/react/components/Widget/Widget.tsx | 14 +++++++++----- app/react/components/datatables/Datatable.tsx | 3 +++ .../components/datatables/DatatableHeader.tsx | 9 ++++++++- app/react/components/datatables/TableTitle.tsx | 4 +++- .../HelmRepositoryDatatable.tsx | 8 ++++++-- .../KubeSettingsPanel/DeploymentOptionsSection.tsx | 2 +- .../SettingsView/KubeSettingsPanel/HelmSection.tsx | 2 +- .../KubeSettingsPanel/KubeSettingsPanel.tsx | 4 ++-- .../SSLSettingsPanel/SSLSettingsPanel.tsx | 2 +- 10 files changed, 36 insertions(+), 15 deletions(-) diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html index d9e26a375..4c9e64a0d 100644 --- a/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html +++ b/app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list.html @@ -21,7 +21,8 @@
Select the Helm chart to use. Bring further Helm charts into your selection list via User settings - Helm repositories.
Select the Helm chart to use. Bring further Helm charts into your selection list via + User settings - Helm repositories.
(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) { +export function Widget({ + children, + id, +}: PropsWithChildren<{ + id?: string; +}>) { return ( -
{children}
+
+ {children} +
); } diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx index cfc52100f..33354e03b 100644 --- a/app/react/components/datatables/Datatable.tsx +++ b/app/react/components/datatables/Datatable.tsx @@ -58,6 +58,7 @@ export interface Props extends AutomationTestingProps { emptyContentLabel?: string; title?: string; titleIcon?: IconProps['icon']; + titleId?: string; initialTableState?: Partial; isLoading?: boolean; description?: ReactNode; @@ -78,6 +79,7 @@ export function Datatable({ getRowId = defaultGetRowId, isRowSelectable = () => true, title, + titleId, titleIcon, emptyContentLabel, initialTableState = {}, @@ -172,6 +174,7 @@ export function Datatable({ onSearchChange={handleSearchBarChange} searchValue={settings.search} title={title} + titleId={titleId} titleIcon={titleIcon} description={description} renderTableActions={() => renderTableActions(selectedItems)} diff --git a/app/react/components/datatables/DatatableHeader.tsx b/app/react/components/datatables/DatatableHeader.tsx index 117ad58e4..1edd8e43c 100644 --- a/app/react/components/datatables/DatatableHeader.tsx +++ b/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 ( - + {searchBar} {tableActions} {tableTitleSettings} diff --git a/app/react/components/datatables/TableTitle.tsx b/app/react/components/datatables/TableTitle.tsx index 57ed00fcc..419979167 100644 --- a/app/react/components/datatables/TableTitle.tsx +++ b/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) { return ( <> -
+
{icon && ( diff --git a/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx b/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx index dc4f3ba39..7602982d3 100644 --- a/app/react/portainer/account/AccountView/HelmRepositoryDatatable/HelmRepositoryDatatable.tsx +++ b/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() { Adding a Helm repo here only makes it available in your own user account'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's Helm charts list. + (plus the{' '} + + globally-set Helm repo + + ) and shown in the Create from Manifest screen's Helm charts list. ); } diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx index 4a63214a1..154c73d9a 100644 --- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx +++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/DeploymentOptionsSection.tsx @@ -17,7 +17,7 @@ export function DeploymentOptionsSection() { const limitedFeature = isLimitedToBE(FeatureId.ENFORCE_DEPLOYMENT_OPTIONS); return ( - +
('helmRepositoryUrl'); return ( - +
You can specify the URL to your own Helm repository here. See the{' '} diff --git a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx index b51e2b190..66190b88c 100644 --- a/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx +++ b/app/react/portainer/settings/SettingsView/KubeSettingsPanel/KubeSettingsPanel.tsx @@ -44,7 +44,7 @@ export function KubeSettingsPanel() { }; return ( - + - Save Kubernetes Settings + Save Kubernetes settings
diff --git a/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx b/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx index 1d4227322..617fe9791 100644 --- a/app/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel.tsx +++ b/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