-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ref: TAPC-34 Signed-off-by: Eric Ciccotti <[email protected]>
- Loading branch information
Eric Ciccotti
committed
Dec 16, 2024
1 parent
e6de385
commit c5b2e5d
Showing
25 changed files
with
1,144 additions
and
686 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/manager/apps/pci-kubernetes/src/components/oidc/CheckBoxFormField.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { | ||
| OsdsCheckbox, | ||
| OsdsCheckboxButton, | ||
| OsdsText, | ||
| } from '@ovhcloud/ods-components/react'; | ||
| import { useState, useEffect, useCallback } from 'react'; | ||
| import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; | ||
| import { SigningAlgorithms } from '@/types'; | ||
|
|
||
| type TCheckboxFormFieldProps = { | ||
| value: string[]; | ||
| onChange: (updatedOperations: string[]) => void; | ||
| }; | ||
|
|
||
| export const CheckBoxFormField = ({ | ||
| value = [], | ||
| onChange, | ||
| }: TCheckboxFormFieldProps) => { | ||
| const [keyOperations, setKeyOperations] = useState<string[]>(value); | ||
|
|
||
| useEffect(() => { | ||
| setKeyOperations(value); | ||
| }, [value]); | ||
|
|
||
| const handleCheckboxChange = useCallback( | ||
| (signingAlgorithm: string, isChecked: boolean) => { | ||
| const updatedOperations = isChecked | ||
| ? [...keyOperations, signingAlgorithm] | ||
| : keyOperations.filter((op) => op !== signingAlgorithm); | ||
|
|
||
| setKeyOperations(updatedOperations); | ||
| onChange(updatedOperations); | ||
| }, | ||
| [keyOperations, onChange], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="grid grid-cols-1 gap-4 sm:grid-cols-3"> | ||
| {Object.values(SigningAlgorithms).map((signingAlgorithm) => ( | ||
| <OsdsCheckbox | ||
| key={signingAlgorithm} | ||
| checked={keyOperations?.includes(signingAlgorithm)} | ||
| onOdsCheckedChange={(event) => { | ||
| handleCheckboxChange(signingAlgorithm, event.detail.checked); | ||
| }} | ||
| > | ||
| <OsdsCheckboxButton color={ODS_THEME_COLOR_INTENT.primary}> | ||
| <span slot="end"> | ||
| <OsdsText color={ODS_THEME_COLOR_INTENT.primary}> | ||
| {signingAlgorithm} | ||
| </OsdsText> | ||
| </span> | ||
| </OsdsCheckboxButton> | ||
| </OsdsCheckbox> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
54 changes: 0 additions & 54 deletions
54
packages/manager/apps/pci-kubernetes/src/components/oidc/Chip.component.tsx
This file was deleted.
Oops, something went wrong.
27 changes: 0 additions & 27 deletions
27
packages/manager/apps/pci-kubernetes/src/components/oidc/Input.component.tsx
This file was deleted.
Oops, something went wrong.
88 changes: 88 additions & 0 deletions
88
packages/manager/apps/pci-kubernetes/src/components/oidc/InputFormField.component.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import { describe, it, vi, expect } from 'vitest'; | ||
| import { | ||
| InputFormField, | ||
| TinputFormFieldProps, | ||
| } from './InputFormField.component'; | ||
|
|
||
| vi.mock('@ovhcloud/ods-components/react', () => ({ | ||
| OsdsInput: vi.fn( | ||
| ({ className, onOdsValueChange, onOdsInputBlur, ...props }) => ( | ||
| <input | ||
| data-testid={props['data-testid']} | ||
| className={className} | ||
| onChange={(e) => onOdsValueChange && onOdsValueChange(e.target.value)} | ||
| onBlur={() => onOdsInputBlur && onOdsInputBlur()} | ||
| {...props} | ||
| /> | ||
| ), | ||
| ), | ||
| OsdsText: vi.fn(({ children, ...props }) => ( | ||
| <span data-testid={props['data-testid']} {...props}> | ||
| {children} | ||
| </span> | ||
| )), | ||
| })); | ||
|
|
||
| describe('InputFormField', () => { | ||
| const defaultProps: TinputFormFieldProps = { | ||
| name: 'testField', | ||
| value: 'Initial value', | ||
| placeholder: 'Enter text', | ||
| onOdsInputBlur: vi.fn(), | ||
| onOdsValueChange: vi.fn(), | ||
| error: false, | ||
| onChange: vi.fn(), | ||
| onBlur: vi.fn(), | ||
| }; | ||
|
|
||
| it('renders correctly with default props', () => { | ||
| render(<InputFormField {...defaultProps} />); | ||
|
|
||
| const input = screen.getByTestId('testField-input'); | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveValue('Initial value'); | ||
| expect(input).toHaveAttribute('placeholder', 'Enter text'); | ||
| expect(input).not.toHaveClass('bg-red-100'); | ||
| }); | ||
|
|
||
| it('applies error styles when error is true', () => { | ||
| render(<InputFormField {...defaultProps} error />); | ||
|
|
||
| const input = screen.getByTestId('testField-input'); | ||
| expect(input).toHaveClass('bg-red-100'); | ||
| }); | ||
|
|
||
| it('calls onChange when value changes', () => { | ||
| render(<InputFormField {...defaultProps} />); | ||
|
|
||
| const input = screen.getByTestId('testField-input'); | ||
| fireEvent.change(input, { target: { value: 'New value' } }); | ||
|
|
||
| expect(defaultProps.onOdsValueChange).toHaveBeenCalledWith('New value'); | ||
| }); | ||
|
|
||
| it('calls onBlur when focus is lost', () => { | ||
| render(<InputFormField {...defaultProps} />); | ||
|
|
||
| const input = screen.getByTestId('testField-input'); | ||
| fireEvent.blur(input); | ||
|
|
||
| expect(defaultProps.onOdsInputBlur).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('renders caption text when provided', () => { | ||
| render(<InputFormField {...defaultProps} caption="This is a caption" />); | ||
|
|
||
| const caption = screen.getByText('This is a caption'); | ||
| expect(caption).toBeInTheDocument(); | ||
| expect(caption).toHaveClass('mt-3'); | ||
| }); | ||
|
|
||
| it('passes additional props to OsdsInput', () => { | ||
| render(<InputFormField {...defaultProps} data-custom="customValue" />); | ||
|
|
||
| const input = screen.getByTestId('testField-input'); | ||
| expect(input).toHaveAttribute('data-custom', 'customValue'); | ||
| }); | ||
| }); |
Oops, something went wrong.