diff --git a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx index 1d5bf638ea47..969f4a4960e5 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx +++ b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/ListenerForm.page.tsx @@ -27,6 +27,7 @@ import { import { TLoadBalancerListener, TProtocol } from '@/api/data/load-balancer'; import Popover from './Popover'; import { TLoadBalancerPool } from '@/api/data/pool'; +import LabelComponent from '@/components/form/Label.component'; export type TFormState = { name: string; @@ -158,19 +159,11 @@ export default function ListenerForm({ className="my-8" error={isNameRequired ? tCommon('common_field_error_required') : ''} > - - {t('octavia_load_balancer_listeners_create_name')} - + +
- - {t('octavia_load_balancer_listeners_create_protocol')} - - @@ -221,19 +207,10 @@ export default function ListenerForm({ - - {t('octavia_load_balancer_listeners_create_port')} - + - - {t('octavia_load_balancer_listeners_create_pool')} - + - - - - - - {content} - - - - ); -} diff --git a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx index 70ad10444844..cbdbdf7e60d4 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx +++ b/packages/manager/apps/pci-load-balancer/src/components/detail/listeners/l7/PolicyForm.component.tsx @@ -150,7 +150,7 @@ export default function PolicyForm({ } }, [policy]); return ( - <> +
@@ -385,6 +385,6 @@ export default function PolicyForm({ t('octavia_load_balancer_create_l7_policy_submit')}
- +
); } diff --git a/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx index e6523846d3d7..4a371a00f815 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx +++ b/packages/manager/apps/pci-load-balancer/src/components/form/Label.component.tsx @@ -24,28 +24,29 @@ export default function LabelComponent({ text, helpText, hasError, - slot, + slot = 'label', className = '', }: Readonly): JSX.Element { return ( -
+
{text} + {helpText && ( - + diff --git a/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx index 999234f337d2..c93e4e420e85 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx +++ b/packages/manager/apps/pci-load-balancer/src/components/form/PoolForm.component.tsx @@ -221,7 +221,6 @@ export const PoolFormComponent = ({ @@ -264,10 +263,8 @@ export const PoolFormComponent = ({ text={t('octavia_load_balancer_pools_create_algorithm')} helpText={t('octavia_load_balancer_pools_create_algorithm_tooltip')} hasError={error.algorithm} - slot="label" - > + /> { @@ -289,6 +286,7 @@ export const PoolFormComponent = ({ })); }} inline + className="w-[20rem]" > {state.algorithms.map((alg) => ( @@ -306,11 +304,9 @@ export const PoolFormComponent = ({ { @@ -333,6 +329,7 @@ export const PoolFormComponent = ({ }} {...(!isEditMode ? {} : { disabled: true })} inline + className="w-[20rem]" > + {state.permanentSession.isEnabled && ( <> {t( @@ -392,7 +390,6 @@ export const PoolFormComponent = ({ )} @@ -420,6 +417,7 @@ export const PoolFormComponent = ({ })) } inline + className="w-[20rem]" > {state.sessionTypes.map((sType) => ( @@ -441,7 +439,6 @@ export const PoolFormComponent = ({ text={t( 'octavia_load_balancer_pools_create_persistent_session_cookie_name', )} - slot="label" hasError={error.cookieName} /> )} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx index 7125c3f7accb..94545d9566d8 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/edit/Edit.page.tsx @@ -1,15 +1,7 @@ import { PciModal } from '@ovh-ux/manager-pci-common'; import { Translation, useTranslation } from 'react-i18next'; -import { - OsdsFormField, - OsdsInput, - OsdsText, -} from '@ovhcloud/ods-components/react'; -import { - ODS_THEME_COLOR_INTENT, - ODS_THEME_TYPOGRAPHY_LEVEL, - ODS_THEME_TYPOGRAPHY_SIZE, -} from '@ovhcloud/ods-common-theming'; +import { OsdsFormField, OsdsInput } from '@ovhcloud/ods-components/react'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components'; import { useNavigate, useParams } from 'react-router-dom'; import { useState } from 'react'; @@ -19,6 +11,7 @@ import { useLoadBalancer, useRenameLoadBalancer, } from '@/api/hook/useLoadBalancer'; +import LabelComponent from '@/components/form/Label.component'; export default function Edit() { const { addSuccess, addError } = useNotifications(); @@ -87,14 +80,9 @@ export default function Edit() { cancelText={tEditName('octavia_load_balancer_edit_name_cancel')} > - - {tEditName('octavia_load_balancer_edit_name_label')} - + setLoadBalancerName(event.detail.value)} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/L7.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/L7.page.tsx index 65c9e22afece..6734f5ab0f7a 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/L7.page.tsx +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/L7.page.tsx @@ -1,29 +1,23 @@ -import { Suspense } from 'react'; -import { Outlet, useParams } from 'react-router-dom'; -import { useTranslation } from 'react-i18next'; -import { - OsdsBreadcrumb, - OsdsIcon, - OsdsLink, - OsdsText, -} from '@ovhcloud/ods-components/react'; -import { useProjectUrl } from '@ovh-ux/manager-react-components'; import { useProject } from '@ovh-ux/manager-pci-common'; import { - ODS_ICON_NAME, - ODS_ICON_SIZE, - ODS_TEXT_COLOR_INTENT, - ODS_TEXT_LEVEL, - ODS_TEXT_SIZE, -} from '@ovhcloud/ods-components'; + Headers, + Links, + LinkType, + useProjectUrl, +} from '@ovh-ux/manager-react-components'; +import { OsdsBreadcrumb } from '@ovhcloud/ods-components/react'; +import { Suspense } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Outlet, useHref, useParams } from 'react-router-dom'; +import { ROUTE_PATHS } from '@/routes'; import { useListener } from '@/api/hook/useListener'; export default function L7Page() { const { t: tPciCommon } = useTranslation('pci-common'); const { t } = useTranslation('octavia-load-balancer-l7'); - const hrefProject = useProjectUrl('public-cloud'); const { t: tLoadBalancer } = useTranslation('octavia-load-balancer'); const { t: tListener } = useTranslation('octavia-load-balancer-listeners'); + const { projectId, loadBalancerId, region, listenerId } = useParams(); const { data: project } = useProject(); const { data: listener } = useListener({ @@ -32,6 +26,16 @@ export default function L7Page() { loadBalancerId, listenerId, }); + + const hrefProject = useProjectUrl('public-cloud'); + const hrefLoadBalancers = useHref('..'); + const hrefLoadBalancerDetail = useHref( + `../${region}/${loadBalancerId}/${ROUTE_PATHS.GENERAL_INFORMATION}`, + ); + const hrefListeners = useHref( + `../${region}/${loadBalancerId}/${ROUTE_PATHS.LISTENERS}`, + ); + return ( <> - - {listener?.name} - - - - {tPciCommon('common_back_button_back_to_previous_page')} - + +
+ +
+ + + diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/list/useL7PoliciesDatagridColumn.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/list/useL7PoliciesDatagridColumn.tsx index 01e7729b9e67..2b400183672a 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/list/useL7PoliciesDatagridColumn.tsx +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/list/useL7PoliciesDatagridColumn.tsx @@ -70,6 +70,7 @@ export const useL7PoliciesDatagridColumn = () => { {props.attribute} ), label: tL7Policies('octavia_load_balancer_list_l7_policies_attribute'), + isSortable: false, }, { id: 'redirectHttpCode', @@ -79,6 +80,7 @@ export const useL7PoliciesDatagridColumn = () => { label: tL7Policies( 'octavia_load_balancer_list_l7_policies_redirect_code', ), + isSortable: false, }, { id: 'provisioningStatus', @@ -89,6 +91,7 @@ export const useL7PoliciesDatagridColumn = () => { /> ), label: tLoadBalancer('octavia_load_balancer_provisioning_status'), + isSortable: false, }, { id: 'operatingStatus', @@ -99,6 +102,7 @@ export const useL7PoliciesDatagridColumn = () => { /> ), label: tLoadBalancer('octavia_load_balancer_operating_status'), + isSortable: false, }, { id: 'actions', @@ -108,6 +112,7 @@ export const useL7PoliciesDatagridColumn = () => {
), label: '', + isSortable: false, }, ]; diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/overview/Configuration.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/overview/Configuration.tsx index 844dd76bfca7..53a40365dcef 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/overview/Configuration.tsx +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/overview/Configuration.tsx @@ -43,7 +43,7 @@ export default function Configuration({ return (
{ diff --git a/packages/manager/apps/pci-load-balancer/tailwind.config.js b/packages/manager/apps/pci-load-balancer/tailwind.config.js index 14998255815f..2d131c63543e 100644 --- a/packages/manager/apps/pci-load-balancer/tailwind.config.js +++ b/packages/manager/apps/pci-load-balancer/tailwind.config.js @@ -7,6 +7,13 @@ module.exports = { './src/**/*.{js,jsx,ts,tsx}', '../../../manager-react-components/src/**/*.{js,jsx,ts,tsx}', ], + theme: { + extend: { + boxShadow: { + 'custom-tile': '0 0 6px 0 rgba(0,14,156,.2)', + }, + }, + }, corePlugins: { preflight: false, },