Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/pci private registry fix restriction tapc xxx #14916

Open
wants to merge 10 commits into
base: feat/pci-private-registry_create-restriction_tapc-584
Choose a base branch
from
+107 −74
Open

Fix/pci private registry fix restriction tapc xxx #14916

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6b5eea4
fix(pci.private-registry): show alert only on initialDAta
Jan 13, 2025
bdc6d4b
fix(pci.private-registry): display pagination correctly
Jan 14, 2025
691b2c1
fix(pci.private-registry): fix uniq pagination
Jan 14, 2025
70306e7
fix(pci.private-registry): fix filter issue
Jan 14, 2025
a900771
fix(pci.private-registry): validation focus
Jan 14, 2025
efc9651
fix(pci.private-registry): fix validation
Jan 14, 2025
fdacddd
fix(pci.private-registry): fix pr
Jan 15, 2025
937d65d
fix(pci.private-registry): position change on menu
Jan 16, 2025
4bb90d8
fix(pci.private-registry): fix test
Jan 16, 2025
2adddd1
fix(pxi.private-registry): fix PR review
Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/manager/apps/pci-private-registry/src/components/CIDR/Authorization.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,23 @@ import { FilterRestrictionsEnum } from '@/types';
import { capitalizeAndJoin } from '@/helpers';

const Authorization = () => {
const { control, formState } = useFormContext();
const { control, formState, trigger } = useFormContext();
const { t } = useTranslation(['ip-restrictions']);
return (
<Controller
name="authorization"
control={control}
render={({ field: { onChange, value } }) => (
render={({ field: { onChange, value }, fieldState: { isDirty } }) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does isDirty mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isDirty means value touched and fill

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry but I can't make the relation ...
isDirty sounds like code smell to me ;)

<OsdsSelect
data-testid="authorization-select"
error={Boolean(formState.errors?.authorization?.message)}
onOdsValueChange={(e) => {
if (typeof e.target.value === 'string') {
onChange(JSON.parse(e.detail.value as string));
}
if (!isDirty) {
trigger('authorization');
}
}}
value={JSON.stringify(value)}
>
Expand Down
82 changes: 42 additions & 40 deletions ...es/manager/apps/pci-private-registry/src/components/CIDR/AuthorizationLabel.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,50 +19,52 @@ import { useTranslation, Trans } from 'react-i18next';
const AuthorizationLabel = () => {
const { t } = useTranslation(['ip-restrictions']);
return (
<OsdsPopover>
<span slot="popover-trigger">
<OsdsText
size={ODS_TEXT_SIZE._500}
hue={ODS_TEXT_COLOR_HUE._800}
level={ODS_TEXT_LEVEL.body}
color={ODS_TEXT_COLOR_INTENT.primary}
>
{t('private_registry_cidr_authorization')}
</OsdsText>

<OsdsIcon
name={ODS_ICON_NAME.HELP}
size={ODS_ICON_SIZE.xs}
className="ml-4 cursor-help"
color={ODS_THEME_COLOR_INTENT.primary}
/>
</span>

<OsdsPopoverContent>
<Trans ns="ip-restrictions">
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{t('private_registry_cidr_help_authorized_component')}
</OsdsText>
<br />
<div className="whitespace-normal inline">
<OsdsPopover>
<span slot="popover-trigger">
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
size={ODS_TEXT_SIZE._500}
hue={ODS_TEXT_COLOR_HUE._800}
level={ODS_TEXT_LEVEL.body}
color={ODS_TEXT_COLOR_INTENT.primary}
>
{t('private_registry_cidr_help_authorized_component_part2')}
{t('private_registry_cidr_authorization')}
</OsdsText>
<br />
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{t('private_registry_cidr_help_authorized_component_part3')}
</OsdsText>
</Trans>
</OsdsPopoverContent>
</OsdsPopover>

<OsdsIcon
name={ODS_ICON_NAME.HELP}
size={ODS_ICON_SIZE.xs}
className="ml-4 cursor-help"
color={ODS_THEME_COLOR_INTENT.primary}
/>
</span>

<OsdsPopoverContent>
<Trans ns="ip-restrictions">
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{t('private_registry_cidr_help_authorized_component')}
</OsdsText>
<br />
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{t('private_registry_cidr_help_authorized_component_part2')}
</OsdsText>
<br />
<OsdsText
color={ODS_THEME_COLOR_INTENT.text}
level={ODS_TEXT_LEVEL.body}
>
{t('private_registry_cidr_help_authorized_component_part3')}
</OsdsText>
</Trans>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we just want add spacing between element. Maybe use container with gap (flex flex-col gap-2) ?

Allow to have better control ?

</OsdsPopoverContent>
</OsdsPopover>
</div>
);
};

Expand Down
10 changes: 8 additions & 2 deletions packages/manager/apps/pci-private-registry/src/components/CIDR/CIDR.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@ export default function CIDR() {
const { projectId = '', registryId = '' } = useParams();
const { formState, reset } = useFormContext();
const columns = useDatagridColumn();
const { pagination, setPagination, rows, totalRows } = useDataGridContext();
const {
pagination,
setPagination,
rows,
totalRows,
initialData,
} = useDataGridContext();
const { clearNotifications } = useNotifications();

const variablesPending = useMutationState({
Expand Down Expand Up @@ -73,7 +79,7 @@ export default function CIDR() {

return (
<>
{!rows.length && (
{!initialData.current.length && (
<OsdsMessage
color={ODS_THEME_COLOR_INTENT.info}
type={ODS_MESSAGE_TYPE.info}
Expand Down
3 changes: 2 additions & 1 deletion packages/manager/apps/pci-private-registry/src/components/CIDR/Description.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ const Description = () => {
<Controller
name="description"
control={control}
render={({ field: { onChange, value } }) => (
render={({ field: { onChange, value, onBlur } }) => (
<OsdsInput
data-testid="input-description"
value={value}
onOdsInputBlur={onBlur}
color={ODS_TEXT_COLOR_INTENT.primary}
onOdsValueChange={(e) => onChange(e.detail.value)}
type={ODS_INPUT_TYPE.text}
Expand Down
11 changes: 10 additions & 1 deletion packages/manager/apps/pci-private-registry/src/components/CIDR/Filters.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,10 @@ const Filters = () => {
className="w-[70%]"
value={searchField}
onOdsSearchSubmit={({ detail }) => {
setPagination({
pageIndex: 0,
pageSize: pagination.pageSize,
});
handleAddFilter(detail.inputValue);
setSearchField('');
}}
Expand Down Expand Up @@ -182,7 +186,12 @@ const Filters = () => {
},
]}
onAddFilter={(addedFilter, column) => {
handleAddFilter(addedFilter.value, column.id, column.label);
handleAddFilter(
addedFilter.value,
column.id,
column.label,
addedFilter.comparator,
);
filterPopoverRef.current?.closeSurface();
}}
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/manager/apps/pci-private-registry/src/components/CIDR/IpBlock.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ const IpBlock = () => {
<Controller
name="ipBlock"
control={control}
render={({ field: { onChange, value } }) => (
render={({ field: { onChange, value, onBlur } }) => (
<OsdsInput
onOdsInputBlur={onBlur}
placeholder="ex: 192.168.1.1/32"
color={ODS_TEXT_COLOR_INTENT.primary}
type={ODS_INPUT_TYPE.text}
Expand Down
20 changes: 18 additions & 2 deletions packages/manager/apps/pci-private-registry/src/pages/CIDR/DatagridContext.provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,14 @@ import {
useDataGrid,
} from '@ovh-ux/manager-react-components';
import { useFormContext } from 'react-hook-form';
import { createContext, useCallback, useMemo, useState } from 'react';
import {
createContext,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';

export type ContextDatagridType<
T extends DatagridAction[] = DatagridAction[]
Expand All @@ -12,6 +19,7 @@ export type ContextDatagridType<
isAllDataSelected: boolean;
rows: T;
totalRows: number;
initialData: { current: T };
updateCheckedStateRow: (ipBlock: string, allIsSelected: boolean) => void;
removeDraftRow: () => void;
addNewRow: (column?: Record<string, unknown>) => void;
Expand Down Expand Up @@ -63,16 +71,23 @@ type DatagridProviderProps<TData extends DatagridAction[]> = {
columnFilters?: ReturnType<typeof useColumnFilters>;
children: JSX.Element;
data: TData;
totalRows: number;
};

const DatagridProvider = <TData extends DatagridAction[]>({
children,
data,
dataGrid,
columnFilters,
totalRows,
tibs245 marked this conversation as resolved.
Show resolved Hide resolved
}: DatagridProviderProps<TData>) => {
const [draftedData, setDraftedData] = useState(data);
const totalRows = data.length + draftedData.length;
const initialData = useRef(data);

useEffect(() => {
setDraftedData(data);
}, [data]);

const { reset } = useFormContext();
const isAllDataSelected = useMemo(
() =>
Expand Down Expand Up @@ -114,6 +129,7 @@ const DatagridProvider = <TData extends DatagridAction[]>({
...dataGrid,
...columnFilters,
rows: draftedData,
initialData,
totalRows,
draftedData,
addNewRow,
Expand Down
16 changes: 3 additions & 13 deletions packages/manager/apps/pci-private-registry/src/pages/CIDR/DeleteCIDR.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ import {
ODS_THEME_TYPOGRAPHY_SIZE,
} from '@ovhcloud/ods-common-theming';
import { Filter } from '@ovh-ux/manager-core-api';
import {
useIpRestrictionsWithFilter,
useUpdateIpRestriction,
} from '@/api/hooks/useIpRestrictions';
import { useUpdateIpRestriction } from '@/api/hooks/useIpRestrictions';
import {
FilterRestrictionsServer,
TIPRestrictionsDefault,
Expand All @@ -31,7 +28,7 @@ type DeleteModalState = {
export default function DeleteModal() {
const { t } = useTranslation(['ip-restrictions']);
const {
state: { filters, pagination, cidr, totalRows },
state: { cidr, totalRows },
} = useLocation() as {
state: DeleteModalState & { filters?: Filter[] } & {
pagination?: PaginationState;
Expand All @@ -41,13 +38,6 @@ export default function DeleteModal() {
const onClose = () => navigate('./..');
const { projectId, registryId } = useParams();

const { data } = useIpRestrictionsWithFilter(
projectId,
registryId,
['management', 'registry'],
pagination,
filters,
);
const { addError, addSuccess } = useNotifications();

const { updateIpRestrictions } = useUpdateIpRestriction({
Expand Down Expand Up @@ -78,7 +68,7 @@ export default function DeleteModal() {
>,
action: TIPRestrictionsMethodEnum.DELETE,
});
}, [cidr, data, updateIpRestrictions]);
}, [cidr, updateIpRestrictions]);

return (
<PciModal
Expand Down
12 changes: 7 additions & 5 deletions packages/manager/apps/pci-private-registry/src/pages/CIDR/ManageCIDR.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,12 @@ export default function BlocIPBlock() {
dataGrid.pagination,
columnFilters.filters,
);
const { t } = useTranslation(['ip-restrictions']);
const methods = useForm<ConfirmCIDRSchemaType>({
resolver: zodResolver(schemaAddCidr(dataCIDR.rows.map((e) => e.ipBlock))),
mode: 'onBlur',
reValidateMode: 'onChange',
mode: 'onSubmit',
reValidateMode: 'onBlur',
});
const { t } = useTranslation(['ip-restrictions']);

return (
<>
Expand All @@ -117,10 +117,12 @@ export default function BlocIPBlock() {

<FormProvider {...methods}>
<DatagridProvider
dataGrid={dataGrid}
dataGrid={{
...dataGrid,
}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe better copy value on provider and not on the usage ?

We can have case we just want send the reference of datagrid ?

columnFilters={columnFilters}
key={dataCIDR.totalRows}
data={dataCIDR.rows}
totalRows={dataCIDR.totalRows}
>
<BlockCIDR />
</DatagridProvider>
Expand Down
4 changes: 3 additions & 1 deletion packages/manager/apps/pci-private-registry/src/pages/CIDR/useDatagridColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { capitalizeAndJoin } from '@/helpers';
import Checkboxes from '@/components/CIDR/Checkboxes.component';
import AllCheckboxComponent from '@/components/CIDR/AllCheckbox.component';
import useDataGridContext from './useDatagridContext';
import AuthorizationLabel from '@/components/CIDR/AuthorizationLabel.component';

function showCheckboxes(draft: boolean, dataLength: number): boolean {
const minDataLength = draft ? 3 : 2;
Expand Down Expand Up @@ -88,7 +89,8 @@ export const useDatagridColumn = () => {
) : (
<div>{capitalizeAndJoin(props.authorization)}</div>
),
label: t('private_registry_cidr_authorization'),
// need to had a Popover next to the label
label: ((<AuthorizationLabel />) as unknown) as string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a comment to explain why you need this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hacky but do not have choice to implement a Popover next to label

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand, maybe you could add a typescript comment above this line to explain

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't understand clearly why you use here a React Component and cast it as a string?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the DataGrid only accepts string as type but in reality can accept ReactNode so this is a tweak because of wrong typing

Copy link
Contributor

@tibs245 tibs245 Jan 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better change the type of DatagridColumn.label in packages/manager-react-components/src/components/datagrid/datagrid.component.tsxfor the next I think

},
{
id: 'add',
Expand Down
Loading