Refactor acme-shopping with React / Typescript (#74)

* Typescript fixes

Co-authored-by: Carlos Poon <[email protected]>

* add tas config

* [#188115649] App team can lean on Journey Testing for Quality Assurance.

    Co-authored-by: Carlos Poon <[email protected]>

* [#188115649] - Add simple Assistant chat AI cypress test.

Co-authored-by: Tony Thompson <[email protected]>

* Address rebase where we removed spring-react-app earlier

* [#188180076] - Introduce logout for React-UI

Co-authored-by: Tony Thompson <[email protected]>

* [#188193919] - Fix ES Lint

Co-authored-by: Tony Thompson <[email protected]>
Co-authored-by: Carlos Poon <[email protected]>
Co-authored-by: Will Sather <[email protected]>

* [#188214243] Address issues viewing the React UI app in mobile

* Replaced UI with react app

    Co-authored-by: Carlos Poon <[email protected]>

* Synced app name from manifest.yml & removed dist folder in deprecated acme-shopping

* Fix theme typescript errors

* [#188261766] Configure SpringBoot apps to use IP address when registering with local Eureka server

---------

Co-authored-by: Tony Thompson <[email protected]>
Co-authored-by: Carlos Poon <[email protected]>
Co-authored-by: Will Sather <[email protected]>
Co-authored-by: David Joo <[email protected]>

README.md

@@ -125,7 +125,7 @@ cf start acme-order
 
 #### Shopping Service
 ```bash
-cd ../acme-shopping
+cd ../acme-shopping-react
 cf push --no-start
 cf bind-service acme-shopping acme-gateway -c frontend-routes.json
 cf start acme-shopping

apps/acme-assist/.java-version

@@ -0,0 +1 @@
+21

apps/acme-assist/README.md

@@ -1,14 +1,18 @@
 ## Local running
 
-Ensure the Local Development dependencies are running. (See main [README](../../README.md))
+Ensure the Local Development dependencies are running. (See main [README](../../local-development/README.md))
+
+```bash
+cd ../../local-development
+docker compose up -d
+```
 
 This application also assumes there is an OPEN AI API key setup as an environment variable. 
 Need to set `OPENAI_API_KEY` for the application-local.yml
 
 This project uses Java version 21. Ensure your system has this available before running the app locally.
 
-run locally setting up docker for dependency
+To run the acme-assist app locally,
 ```bash
-docker-compose up
 ./gradlew bootRun --args="--spring.profiles.active=local"
 ```

apps/acme-assist/src/main/resources/application-local.yaml

@@ -29,3 +29,6 @@ spring:
     username: root
     password: rootpassword
     url: jdbc:postgresql://localhost:5433/acme-assist
+eureka:
+  instance:
+    preferIpAddress: true

apps/acme-cart/README.md

@@ -52,8 +52,11 @@ The acme-cart image is based on the official Python image.
 To run the acme-cart and the redis dependency for local test, use the `docker-compose` file: 
 
 ```bash
+# docker-compose.yaml is provided in local-development folder
+cd ../../local-development
+
 # Run the acme-cart image and Redis container
-docker-compose up
+docker compose up -d cart-redis-db cart-server
 ```
 
 ## API

apps/acme-catalog/README.md

@@ -14,14 +14,20 @@ Catalog contains a database it talks to store the information it needs.
 
 ## Local running
 
-Ensure the local development dependencies are running. (See main [README](../../README.md))
+Ensure the Local Development dependencies are running. (See main [README](../../local-development/README.md))
+
+```bash
+cd ../../local-development
+docker compose up -d
+```
 
 Setup Docker database dependency
 
 `docker compose -d up`
 
 To run locally
 
-
-`./gradlew bootRun --args="--spring.profiles.active=local"`
+```bash
+./gradlew bootRun --args="--spring.profiles.active=local"
+```
 

apps/acme-catalog/src/main/java/com/example/acme/catalog/ProductController.java

@@ -24,6 +24,7 @@ public ProductController(ProductService productService) {
 
 	@GetMapping("/products")
 	public GetProductsResponse getProducts() {
+		// TODO: refactor this to remove the `data` attribute
 		return new GetProductsResponse(productService.getProducts().stream()
 													 .map(ProductResponse::new)
 													 .collect(Collectors.toList()));

apps/acme-catalog/src/test/java/com/example/acme/catalog/CatalogApplicationTests.java

@@ -50,6 +50,8 @@ static void sqlserverProperties(DynamicPropertyRegistry registry) {
         registry.add("spring.datasource.password", postgres::getPassword);
     }
 
+
+
     @BeforeEach
     void before() {
         org.testcontainers.Testcontainers.exposeHostPorts(this.serverPort);
@@ -82,6 +84,8 @@ void listAllProducts() {
 
     @Test
     void findProductById() {
+
+
         given()
                 .get("/products/cdc8abf3-51cc-4d73-8bee-8ce876a550e5")
                 .then()
@@ -90,6 +94,8 @@ void findProductById() {
         checkMetric("getProduct");
     }
 
+
+
     private void checkMetric(String method) {
         var query = String.format("store_products_seconds_count{method=\"%s\"}", method);
         Awaitility.given().pollInterval(Duration.ofSeconds(2))

apps/acme-identity/README.md

@@ -7,12 +7,18 @@ The goal of this specific service is to emulate a User account service.
 
 ## Local running
 
-Ensure the local development dependencies are running. (See main [README](../../README.md))
+Ensure the Local Development dependencies are running. (See main [README](../../local-development/README.md))
 
-Ensure the local authentication server is setup or have it connect to your preferred SSO provider.
-`/local-development`
+```bash
+cd ../../local-development
+docker compose up -d
+```
+
+Ensure the local authentication server is setup or have it connect to your preferred SSO provider.  Included [docker-compose.yaml](../../local-development/docker-compose.yaml) in `/local-development` folder uses Tanzu Local Auth Server by default.  
 
 To run locally
 
-`./gradlew bootRun --args="--spring.profiles.active=local"`
+```bash
+./gradlew bootRun --args="--spring.profiles.active=local"
+```
 

apps/acme-identity/src/main/resources/application-local.yaml

@@ -1,4 +1,3 @@
-
 spring:
   application:
     name: acme-identity

apps/acme-order/README.md

@@ -15,22 +15,23 @@ VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-dotn
 
 To run the acme order service, do the following:
 
-Start the mongodb container:
+Ensure the Local Development dependencies are running. (See main [README](../../local-development/README.md))
 
 ```bash
-    docker compose up -d
+cd ../../local-development
+docker compose up -d
 ```
 
 Start the application:
 
 ```bash
-    dotnet run --urls=http://localhost:8086/
+dotnet run --urls=http://localhost:8086/
 ```
 
 Verify the health of the application:
 
 ```bash
-    open localhost:8086/actuator/health
+open localhost:8086/actuator/health
 ```
 
 ## Deploying acme-order app

apps/acme-payment/README.md

@@ -12,6 +12,7 @@
 
 To run locally
 
-
-`./gradlew bootRun --args="--spring.profiles.active=local"`
+```bash
+./gradlew bootRun --args="--spring.profiles.active=local"
+```
 

apps/acme-shopping-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/acme-shopping-react/README.md

@@ -0,0 +1,37 @@
+# ACME Shopping React
+
+## Local Development
+
+To run this locally: 
+
+1. Install dependencies
+    ```bash
+   npm install
+    ```
+
+2. Start Development Server
+    ```bash
+   npm run dev
+    ```
+
+## Production Build
+
+To build this for production:
+
+1. Run build
+    ```bash
+   npm run build
+    ```
+2. Run build
+    ```bash
+   npm run preview
+    ```
+
+## Lint
+
+This project uses ESlint, to run:
+
+1. Install dependencies
+    ```bash
+   npm run lint
+    ```

apps/acme-shopping-react/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

apps/acme-shopping-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="icon" href="/favicon.png" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>Acme Fitness</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/acme-shopping-react/manifest.yml

@@ -0,0 +1,7 @@
+applications:
+- name: acme-shopping
+  memory: 1G
+  path: dist
+  buildpack: staticfile_buildpack
+  routes:
+    - route: acme-shopping.apps.internal