Add user task table

web/packages/design/src/Tabs/Tabs.ts

@@ -0,0 +1,57 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 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 { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const TabsContainer = styled.div`
+  position: relative;
+  display: flex;
+  gap: ${p => p.theme.space[5]}px;
+  align-items: center;
+  padding: 0 ${p => p.theme.space[5]}px;
+  border-bottom: 1px solid ${p => p.theme.colors.spotBackground[0]};
+`;
+
+export const TabContainer = styled(NavLink)<{ selected?: boolean }>`
+  padding: ${p => p.theme.space[1] + p.theme.space[2]}px
+    ${p => p.theme.space[2]}px;
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+  opacity: ${p => (p.selected ? 1 : 0.5)};
+  transition: opacity 0.3s linear;
+  color: ${p => p.theme.colors.text.main};
+  font-weight: 300;
+  font-size: 22px;
+  line-height: ${p => p.theme.space[5]}px;
+  white-space: nowrap;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export const TabBorder = styled.div`
+  position: absolute;
+  bottom: -1px;
+  background: ${p => p.theme.colors.brand};
+  height: 2px;
+  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+`;

web/packages/teleport/package.json

@@ -39,7 +39,8 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "create-react-class": "^15.6.3",
-    "events": "3.3.0"
+    "events": "3.3.0",
+    "react-markdown": "^9.0.3"
   },
   "devDependencies": {
     "@gravitational/build": "workspace:*",

web/packages/teleport/src/Integrations/IntegrationList.tsx

@@ -69,7 +69,7 @@ export function IntegrationList(props: Props<IntegrationLike>) {
   }
 
   function getRowStyle(row: IntegrationLike): React.CSSProperties {
-    if (row.kind !== 'okta') return;
+    if (row.kind !== 'okta' && row.kind !== IntegrationKind.AwsOidc) return;
     return { cursor: 'pointer' };
   }
 

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.story.tsx

@@ -16,15 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { addHours } from 'date-fns';
-
 import { AwsOidcDashboard } from 'teleport/Integrations/status/AwsOidc/AwsOidcDashboard';
-import { MockAwsOidcStatusProvider } from 'teleport/Integrations/status/AwsOidc/testHelpers/mockAwsOidcStatusProvider';
-import { AwsOidcStatusContextState } from 'teleport/Integrations/status/AwsOidc/useAwsOidcStatus';
 import {
-  IntegrationKind,
-  ResourceTypeSummary,
-} from 'teleport/services/integrations';
+  makeMockAwsOidcStatusContextState,
+  MockAwsOidcStatusProvider,
+} from 'teleport/Integrations/status/AwsOidc/testHelpers/mockAwsOidcStatusProvider';
 
 export default {
   title: 'Teleport/Integrations/AwsOidc',
@@ -33,15 +29,15 @@ export default {
 // Loaded dashboard with data for each aws resource and a navigation header
 export function Dashboard() {
   return (
-    <MockAwsOidcStatusProvider value={makeAwsOidcStatusContextState()}>
+    <MockAwsOidcStatusProvider value={makeMockAwsOidcStatusContextState()}>
       <AwsOidcDashboard />
     </MockAwsOidcStatusProvider>
   );
 }
 
 // Loaded dashboard with missing data for each aws resource and a navigation header
 export function DashboardMissingData() {
-  const state = makeAwsOidcStatusContextState();
+  const state = makeMockAwsOidcStatusContextState();
   state.statsAttempt.data.awseks = undefined;
   state.statsAttempt.data.awsrds = undefined;
   state.statsAttempt.data.awsec2 = undefined;
@@ -54,7 +50,7 @@ export function DashboardMissingData() {
 
 // Loading screen
 export function StatsProcessing() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     statsAttempt: { status: 'processing', data: null, statusText: '' },
   });
   return (
@@ -66,7 +62,7 @@ export function StatsProcessing() {
 
 // No header, no loading indicator
 export function IntegrationProcessing() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     integrationAttempt: {
       status: 'processing',
       data: null,
@@ -82,7 +78,7 @@ export function IntegrationProcessing() {
 
 // Loaded error message
 export function StatsFailed() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     statsAttempt: {
       status: 'error',
       data: null,
@@ -99,11 +95,11 @@ export function StatsFailed() {
 
 // Loaded dashboard with data for each aws resource but no navigation header
 export function IntegrationFailed() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     integrationAttempt: {
       status: 'error',
       data: null,
-      statusText: 'failed  to get integration',
+      statusText: 'failed to get integration',
       error: {},
     },
   });
@@ -116,7 +112,7 @@ export function IntegrationFailed() {
 
 // Blank screen
 export function StatsNoData() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     statsAttempt: { status: 'success', data: null, statusText: '' },
   });
   return (
@@ -128,7 +124,7 @@ export function StatsNoData() {
 
 // No header, no loading indicator
 export function IntegrationNoData() {
-  const props = makeAwsOidcStatusContextState({
+  const props = makeMockAwsOidcStatusContextState({
     integrationAttempt: {
       status: 'success',
       data: null,
@@ -141,59 +137,3 @@ export function IntegrationNoData() {
     </MockAwsOidcStatusProvider>
   );
 }
-
-function makeAwsOidcStatusContextState(
-  overrides: Partial<AwsOidcStatusContextState> = {}
-): AwsOidcStatusContextState {
-  return Object.assign(
-    {
-      integrationAttempt: {
-        status: 'success',
-        statusText: '',
-        data: {
-          resourceType: 'integration',
-          name: 'integration-one',
-          kind: IntegrationKind.AwsOidc,
-          spec: {
-            roleArn: 'arn:aws:iam::111456789011:role/bar',
-          },
-          statusCode: 1,
-        },
-      },
-      statsAttempt: {
-        status: 'success',
-        statusText: '',
-        data: {
-          name: 'integration-one',
-          subKind: IntegrationKind.AwsOidc,
-          awsoidc: {
-            roleArn: 'arn:aws:iam::111456789011:role/bar',
-          },
-          awsec2: makeResourceTypeSummary(),
-          awsrds: makeResourceTypeSummary(),
-          awseks: makeResourceTypeSummary(),
-        },
-      },
-    },
-    overrides
-  );
-}
-
-function makeResourceTypeSummary(
-  overrides: Partial<ResourceTypeSummary> = {}
-): ResourceTypeSummary {
-  return Object.assign(
-    {
-      rulesCount: Math.floor(Math.random() * 100),
-      resourcesFound: Math.floor(Math.random() * 100),
-      resourcesEnrollmentFailed: Math.floor(Math.random() * 100),
-      resourcesEnrollmentSuccess: Math.floor(Math.random() * 100),
-      discoverLastSync: addHours(
-        new Date().getTime(),
-        -Math.floor(Math.random() * 100)
-      ),
-      ecsDatabaseServiceCount: Math.floor(Math.random() * 100),
-    },
-    overrides
-  );
-}

web/packages/teleport/src/Integrations/status/AwsOidc/AwsOidcDashboard.test.tsx

@@ -77,19 +77,34 @@ test('renders header and stats cards', () => {
             },
           },
         },
+        tasksAttempt: {
+          status: 'success',
+          statusText: '',
+          data: {
+            items: [],
+            nextKey: '',
+          },
+        },
       }}
     >
       <AwsOidcDashboard />
     </MockAwsOidcStatusProvider>
   );
 
-  expect(screen.getByRole('link', { name: 'back' })).toHaveAttribute(
+  const breadcrumbs = screen.getByTestId('aws-oidc-header');
+  expect(within(breadcrumbs).getByText('integration-one')).toBeInTheDocument();
+
+  const title = screen.getByTestId('aws-oidc-title');
+  expect(within(title).getByRole('link', { name: 'back' })).toHaveAttribute(
     'href',
     '/web/integrations'
   );
-  expect(screen.getByText('integration-one')).toBeInTheDocument();
-  expect(screen.getByLabelText('status')).toHaveAttribute('kind', 'success');
-  expect(screen.getByLabelText('status')).toHaveTextContent('Running');
+  expect(within(title).getByLabelText('status')).toHaveAttribute(
+    'kind',
+    'success'
+  );
+  expect(within(title).getByLabelText('status')).toHaveTextContent('Running');
+  expect(within(title).getByText('integration-one')).toBeInTheDocument();
 
   const ec2 = screen.getByTestId('ec2-stats');
   expect(within(ec2).getByTestId('sync')).toHaveTextContent(
@@ -136,3 +151,74 @@ test('renders header and stats cards', () => {
     'Failed Clusters 0'
   );
 });
+
+test('renders enroll cards', () => {
+  const zeroCount = {
+    rulesCount: 0,
+    resourcesFound: 0,
+    resourcesEnrollmentFailed: 0,
+    resourcesEnrollmentSuccess: 0,
+    discoverLastSync: new Date().getTime(),
+    ecsDatabaseServiceCount: 0,
+  };
+
+  render(
+    <MockAwsOidcStatusProvider
+      value={{
+        integrationAttempt: {
+          status: 'success',
+          statusText: '',
+          data: {
+            resourceType: 'integration',
+            name: 'integration-one',
+            kind: IntegrationKind.AwsOidc,
+            spec: {
+              roleArn: 'arn:aws:iam::111456789011:role/bar',
+            },
+            statusCode: 1,
+          },
+        },
+        statsAttempt: {
+          status: 'success',
+          statusText: '',
+          data: {
+            name: 'integration-one',
+            subKind: IntegrationKind.AwsOidc,
+            awsoidc: {
+              roleArn: 'arn:aws:iam::111456789011:role/bar',
+            },
+            awsec2: zeroCount,
+            awsrds: zeroCount,
+            awseks: zeroCount,
+          },
+        },
+        tasksAttempt: {
+          status: 'success',
+          statusText: '',
+          data: {
+            items: [],
+            nextKey: '',
+          },
+        },
+      }}
+    >
+      <AwsOidcDashboard />
+    </MockAwsOidcStatusProvider>
+  );
+
+  expect(
+    within(screen.getByTestId('ec2-enroll')).getByRole('button', {
+      name: 'Enroll EC2',
+    })
+  ).toBeInTheDocument();
+  expect(
+    within(screen.getByTestId('rds-enroll')).getByRole('button', {
+      name: 'Enroll RDS',
+    })
+  ).toBeInTheDocument();
+  expect(
+    within(screen.getByTestId('eks-enroll')).getByRole('button', {
+      name: 'Enroll EKS',
+    })
+  ).toBeInTheDocument();
+});