@aws/nx-plugin 0.1.6 → 0.2.1

package/src/cloudscape-website/app/files/app/src/layouts/App/index.tsx.template

@@ -1,8 +1,3 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import { useCognitoAuthContext } from '@aws-northstar/ui';
-import getBreadcrumbs from '@aws-northstar/ui/components/AppLayout/utils/getBreadcrumbs';
-import NavHeader from '@aws-northstar/ui/components/AppLayout/components/NavHeader';
 import * as React from 'react';
 import { createContext, useCallback, useEffect, useState } from 'react';
 import { NavItems } from './navitems';
@@ -13,11 +8,42 @@ import {
   BreadcrumbGroup,
   BreadcrumbGroupProps,
   SideNavigation,
+  TopNavigation,
 } from '@cloudscape-design/components';
 import AppLayout, {
   AppLayoutProps,
 } from '@cloudscape-design/components/app-layout';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+
+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) => matchPath(r, href));
+
+    return {
+      href: matched ? `${href}${search}` : '#',
+      text: segment,
+    };
+  });
+};
 
 /**
  * Context for updating/retrieving the AppLayout.
@@ -32,10 +58,6 @@ export const AppLayoutContext = createContext({
  * Defines the App layout and contains logic for routing.
  */
 const App: React.FC = () => {
-  const [username, setUsername] = useState<string | undefined>();
-  const [email, setEmail] = useState<string | undefined>();
-  const { getAuthenticatedUser } = useCognitoAuthContext();
-
   const navigate = useNavigate();
   const [activeHref, setActiveHref] = useState('/');
   const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
@@ -44,17 +66,6 @@ const App: React.FC = () => {
   const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
   const location = useLocation();
 
-  useEffect(() => {
-    const authUser = getAuthenticatedUser();
-    setUsername(authUser?.getUsername());
-
-    authUser?.getSession(() => {
-      authUser.getUserAttributes((_, attributes) => {
-        setEmail(attributes?.find((a) => a.Name === 'email')?.Value);
-      });
-    });
-  }, [getAuthenticatedUser, setUsername, setEmail]);
-
   const setAppLayoutPropsSafe = useCallback(
     (props: AppLayoutProps) => {
       JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
@@ -75,9 +86,6 @@ const App: React.FC = () => {
         e.preventDefault();
         setAppLayoutPropsSafe({
           contentType: undefined,
-          splitPanelOpen: false,
-          splitPanelSize: undefined,
-          splitPanelPreferences: undefined,
         });
         navigate(e.detail.href);
       }
@@ -89,23 +97,14 @@ const App: React.FC = () => {
     <AppLayoutContext.Provider
       value={{ appLayoutProps, setAppLayoutProps: setAppLayoutPropsSafe }}
     >
-      <NavHeader
-        title={Config.applicationName}
-        logo={Config.logo}
-        user={
-          username
-            ? {
-                username,
-                email,
-              }
-            : undefined
-        }
-        onSignout={() =>
-          new Promise(() => {
-            getAuthenticatedUser()?.signOut();
-            window.location.href = '/';
-          })
-        }
+      <TopNavigation
+        identity={{
+          href: '/',
+          title: Config.applicationName,
+          logo: {
+            src: Config.logo,
+          },
+        }}
       />
       <AppLayout
         breadcrumbs={
@@ -121,8 +120,6 @@ const App: React.FC = () => {
           />
         }
         content={<Routes />}
-        splitPanelOpen={false}
-        splitPanelPreferences={{ position: 'bottom' }}
         {...appLayoutProps}
       />
     </AppLayoutContext.Provider>

package/src/cloudscape-website/app/files/app/src/layouts/App/navitems.ts.template

@@ -1,8 +1,8 @@
-import { SideNavigationProps } from "@cloudscape-design/components";
+import { SideNavigationProps } from '@cloudscape-design/components';
 
 /**
  * Define your Navigation Items here
  */
 export const NavItems: SideNavigationProps.Item[] = [
-  { text: "Home", type: "link", href: "/" }
-];
+  { text: 'Home', type: 'link', href: '/' },
+];

package/src/cloudscape-website/app/files/app/src/layouts/Routes/index.tsx.template

@@ -1,8 +1,6 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import * as React from "react";
-import { Route, Routes as ReactRoutes } from "react-router-dom";
-import Home from "../../pages/Home";
+import * as React from 'react';
+import { Route, Routes as ReactRoutes } from 'react-router-dom';
+import Home from '../../pages/Home';
 
 /**
  * Defines the Routes.
@@ -15,4 +13,4 @@ const Routes: React.FC = () => {
   );
 };
 
-export default Routes;
+export default Routes;

package/src/cloudscape-website/app/files/app/src/main.tsx.template

@@ -1,6 +1,3 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import { NorthStarThemeProvider } from '@aws-northstar/ui';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
@@ -8,16 +5,16 @@ import { I18nProvider } from '@cloudscape-design/components/i18n';
 import messages from '@cloudscape-design/components/i18n/messages/all.en';
 import App from './layouts/App';
 
+import '@cloudscape-design/global-styles/index.css';
+
 const root = document.getElementById('root');
 root &&
   createRoot(root).render(
     <React.StrictMode>
-      <NorthStarThemeProvider>
-        <I18nProvider locale="en" messages={[messages]}>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </I18nProvider>
-      </NorthStarThemeProvider>
+      <I18nProvider locale="en" messages={[messages]}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </I18nProvider>
     </React.StrictMode>
   );

package/src/cloudscape-website/app/files/app/src/pages/Home/index.tsx.template

@@ -1,5 +1,3 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
 import {
   Container,
   ContentLayout,

package/src/cloudscape-website/app/files/common/constructs/src/app/static-websites/__websiteNameKebabCase__.ts.template

@@ -0,0 +1,13 @@
+import * as url from 'url';
+import { Construct } from 'constructs';
+import { StaticWebsite } from '../../core/index.js';
+
+export class <%= websiteNameClassName %> extends StaticWebsite {
+  constructor(scope: Construct, id: string) {
+    super(scope, id, {
+      websiteFilePath: url.fileURLToPath(
+        new URL('../../../../../../<%= websiteContentPath %>', import.meta.url)
+      ),
+    });
+  }
+}

package/src/cloudscape-website/app/files/common/constructs/src/{__websiteNameKebabCase__ → core}/static-website.ts.template

@@ -1,8 +1,4 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import * as url from 'url';
-import { PDKNag } from '@aws/pdk/pdk-nag';
-import { CfnJson, CfnOutput, Lazy, RemovalPolicy, Stack, Token } from 'aws-cdk-lib';
+import { CfnJson, CfnOutput, RemovalPolicy, Stack, Token } from 'aws-cdk-lib';
 import { Distribution, ViewerProtocolPolicy } from 'aws-cdk-lib/aws-cloudfront';
 import { S3BucketOrigin } from 'aws-cdk-lib/aws-cloudfront-origins';
 import {
@@ -13,13 +9,16 @@ import {
   ObjectOwnership,
 } from 'aws-cdk-lib/aws-s3';
 import { BucketDeployment, Source } from 'aws-cdk-lib/aws-s3-deployment';
-import { NagSuppressions } from 'cdk-nag';
 import { Construct } from 'constructs';
-import { CloudfrontWebAcl } from './cloudfront-web-acl.js';
-import { RuntimeConfig } from '../runtime-config/index.js';
-
+import { RuntimeConfig } from './runtime-config.js';
+import { Key } from 'aws-cdk-lib/aws-kms';
+import { CfnWebACL } from 'aws-cdk-lib/aws-wafv2';
 const DEFAULT_RUNTIME_CONFIG_FILENAME = 'runtime-config.json';
 
+export interface StaticWebsiteProps {
+  readonly websiteFilePath: string;
+}
+
 /**
  * Deploys a Static Website using by default a private S3 bucket as an origin and Cloudfront as the entrypoint.
  *
@@ -33,61 +32,68 @@ export class StaticWebsite extends Construct {
   public readonly cloudFrontDistribution: Distribution;
   public readonly bucketDeployment: BucketDeployment;
 
-  constructor(scope: Construct, id: string) {
+  constructor(
+    scope: Construct,
+    id: string,
+    { websiteFilePath }: StaticWebsiteProps
+  ) {
     super(scope, id);
-
     this.node.setContext(
       '@aws-cdk/aws-s3:serverAccessLogsUseBucketPolicy',
       true
     );
 
+    const websiteKey = new Key(this, 'WebsiteKey', {
+      enableKeyRotation: true,
+    });
+
     const accessLogsBucket = new Bucket(this, 'AccessLogsBucket', {
       versioned: false,
       enforceSSL: true,
       autoDeleteObjects: true,
       removalPolicy: RemovalPolicy.DESTROY,
-      encryption: BucketEncryption.S3_MANAGED,
+      encryption: BucketEncryption.KMS,
+      encryptionKey: websiteKey,
       objectOwnership: ObjectOwnership.OBJECT_WRITER,
       publicReadAccess: false,
       blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
     });
-
     // S3 Bucket to hold website files
     this.websiteBucket = new Bucket(this, 'WebsiteBucket', {
       versioned: true,
       enforceSSL: true,
       autoDeleteObjects: true,
       removalPolicy: RemovalPolicy.DESTROY,
-      encryption: BucketEncryption.S3_MANAGED,
+      encryption: BucketEncryption.KMS,
+      encryptionKey: websiteKey,
       objectOwnership: ObjectOwnership.BUCKET_OWNER_ENFORCED,
       publicReadAccess: false,
       blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
       serverAccessLogsPrefix: 'website-access-logs',
       serverAccessLogsBucket: accessLogsBucket,
     });
-
     // Web ACL
-    const webAclArn = new CloudfrontWebAcl(this, 'WebsiteAcl').webAclArn;
+    const wafStack = new CloudfrontWebAcl(this, 'waf');
 
     // Cloudfront Distribution
     const logBucket = new Bucket(this, 'DistributionLogBucket', {
       enforceSSL: true,
       autoDeleteObjects: true,
       removalPolicy: RemovalPolicy.DESTROY,
-      encryption: BucketEncryption.S3_MANAGED,
+      encryption: BucketEncryption.KMS,
+      encryptionKey: websiteKey,
       objectOwnership: ObjectOwnership.BUCKET_OWNER_PREFERRED,
       publicReadAccess: false,
       blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
       serverAccessLogsPrefix: 'distribution-access-logs',
       serverAccessLogsBucket: accessLogsBucket,
     });
-
     const defaultRootObject = 'index.html';
     this.cloudFrontDistribution = new Distribution(
       this,
       'CloudfrontDistribution',
       {
-        webAclId: webAclArn,
+        webAclId: wafStack.wafArn,
         enableLogging: true,
         logBucket: logBucket,
         defaultBehavior: {
@@ -101,48 +107,42 @@ export class StaticWebsite extends Construct {
             responseHttpStatus: 200,
             responsePagePath: `/${defaultRootObject}`,
           },
+          {
+            httpStatus: 403, // We need to redirect reloads from paths (e.g. /foo/bar) to index.html for single page apps
+            responseHttpStatus: 200,
+            responsePagePath: `/${defaultRootObject}`,
+          },
         ],
       }
     );
-
     // Deploy Website
-    const runtimeConfig = RuntimeConfig.ensure(this).config;
     this.bucketDeployment = new BucketDeployment(this, 'WebsiteDeployment', {
       sources: [
-        Source.asset(
-          url.fileURLToPath(
-            new URL('../../../../../<%= websiteContentPath %>', import.meta.url)
-          )
+        Source.asset(websiteFilePath),
+        Source.jsonData(
+          DEFAULT_RUNTIME_CONFIG_FILENAME,
+          this.resolveTokens(RuntimeConfig.ensure(this).config)
         ),
-        ...(Object.keys(runtimeConfig).length > 0
-          ? [Source.jsonData(DEFAULT_RUNTIME_CONFIG_FILENAME, this.lazilyRender(runtimeConfig))]
-          : []),
       ],
       destinationBucket: this.websiteBucket,
       // Files in the distribution's edge caches will be invalidated after files are uploaded to the destination bucket.
       distribution: this.cloudFrontDistribution,
     });
-
     new CfnOutput(this, 'DistributionDomainName', {
       value: this.cloudFrontDistribution.domainName,
     });
-
-    this.suppressCDKNagViolations();
   }
-
-  private lazilyRender = (payload: any) => Lazy.any({
-    produce: () => this.resolveTokens(payload),
-  });
-
   private resolveTokens = (payload: any) => {
     const _payload: Record<string, any> = {};
-
     Object.entries(payload).forEach(([key, value]) => {
-      if (Token.isUnresolved(value) || (typeof value === "string" && value.endsWith("}}"))) {
+      if (
+        Token.isUnresolved(value) ||
+        (typeof value === 'string' && value.endsWith('}}'))
+      ) {
         _payload[key] = new CfnJson(this, `ResolveToken-${key}`, {
-            value,
+          value,
         }).value;
-      } else if (typeof value === "object") {
+      } else if (typeof value === 'object') {
         _payload[key] = this.resolveTokens(value);
       } else if (Array.isArray(value)) {
         _payload[key] = value.map((v) => this.resolveTokens(v));
@@ -150,114 +150,49 @@ export class StaticWebsite extends Construct {
         _payload[key] = value;
       }
     });
-
     return _payload;
-  }
+  };
+}
 
-  private suppressCDKNagViolations = () => {
-    const stack = Stack.of(this);
+export class CloudfrontWebAcl extends Stack {
+  public readonly wafArn;
+  constructor(scope: Construct, id: string) {
+    super(scope, id, {
+      env: {
+        region: 'us-east-1',
+        account: Stack.of(scope).account,
+      },
+      crossRegionReferences: true,
+    });
 
-    NagSuppressions.addResourceSuppressions(
-      this,
-      [
+    this.wafArn = new CfnWebACL(this, 'WebAcl', {
+      defaultAction: { allow: {} },
+      scope: 'CLOUDFRONT',
+      visibilityConfig: {
+        cloudWatchMetricsEnabled: true,
+        metricName: id,
+        sampledRequestsEnabled: true,
+      },
+      rules: [
         {
-          id: 'AwsPrototyping-CloudFrontDistributionGeoRestrictions',
-          reason:
-            'Suppressed to allow unrestricted access. Not recommended in production.',
+          name: 'CRSRule',
+          priority: 0,
+          statement: {
+            managedRuleGroupStatement: {
+              name: 'AWSManagedRulesCommonRuleSet',
+              vendorName: 'AWS',
+            },
+          },
+          visibilityConfig: {
+            cloudWatchMetricsEnabled: true,
+            metricName: 'MetricForWebACLCDK-CRS',
+            sampledRequestsEnabled: true,
+          },
+          overrideAction: {
+            none: {},
+          },
         },
       ],
-      true
-    );
-
-    [
-      'AwsSolutions-CFR4',
-      'AwsPrototyping-CloudFrontDistributionHttpsViewerNoOutdatedSSL',
-    ].forEach((RuleId) => {
-      NagSuppressions.addResourceSuppressions(this.cloudFrontDistribution, [
-        {
-          id: RuleId,
-          reason:
-            'Certificate is not mandatory therefore the Cloudfront certificate will be used.',
-        },
-      ]);
-    });
-
-    ['AwsSolutions-L1', 'AwsPrototyping-LambdaLatestVersion'].forEach(
-      (RuleId) => {
-        NagSuppressions.addResourceSuppressions(
-          this,
-          [
-            {
-              id: RuleId,
-              reason:
-                'Latest runtime cannot be configured. CDK will need to upgrade the BucketDeployment construct accordingly.',
-            },
-          ],
-          true
-        );
-      }
-    );
-
-    ['AwsSolutions-IAM5', 'AwsPrototyping-IAMNoWildcardPermissions'].forEach(
-      (RuleId) => {
-        NagSuppressions.addResourceSuppressions(
-          this,
-          [
-            {
-              id: RuleId,
-              reason:
-                'All Policies have been scoped to a Bucket. Given Buckets can contain arbitrary content, wildcard resources with bucket scope are required.',
-              appliesTo: [
-                {
-                  regex: '/^Action::s3:.*$/g',
-                },
-                {
-                  regex: `/^Resource::.*$/g`,
-                },
-              ],
-            },
-          ],
-          true
-        );
-      }
-    );
-
-    ['AwsSolutions-IAM4', 'AwsPrototyping-IAMNoManagedPolicies'].forEach(
-      (RuleId) => {
-        NagSuppressions.addResourceSuppressions(
-          this,
-          [
-            {
-              id: RuleId,
-              reason:
-                'Buckets can contain arbitrary content, therefore wildcard resources under a bucket are required.',
-              appliesTo: [
-                {
-                  regex: `/^Policy::arn:${PDKNag.getStackPartitionRegex(
-                    stack
-                  )}:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole$/g`,
-                },
-              ],
-            },
-          ],
-          true
-        );
-      }
-    );
-
-    ['AwsSolutions-S1', 'AwsPrototyping-S3BucketLoggingEnabled'].forEach(
-      (RuleId) => {
-        NagSuppressions.addResourceSuppressions(
-          this,
-          [
-            {
-              id: RuleId,
-              reason: 'Access Log buckets should not have s3 bucket logging',
-            },
-          ],
-          true
-        );
-      }
-    );
-  };
+    }).attrArn;
+  }
 }