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.

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

Add story for ResourceActionButton #52886

Merged
merged 3 commits into from
Mar 7, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
134 changes: 73 additions & 61 deletions web/packages/teleport/src/Apps/fixtures/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,69 @@

import makeApp from 'teleport/services/apps/makeApps';

export const awsConsoleApp = makeApp({
name: 'aws-console-1',
uri: 'https://console.aws.amazon.com/ec2/v2/home',
publicAddr: 'awsconsole-1.teleport-proxy.com',
labels: [
{ name: 'aws_account_id', value: 'A1234' },
{ name: 'env', value: 'dev' },
{ name: 'cluster', value: 'two' },
],
description: 'This is an AWS Console app',
awsConsole: true,
awsRoles: [
{
name: 'role name',
arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
display: 'EC2FullAccess',
},
{
name: 'other role name',
arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
display: 'ReallyLonReallyLonggggggEC2FullAccess',
},
{
name: 'thisthing',
arn: 'arn:aws:iam::joe123:role/EC2ReadOnly',
display: 'EC2ReadOnly',
},
...new Array(20).fill(undefined).map((_, index) => {
return {
name: `long-${index}`,
arc: `arn:aws:iam::${index}`,
display: `LONG${index}`,
};
}),
],
clusterId: 'one',
fqdn: 'awsconsole-1.com',
});

export const awsIamIcAccountApp = makeApp({
name: 'aws-iam-ic-account-1',
uri: 'https://console.aws.amazon.com',
publicAddr: 'console.aws.amazon.com',
subKind: 'aws-ic-account',
labels: [{ name: 'teleport.dev/origin', value: 'aws-identity-center' }],
description: 'This is an AWS IAM Identity Center account',
awsConsole: false,
permissionSets: [
{
name: 'Admin perm set',
arn: 'arn:aws:sso:::permissionSet/Admin',
display: 'Admin',
},
{
name: 'ReadOnly perm set',
arn: 'arn:aws:sso:::permissionSet/ReadOnly',
display: 'ReadOnly',
},
],
clusterId: 'one',
fqdn: 'https://console.aws.amazon.com',
});

export const apps = [
{
name: 'Jenkins',
Expand Down Expand Up @@ -138,44 +201,6 @@ export const apps = [
],
clusterId: 'one',
},
{
name: 'aws-console-1',
uri: 'https://console.aws.amazon.com/ec2/v2/home',
publicAddr: 'awsconsole-1.teleport-proxy.com',
labels: [
{ name: 'aws_account_id', value: 'A1234' },
{ name: 'env', value: 'dev' },
{ name: 'cluster', value: 'two' },
],
description: 'This is an AWS Console app',
awsConsole: true,
awsRoles: [
{
name: 'role name',
arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
display: 'EC2FullAccess',
},
{
name: 'other role name',
arn: 'arn:aws:iam::joe123:role/EC2FullAccess',
display: 'ReallyLonReallyLonggggggEC2FullAccess',
},
{
name: 'thisthing',
arn: 'arn:aws:iam::joe123:role/EC2ReadOnly',
display: 'EC2ReadOnly',
},
...new Array(20).fill(undefined).map((_, index) => {
return {
name: `long-${index}`,
arc: `arn:aws:iam::${index}`,
display: `LONG${index}`,
};
}),
],
clusterId: 'one',
fqdn: 'awsconsole-1.com',
},
{
name: 'Cloud',
uri: 'cloud://some-address',
Expand All @@ -187,29 +212,6 @@ export const apps = [
],
clusterId: 'one',
},
{
name: 'aws-iam-ic-account-1',
uri: 'https://console.aws.amazon.com',
publicAddr: 'console.aws.amazon.com',
subKind: 'aws-ic-account',
labels: [{ name: 'teleport.dev/origin', value: 'aws-identity-center' }],
description: 'This is an AWS IAM Identity Center account',
awsConsole: false,
permissionSets: [
{
name: 'Admin perm set',
arn: 'arn:aws:sso:::permissionSet/Admin',
display: 'Admin',
},
{
name: 'ReadOnly perm set',
arn: 'arn:aws:sso:::permissionSet/ReadOnly',
display: 'ReadOnly',
},
],
clusterId: 'one',
fqdn: 'https://console.aws.amazon.com',
},
{
name: 'aws-iam-ic-account-2',
uri: 'https://console.aws.amazon.com',
Expand All @@ -234,6 +236,15 @@ export const apps = [
fqdn: 'https://console.aws.amazon.com',
},
].map(makeApp);
apps.push(awsConsoleApp, awsIamIcAccountApp);

export const gcpCloudApp = makeApp({
name: 'cloud-app',
description: 'Cloud app (GCP)',
uri: 'cloud://GCP',
publicAddr: 'cloud-app.teleport.example.com',
fqdn: 'cloud-app.teleport.example.com',
});

export const moreApps = [
{
Expand Down Expand Up @@ -405,3 +416,4 @@ export const moreApps = [
clusterId: 'one',
},
].map(makeApp);
moreApps.push(gcpCloudApp);
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,15 @@ export interface SamlAppAction {
export const SamlAppActionContext = createContext<SamlAppAction>(null);

export function useSamlAppAction() {
return useContext(SamlAppActionContext);
const context = useContext(SamlAppActionContext);

if (!context) {
throw new Error(
'useSamlAppAction must be used within a SamlAppActionProvider'
);
}

return context;
Copy link
Member Author

Choose a reason for hiding this comment

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

This change should not change the behavior of the hook. Previously if there was no context, the callsite would throw an error while trying to destructure the return value. Now the function itself is going to throw a more meaningful error.

}

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/**
* Teleport
* Copyright (C) 2025 Gravitational, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { Meta } from '@storybook/react';
import { MemoryRouter } from 'react-router';

import { Flex, Stack, Text } from 'design';

import { ContextProvider } from 'teleport';
import {
awsConsoleApp,
awsIamIcAccountApp,
gcpCloudApp,
} from 'teleport/Apps/fixtures';
import { databases } from 'teleport/Databases/fixtures';
import { desktops } from 'teleport/Desktops/fixtures';
import { kubes } from 'teleport/Kubes/fixtures';
import { createTeleportContext } from 'teleport/mocks/contexts';
import { nodes } from 'teleport/Nodes/fixtures';
import { SamlAppActionProvider } from 'teleport/SamlApplications/useSamlAppActions';
import makeApp from 'teleport/services/apps/makeApps';

import { ResourceActionButton as Component } from './ResourceActionButton';

const meta: Meta = {
title: 'Teleport/UnifiedResources/ResourceActionButton',
decorators: Story => {
const ctx = createTeleportContext();

return (
<MemoryRouter>
<ContextProvider ctx={ctx}>
<SamlAppActionProvider>
<Story />
</SamlAppActionProvider>
</ContextProvider>
</MemoryRouter>
);
},
};
export default meta;

export function ResourceActionButton() {
return (
<Flex gap={4} flexWrap="wrap">
<Stack gap={3}>
<Stack>
<Text>TCP app</Text>
<Component
resource={makeApp({
uri: 'tcp://localhost:1234',
publicAddr: 'tcp-app.teleport.example.com',
name: 'tcp-app',
})}
/>
</Stack>

<Stack>
<Text>Web app</Text>
<Component
resource={makeApp({
uri: 'http://localhost:1234',
publicAddr: 'web-app.teleport.example.com',
name: 'web-app',
})}
/>
</Stack>

<Stack>
<Text>AWS console</Text>
<Component resource={awsConsoleApp} />
</Stack>

<Stack>
<Text>AWS IAM IC account</Text>
<Component resource={awsIamIcAccountApp} />
</Stack>

<Stack>
<Text>Cloud app (GCP)</Text>
<Component resource={gcpCloudApp} />
</Stack>

<Stack>
<Text>SAML app</Text>
<Component
resource={makeApp({
uri: 'http://localhost:300',
publicAddr: 'saml-app.teleport.example.com',
fqdn: 'saml-app.teleport.example.com',
name: 'saml-app',
samlApp: true,
})}
/>
</Stack>
</Stack>

<Stack>
<Text>Server</Text>
<Component resource={nodes[0]} />
</Stack>

<Stack>
<Text>Database</Text>
<Component resource={databases[0]} />
</Stack>

<Stack>
<Text>Kube</Text>
<Component resource={kubes[0]} />
</Stack>

<Stack>
<Text>Windows desktop</Text>
<Component resource={desktops[0]} />
</Stack>
</Flex>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import { Meta } from '@storybook/react';

import { Box, Flex, Text } from 'design';
import { HoverTooltip } from 'design/Tooltip';

import {
makeApp,
Expand Down Expand Up @@ -83,7 +84,7 @@ export function Story(props: StoryProps) {

function Buttons(props: StoryProps) {
return (
<Flex gap={4}>
<Flex gap={4} flexWrap="wrap">
<Flex gap={3} flexDirection="column">
<Box>
<Text>TCP app</Text>
Expand All @@ -101,6 +102,12 @@ function Buttons(props: StoryProps) {
<Text>AWS console</Text>
<AwsConsole />
</Box>
<HoverTooltip tipContent="Connect doesn't support cloud apps properly yet and shows them as TCP apps instead.">
<Box>
<Text>Cloud app (GCP)</Text>
<CloudApp />
</Box>
</HoverTooltip>
<Box>
<Text>SAML app</Text>
<SamlApp />
Expand Down Expand Up @@ -218,6 +225,17 @@ function AwsConsole() {
);
}

function CloudApp() {
return (
<ConnectAppActionButton
app={makeApp({
endpointUri: 'cloud://GCP',
uri: `${testCluster.uri}/apps/bar`,
})}
/>
);
}

function SamlApp() {
return (
<ConnectAppActionButton
Expand Down
Loading