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

[v16] Web: remove s3 bucket option when creating/editing aws oidc integration #44485

Merged
merged 2 commits into from
Jul 22, 2024
Merged

[v16] Web: remove s3 bucket option when creating/editing aws oidc integration #44485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d0ece7
Web: remove s3 bucket option when creating/editing aws oidc integrati…
kimlisa Jul 20, 2024
af19c3b
Fix lint
kimlisa Jul 20, 2024
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
18 changes: 17 additions & 1 deletion web/packages/shared/components/ToolTip/ToolTip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,15 @@ export const ToolTipInfo: React.FC<
muteIconColor?: boolean;
sticky?: boolean;
maxWidth?: number;
kind?: 'info' | 'warning';
}>
> = ({
children,
trigger = 'hover',
muteIconColor,
sticky = false,
maxWidth = 350,
kind = 'info',
}) => {
const [anchorEl, setAnchorEl] = useState();
const open = Boolean(anchorEl);
Expand Down Expand Up @@ -71,7 +73,12 @@ export const ToolTipInfo: React.FC<
height: 18px;
`}
>
<InfoIcon $muteIconColor={muteIconColor} size="medium" />
{kind === 'info' && (
<InfoIcon $muteIconColor={muteIconColor} size="medium" />
)}
{kind === 'warning' && (
<WarningIcon $muteIconColor={muteIconColor} size="medium" />
)}
</span>
<Popover
modalCss={() =>
Expand Down Expand Up @@ -108,3 +115,12 @@ const InfoIcon = styled(Icons.Info)`
width: 18px;
color: ${p => (p.$muteIconColor ? p.theme.colors.text.disabled : 'inherit')};
`;

const WarningIcon = styled(Icons.Warning)<{ $muteIconColor?: boolean }>`
height: 18px;
width: 18px;
color: ${p =>
p.$muteIconColor
? p.theme.colors.text.disabled
: p.theme.colors.warning.main};
`;
176 changes: 43 additions & 133 deletions web/packages/teleport/src/Integrations/EditAwsOidcIntegrationDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {

import { EditAwsOidcIntegrationDialog } from './EditAwsOidcIntegrationDialog';

test('user acknowledging script was ran when s3 bucket fields are edited', async () => {
test('user acknowledging script was ran when reconfiguring', async () => {
render(
<EditAwsOidcIntegrationDialog
close={() => null}
Expand All @@ -37,8 +37,6 @@ test('user acknowledging script was ran when s3 bucket fields are edited', async
name: 'some-integration-name',
spec: {
roleArn: 'arn:aws:iam::123456789012:role/johndoe',
issuerS3Bucket: 'test-value',
issuerS3Prefix: '',
},
statusCode: IntegrationStatusCode.Running,
}}
Expand All @@ -49,56 +47,57 @@ test('user acknowledging script was ran when s3 bucket fields are edited', async
expect(screen.queryByTestId('scriptbox')).not.toBeInTheDocument();
expect(screen.queryByTestId('checkbox')).not.toBeInTheDocument();
expect(
screen.queryByRole('button', { name: /generate command/i })
screen.queryByRole('button', { name: /reconfigure/i })
).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();

// Fill in the s3 prefix field.
fireEvent.change(screen.getByPlaceholderText(/prefix/i), {
target: { value: 'test-value' },
// Check s3 related fields are not rendered.
expect(screen.queryByText(/not recommended/)).not.toBeInTheDocument();
expect(screen.queryByText('Amazon S3')).not.toBeInTheDocument();

// change role arn
fireEvent.change(screen.getByPlaceholderText(/arn:aws:iam:/i), {
target: { value: 'arn:aws:iam::123456789011:role/other' },
});

await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
expect(screen.getByRole('button', { name: /reconfigure/i })).toBeEnabled()
);
// When clicking on generate command:
// When clicking on reconfigure:
// - script rendered
// - checkbox to confirm user has ran command
// - edit button replaces generate command button
// - edit button replaces reconfigure button
// - save button still disabled
userEvent.click(screen.getByRole('button', { name: /generate command/i }));
await userEvent.click(screen.getByRole('button', { name: /reconfigure/i }));
await screen.findByRole('button', { name: /edit/i });
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
expect(
screen.queryByRole('button', { name: /generate command/i })
screen.queryByRole('button', { name: /reconfigure/i })
).not.toBeInTheDocument();
expect(screen.getByTestId('checkbox')).toBeInTheDocument();
expect(screen.getByTestId('scriptbox')).toBeInTheDocument();

// Click on checkbox should enable save button and disable edit button.
userEvent.click(screen.getByRole('checkbox'));
await userEvent.click(screen.getByRole('checkbox'));
await waitFor(() =>
expect(screen.getByRole('button', { name: /save/i })).toBeEnabled()
);
expect(screen.getByRole('button', { name: /edit/i })).toBeDisabled();

// Unchecking the checkbox should disable save button.
userEvent.click(screen.getByRole('checkbox'));
await userEvent.click(screen.getByRole('checkbox'));
await waitFor(() =>
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled()
);

// Click on edit, should replace it with generate command
userEvent.click(screen.getByRole('button', { name: /edit/i }));
// Click on edit, should replace it with reconfigure
await userEvent.click(screen.getByRole('button', { name: /edit/i }));
await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
expect(screen.getByRole('button', { name: /reconfigure/i })).toBeEnabled()
);
});

test('render warning on save when leaving s3 fields empty', async () => {
test('render warning when s3 buckets are present', async () => {
const edit = jest.fn(() => Promise.resolve());
render(
<EditAwsOidcIntegrationDialog
Expand All @@ -110,8 +109,8 @@ test('render warning on save when leaving s3 fields empty', async () => {
name: 'some-integration-name',
spec: {
roleArn: 'arn:aws:iam::123456789012:role/johndoe',
issuerS3Bucket: '',
issuerS3Prefix: '',
issuerS3Bucket: 'some-bucket',
issuerS3Prefix: 'some-prefix',
},
statusCode: IntegrationStatusCode.Running,
}}
Expand All @@ -122,108 +121,25 @@ test('render warning on save when leaving s3 fields empty', async () => {
expect(screen.queryByTestId('scriptbox')).not.toBeInTheDocument();
expect(screen.queryByTestId('checkbox')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
expect(
screen.queryByRole('button', { name: /generate command/i })
).not.toBeInTheDocument();

// Enable the generate command button by changing a field.
fireEvent.change(screen.getByPlaceholderText(/arn:aws:iam:/i), {
target: { value: 'arn:aws:iam::123456789012:role/someonelse' },
});
await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
);

expect(screen.queryByTestId('checkbox')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();

userEvent.click(screen.getByRole('button', { name: /generate command/i }));
await screen.findByRole('button', { name: /edit/i });
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();

userEvent.click(screen.getByTestId('checkbox'));
await waitFor(() =>
expect(screen.getByRole('button', { name: /save/i })).toBeEnabled()
);

// Clicking on save without defining s3 fields, should render
// a warning.
userEvent.click(screen.getByRole('button', { name: /save/i }));
await screen.findByText(/recommended to use an S3 bucket/i);
expect(edit).not.toHaveBeenCalled();

// Canceling and saving should re-render the warning.
userEvent.click(screen.getByRole('button', { name: /cancel/i }));
await screen.findByRole('button', { name: /save/i });

userEvent.click(screen.getByRole('button', { name: /save/i }));
await screen.findByText(/recommended to use an S3 bucket/i);

userEvent.click(screen.getByRole('button', { name: /continue/i }));
await waitFor(() => expect(edit).toHaveBeenCalledTimes(1));
});

test('render warning on save when deleting existing s3 fields', async () => {
const edit = jest.fn(() => Promise.resolve());
render(
<EditAwsOidcIntegrationDialog
close={() => null}
edit={edit}
integration={{
resourceType: 'integration',
kind: IntegrationKind.AwsOidc,
name: 'some-integration-name',
spec: {
roleArn: 'arn:aws:iam::123456789012:role/johndoe',
issuerS3Bucket: 'delete-me',
issuerS3Prefix: 'delete-me',
},
statusCode: IntegrationStatusCode.Running,
}}
/>
);

// Check s3 related fields/warnings are rendered.
expect(
screen.queryByRole('button', { name: /generate command/i })
).not.toBeInTheDocument();

// Delete the s3 fields.
fireEvent.change(screen.getByPlaceholderText(/bucket/i), {
target: { value: '' },
});
fireEvent.change(screen.getByPlaceholderText(/prefix/i), {
target: { value: '' },
});
await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
);

expect(screen.queryByTestId('checkbox')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();

userEvent.click(screen.getByRole('button', { name: /generate command/i }));
await screen.findByRole('button', { name: /edit/i });
expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
screen.getByRole('button', { name: /reconfigure/i })
).toBeInTheDocument();
expect(screen.getByText(/not recommended/)).toBeInTheDocument();
expect(screen.getByText(/Amazon S3 Location/)).toBeInTheDocument();

userEvent.click(screen.getByTestId('checkbox'));
await waitFor(() =>
expect(screen.getByRole('button', { name: /save/i })).toBeEnabled()
);
// Clicking on reconfigure should hide s3 fields.
await userEvent.click(screen.getByRole('button', { name: /reconfigure/i }));
await screen.findByText(/AWS CloudShell/);
expect(screen.queryByText(/not recommended/)).not.toBeInTheDocument();
expect(screen.queryByText('/Amazon S3 Location/')).not.toBeInTheDocument();

// Test for warning render.
userEvent.click(screen.getByRole('button', { name: /save/i }));
await screen.findByText(/recommended to use an S3 bucket/i);
expect(edit).not.toHaveBeenCalled();
expect(
screen.getByText(/recommended to use an S3 bucket/i)
).toBeInTheDocument();
// Clicking on edit, should render it back.
await userEvent.click(screen.getByRole('button', { name: /edit/i }));

userEvent.click(screen.getByRole('button', { name: /continue/i }));
await waitFor(() => expect(edit).toHaveBeenCalledTimes(1));
await screen.findByText(/not recommended/);
await screen.findByText(/Amazon S3 Location/);
});

test('edit invalid fields', async () => {
Expand All @@ -243,12 +159,10 @@ test('edit invalid fields', async () => {
});

await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
expect(screen.getByRole('button', { name: /reconfigure/i })).toBeEnabled()
);

userEvent.click(screen.getByRole('button', { name: /generate command/i }));
await userEvent.click(screen.getByRole('button', { name: /reconfigure/i }));
await screen.findByText(/invalid role ARN format/i);
});

Expand Down Expand Up @@ -278,25 +192,21 @@ test('edit submit called with proper fields', async () => {
});

await waitFor(() =>
expect(
screen.getByRole('button', { name: /generate command/i })
).toBeEnabled()
expect(screen.getByRole('button', { name: /reconfigure/i })).toBeEnabled()
);

userEvent.click(screen.getByRole('button', { name: /generate command/i }));
await userEvent.click(screen.getByRole('button', { name: /reconfigure/i }));
await screen.findByRole('button', { name: /edit/i });

userEvent.click(screen.getByTestId('checkbox'));
await userEvent.click(screen.getByTestId('checkbox'));
await waitFor(() =>
expect(screen.getByRole('button', { name: /save/i })).toBeEnabled()
);
userEvent.click(screen.getByRole('button', { name: /save/i }));
await userEvent.click(screen.getByRole('button', { name: /save/i }));
await waitFor(() => expect(mockEditFn).toHaveBeenCalledTimes(1));

expect(mockEditFn).toHaveBeenCalledWith({
roleArn: 'arn:aws:iam::123456789011:role/other',
s3Bucket: 'other-bucket',
s3Prefix: 'other-prefix',
});
});

Expand Down
Loading
Loading