@aws/nx-plugin 0.70.0 → 0.71.0

package/src/ts/react-website/cognito-auth/__snapshots__/generator.terraform.spec.ts.snap

@@ -0,0 +1,259 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`cognito-auth generator terraform iacProvider > should generate terraform files for cognito auth and snapshot them > terraform-cognito-auth-files 1`] = `
+{
+  "add-callback-url.tf": "terraform {
+  required_providers {
+    aws = {
+      source  = "hashicorp/aws"
+      version = "~> 6.0"
+    }
+  }
+}
+
+# Variables
+variable "callback_url" {
+  description = "Callback URL to add (e.g., https://d123456789.cloudfront.net)"
+  type        = string
+}
+
+# Read runtime config to get user pool client details
+module "runtime_config_reader" {
+  source = "../../runtime-config/read"
+}
+
+# Extract cognito details from runtime config
+locals {
+  cognito_props = try(module.runtime_config_reader.config.cognitoProps, null)
+
+  user_pool_id        = local.cognito_props != null ? local.cognito_props.userPoolId : null
+  user_pool_client_id = local.cognito_props != null ? local.cognito_props.userPoolWebClientId : null
+}
+
+# Validation: Ensure cognito props exist in runtime config
+resource "terraform_data" "validate_cognito_props" {
+  lifecycle {
+    precondition {
+      condition     = local.cognito_props != null
+      error_message = "ERROR: cognitoProps not found in runtime config. Ensure user-identity module has been deployed first and has added cognitoProps to the runtime configuration."
+    }
+
+    precondition {
+      condition     = local.user_pool_id != null && local.user_pool_id != ""
+      error_message = "ERROR: cognitoProps.userPoolId is missing or empty in runtime config. Check that user-identity module completed successfully."
+    }
+
+    precondition {
+      condition     = local.user_pool_client_id != null && local.user_pool_client_id != ""
+      error_message = "ERROR: cognitoProps.userPoolWebClientId is missing or empty in runtime config. Check that user-identity module completed successfully."
+    }
+  }
+}
+
+
+# Update the user pool client with additional callback URL
+resource "null_resource" "add_callback_url" {
+  triggers = {
+    callback_url        = var.callback_url
+    user_pool_id        = local.user_pool_id
+    user_pool_client_id = local.user_pool_client_id
+  }
+
+  provisioner "local-exec" {
+    command = <<-EOT
+      uv run --with boto3 python -c "
+import boto3
+import sys
+
+# Configuration
+user_pool_id = '\${local.user_pool_id}'
+client_id = '\${local.user_pool_client_id}'
+new_callback_url = '\${var.callback_url}'
+
+# Initialize Cognito client
+cognito = boto3.client('cognito-idp')
+
+try:
+    # Get current user pool client configuration
+    response = cognito.describe_user_pool_client(
+        UserPoolId=user_pool_id,
+        ClientId=client_id
+    )
+
+    client_config = response['UserPoolClient']
+    current_callback_urls = client_config.get('CallbackURLs', [])
+    current_logout_urls = client_config.get('LogoutURLs', [])
+
+    # Check if URL already exists
+    if new_callback_url in current_callback_urls:
+        print(f'Callback URL {new_callback_url} already exists')
+    else:
+        # Add new URL to both callback and logout URLs
+        updated_callback_urls = current_callback_urls + [new_callback_url]
+        updated_logout_urls = current_logout_urls + [new_callback_url]
+
+        # Update the user pool client
+        # Only include valid update parameters (exclude read-only fields and ones we're setting)
+        valid_update_params = [
+            'ClientName', 'RefreshTokenValidity', 'AccessTokenValidity', 'IdTokenValidity',
+            'TokenValidityUnits', 'ReadAttributes', 'WriteAttributes', 'ExplicitAuthFlows',
+            'SupportedIdentityProviders', 'DefaultRedirectURI', 'AllowedOAuthFlows',
+            'AllowedOAuthScopes', 'AllowedOAuthFlowsUserPoolClient', 'AnalyticsConfiguration',
+            'PreventUserExistenceErrors', 'EnableTokenRevocation',
+            'EnablePropagateAdditionalUserContextData', 'AuthSessionValidity', 'RefreshTokenRotation'
+        ]
+
+        update_config = {k: v for k, v in client_config.items() if k in valid_update_params}
+
+        cognito.update_user_pool_client(
+            UserPoolId=user_pool_id,
+            ClientId=client_id,
+            CallbackURLs=updated_callback_urls,
+            LogoutURLs=updated_logout_urls,
+            **update_config
+        )
+
+        print(f'Successfully added callback URL: {new_callback_url}')
+
+except Exception as e:
+    print(f'Error updating callback URLs: {e}')
+    sys.exit(1)
+"
+    EOT
+  }
+
+  depends_on = [terraform_data.validate_cognito_props]
+}
+
+",
+  "user-identity.tf": "module "identity" {
+  source = "./identity"
+
+  user_pool_domain_prefix = "test"
+  allow_signup = true
+}
+
+# Outputs
+output "region" {
+  description = "AWS region"
+  value       = module.identity.region
+}
+
+output "user_pool_id" {
+  description = "ID of the Cognito User Pool"
+  value       = module.identity.user_pool_id
+}
+
+output "user_pool_arn" {
+  description = "ARN of the Cognito User Pool"
+  value       = module.identity.user_pool_arn
+}
+
+output "user_pool_client_id" {
+  description = "ID of the Cognito User Pool Client"
+  value       = module.identity.user_pool_client_id
+}
+
+output "identity_pool_id" {
+  description = "ID of the Cognito Identity Pool"
+  value       = module.identity.identity_pool_id
+}
+
+output "authenticated_role_name" {
+  description = "Name of the authenticated IAM role"
+  value       = module.identity.authenticated_role_name
+}
+
+output "authenticated_role_arn" {
+  description = "ARN of the authenticated IAM role"
+  value       = module.identity.authenticated_role_arn
+}
+
+output "user_pool_domain" {
+  description = "Domain of the Cognito User Pool"
+  value       = module.identity.user_pool_domain
+}
+",
+}
+`;
+
+exports[`cognito-auth generator terraform iacProvider > should place add-callback-url module directly after cloudfront distribution resource > complex-static-website-with-callback-url 1`] = `
+"
+# Some initial resources
+resource "aws_s3_bucket" "website" {
+  bucket = "test-bucket"
+}
+
+resource "aws_cloudfront_distribution" "website" {
+  origin {
+    domain_name = aws_s3_bucket.website.bucket_regional_domain_name
+    origin_id   = "S3-\${aws_s3_bucket.website.id}"
+  }
+
+  enabled             = true
+  is_ipv6_enabled     = true
+  default_root_object = "index.html"
+
+  default_cache_behavior {
+    allowed_methods        = ["DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT"]
+    cached_methods         = ["GET", "HEAD"]
+    target_origin_id       = "S3-\${aws_s3_bucket.website.id}"
+    compress               = true
+    viewer_protocol_policy = "redirect-to-https"
+  }
+
+  restrictions {
+    geo_restriction {
+      restriction_type = "none"
+    }
+  }
+
+  viewer_certificate {
+    cloudfront_default_certificate = true
+  }
+}
+
+# Add CloudFront domain to user pool client callback URLs
+module "add_callback_url" {
+  source = "../user-identity/add-callback-url"
+
+  callback_url = "https://\${aws_cloudfront_distribution.website.domain_name}"
+
+  depends_on = [aws_cloudfront_distribution.website]
+}
+
+# S3 Bucket Policy for CloudFront OAC
+resource "aws_s3_bucket_policy" "website_cloudfront_policy" {
+  bucket = aws_s3_bucket.website.id
+  policy = jsonencode({
+    Version = "2012-10-17"
+    Statement = [
+      {
+        Effect = "Allow"
+        Principal = {
+          Service = "cloudfront.amazonaws.com"
+        }
+        Action   = "s3:GetObject"
+        Resource = "\${aws_s3_bucket.website.arn}/*"
+      }
+    ]
+  })
+}
+
+# Some outputs
+output "website_bucket_name" {
+  value = aws_s3_bucket.website.bucket
+}
+      "
+`;
+
+exports[`cognito-auth generator terraform iacProvider > should update static-website.tf with add-callback-url module > static-website-with-callback-url 1`] = `
+"
+module "static_website" {
+  source = "../../../core/static-website"
+
+  website_name = "test-project"
+  build_path   = "dist/packages/test-project"
+}
+      "
+`;

package/src/ts/react-website/cognito-auth/__snapshots__/generator.ux-provider.spec.ts.snap

@@ -0,0 +1,335 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`cognito-auth generator uxProvider tests > Cloudscape > should update AppLayout > app-layout-with-auth 1`] = `
+"import { useAuth } from 'react-oidc-context';
+import * as React from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
+import { NavItems } from './navitems';
+import Config from '../../config';
+
+import {
+  BreadcrumbGroup,
+  BreadcrumbGroupProps,
+  SideNavigation,
+  TopNavigation,
+} from '@cloudscape-design/components';
+
+import CloudscapeAppLayout, {
+  AppLayoutProps,
+} from '@cloudscape-design/components/app-layout';
+
+import { matchByPath, useLocation, useNavigate } from '@tanstack/react-router';
+import { Outlet } from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchByPath(r, href, {}));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+export interface AppLayoutContext {
+  appLayoutProps: AppLayoutProps;
+  setAppLayoutProps: (props: AppLayoutProps) => void;
+  displayHelpPanel: (helpContent: React.ReactNode) => void;
+}
+
+/**
+ * Context for updating/retrieving the AppLayout.
+ */
+export const AppLayoutContext = createContext({
+  appLayoutProps: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAppLayoutProps: (_: AppLayoutProps) => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  displayHelpPanel: (_: React.ReactNode) => {},
+});
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC = () => {
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const navigate = useNavigate();
+  const appLayout = React.useRef<AppLayoutProps.Ref>(null);
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    BreadcrumbGroupProps.Item[]
+  >([{ text: '/', href: '/' }]);
+  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
+  const { pathname, search } = useLocation();
+  const setAppLayoutPropsSafe = useCallback(
+    (props: AppLayoutProps) => {
+      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
+        setAppLayoutProps(props);
+    },
+    [appLayoutProps],
+  );
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      '/',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [pathname, search]);
+  const onNavigate = useCallback(
+    (
+      e: CustomEvent<{
+        href: string;
+        external?: boolean;
+      }>,
+    ) => {
+      if (!e.detail.external) {
+        e.preventDefault();
+        setAppLayoutPropsSafe({
+          contentType: undefined,
+        });
+        navigate({ to: e.detail.href });
+      }
+    },
+    [navigate, setAppLayoutPropsSafe],
+  );
+  return (
+    <AppLayoutContext.Provider
+      value={{
+        appLayoutProps,
+        setAppLayoutProps: setAppLayoutPropsSafe,
+        displayHelpPanel: (helpContent: React.ReactNode) => {
+          setAppLayoutPropsSafe({ tools: helpContent, toolsHide: false });
+          appLayout.current?.openTools();
+        },
+      }}
+    >
+      <TopNavigation
+        identity={{
+          href: '/',
+          title: Config.applicationName,
+          logo: {
+            src: Config.logo,
+          },
+        }}
+        utilities={[
+          {
+            type: 'menu-dropdown',
+            text: \`\${user?.profile?.['cognito:username']}\`,
+            iconName: 'user-profile-active',
+            onItemClick: (e) => {
+              if (e.detail.id === 'signout') {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }
+            },
+            items: [{ id: 'signout', text: 'Sign out' }],
+          },
+        ]}
+      />
+      <CloudscapeAppLayout
+        ref={appLayout}
+        breadcrumbs={
+          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
+        }
+        toolsHide
+        navigation={
+          <SideNavigation
+            header={{ text: Config.applicationName, href: '/' }}
+            activeHref={pathname}
+            onFollow={onNavigate}
+            items={NavItems}
+          />
+        }
+        content={<Outlet />}
+        {...appLayoutProps}
+      />
+    </AppLayoutContext.Provider>
+  );
+};
+
+export default AppLayout;
+"
+`;
+
+exports[`cognito-auth generator uxProvider tests > None > should update AppLayout > app-layout-with-auth 1`] = `
+"import { useAuth } from 'react-oidc-context';
+import * as React from 'react';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import Config from '../../config';
+import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  matchRoute: ReturnType<typeof useMatchRoute>,
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchRoute({ to: href }));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    {
+      href: string;
+      text: string;
+    }[]
+  >([{ text: '/', href: '/' }]);
+  const matchRoute = useMatchRoute();
+  const { pathname, search } = useLocation();
+  const navItems = useMemo(() => [{ to: '/', label: 'Home' }], []);
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      matchRoute,
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      'Home',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [matchRoute, pathname, search]);
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="app-header-inner">
+          <div className="brand">
+            <a href="/">
+              <img
+                src={Config.logo}
+                alt={\`\${Config.applicationName} logo\`}
+                className="brand-logo"
+              />
+              <span className="brand-name">{Config.applicationName}</span>
+            </a>
+          </div>
+
+          <nav className="app-nav">
+            {navItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={pathname === item.to ? 'active' : undefined}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="user-greeting">
+            <span>Hi, {\`\${user?.profile?.['cognito:username']}\`}</span>
+            <button
+              type="button"
+              className="signout-link"
+              onClick={() => {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }}
+            >
+              Sign out
+            </button>
+          </div>
+          <div className="user-greeting">
+            <span>Hi, {\`\${user?.profile?.['cognito:username']}\`}</span>
+            <button
+              type="button"
+              className="signout-link"
+              onClick={() => {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }}
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </header>
+      <main className="app-main">
+        <nav className="breadcrumbs" aria-label="Breadcrumb">
+          {activeBreadcrumbs.map((crumb, index) => (
+            <span className="breadcrumb-segment" key={crumb.href || index}>
+              {index > 0 && <span className="breadcrumb-separator">/</span>}
+              {index === activeBreadcrumbs.length - 1 ? (
+                <span className="breadcrumb-current">{crumb.text}</span>
+              ) : (
+                <Link to={crumb.href}>{crumb.text}</Link>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        <section className="card">{children}</section>
+      </main>
+    </div>
+  );
+};
+
+export default AppLayout;
+"
+`;

package/src/utils/files/common/shadcn/src/components/ui/breadcrumb.tsx.template

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
 
 import { cn } from "<%= scopeAlias %>common-shadcn/lib/utils"
 
@@ -38,7 +38,7 @@ function BreadcrumbLink({
 }: React.ComponentProps<"a"> & {
   asChild?: boolean
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot.Root : "a"
 
   return (
     <Comp

package/src/utils/files/common/shadcn/src/components/ui/button.tsx.template

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
 
 import { cn } from "<%= scopeAlias %>common-shadcn/lib/utils"
 
@@ -22,9 +22,11 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
       },
@@ -46,7 +48,7 @@ function Button({
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp

package/src/utils/files/common/shadcn/src/components/ui/separator.tsx.template

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { Separator as SeparatorPrimitive } from "radix-ui"
 
 import { cn } from "<%= scopeAlias %>common-shadcn/lib/utils"
 

package/src/utils/files/common/shadcn/src/components/ui/sheet.tsx.template

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
+import { Dialog as SheetPrimitive } from "radix-ui"
 
 import { cn } from "<%= scopeAlias %>common-shadcn/lib/utils"
 
@@ -48,9 +48,11 @@ function SheetContent({
   className,
   children,
   side = "right",
+  showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
 }) {
   return (
     <SheetPortal>
@@ -72,10 +74,12 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
   )