Merge pull request #5 from codecentric/feature/support-for-new-react-ui

New user interface

.github/workflows/ui.yaml

@@ -30,38 +30,33 @@ jobs:
       - name: 🏗 Setup node env
         uses: actions/setup-node@v2
         with:
-          # For some reason the tests hang when running node >=16 ...
-          # Using node 14 it just builds successful Òó
-          node-version: 14
-          cache: 'yarn'
-          cache-dependency-path: services/ui/yarn.lock
+          node-version: 17
+          cache: 'npm'
+          cache-dependency-path: services/ui/package-lock.json
       - name: 👨🏻‍💻 Install dependencies
         working-directory: ./services/ui
-        run: yarn install
-      - name: 👀 Lint code
-        working-directory: ./services/ui
-        run: yarn run lint --no-fix --max-warnings 0
+        run: npm install
       - name: 🧪 Run tests
         working-directory: ./services/ui
-        run: yarn run test:unit --coverage --coverageReporters=cobertura
+        run: npm run test:ci
       - name: 📦 Upload test results
         uses: actions/upload-artifact@v2
         if: always()
         with:
           name: test-results
-          path: ./services/ui/test-reports/junit.xml
+          path: ./services/ui/junit.xml
       - name: 🔎 Upload coverage report
         uses: codecov/codecov-action@v2
         with:
           files: ./services/ui/coverage/cobertura-coverage.xml
           name: habitcentric/ui
       - name: 🏗 Build
         working-directory: ./services/ui
-        run: yarn build
+        run: npm run build
       - name: 📋 Generate license report
         working-directory: ./services/ui
         run: |
-          yarn license-report >licenses.txt
+          npm run license-report >licenses.txt
           zip -r license-report.zip licenses licenses.txt
       - name: 📦 Upload license report
         uses: actions/upload-artifact@v2

services/gateway/build.gradle

@@ -42,7 +42,13 @@ ext {
 // override the version the spring boot dependency-management plugin would enforce
 ext['junit-jupiter.version'] = versions.junitJupiter
 
+tasks.named('compileJava') {
+  inputs.files(tasks.named('processResources'))
+}
+
 dependencies {
+    annotationProcessor "org.springframework.boot:spring-boot-configuration-processor"
+
     implementation 'org.springframework.boot:spring-boot-starter-actuator'
     implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
     implementation 'org.springframework.cloud:spring-cloud-starter-gateway'

services/gateway/src/intTest/java/de/codecentric/hc/gateway/routing/UiIntTest.java

@@ -9,6 +9,12 @@
 
 public class UiIntTest extends WebTest {
 
+  @Test
+  @WithMockUser(username = DEFAULT, roles = USER)
+  public void getIndexShouldRedirectToTheHabitUi() {
+    get("/").expectStatus().isFound().expectHeader().valueMatches("Location", "/ui");
+  }
+
   @Test
   @WithMockUser(username = DEFAULT, roles = USER)
   public void getUiShouldReturnTheHabitUi() {
@@ -19,4 +25,26 @@ public void getUiShouldReturnTheHabitUi() {
         .xpath("/html/head/title/text()")
         .isEqualTo("hc-ui");
   }
+
+  @Test
+  @WithMockUser(username = DEFAULT, roles = USER)
+  public void getUiWithAnyRouteShouldReturnTheHabitUi() {
+    get("/ui/any")
+        .expectStatus()
+        .isOk()
+        .expectBody()
+        .xpath("/html/head/title/text()")
+        .isEqualTo("hc-ui");
+  }
+
+  @Test
+  @WithMockUser(username = DEFAULT, roles = USER)
+  public void getUiWithOverviewRouteShouldReturnTheHabitUiOverview() {
+    get("/ui/overview")
+        .expectStatus()
+        .isOk()
+        .expectBody()
+        .xpath("/html/head/title/text()")
+        .isEqualTo("hc-ui overview");
+  }
 }

services/gateway/src/intTest/java/de/codecentric/hc/gateway/security/SecurityConfigIntTest.java

@@ -47,13 +47,18 @@ public void requestsWithoutAuthShouldBeUnauthorized() {
         .isFound()
         .expectHeader()
         .valueMatches("Location", expectedLocation);
-    get("/ui/").expectStatus().isFound().expectHeader().valueMatches("Location", expectedLocation);
+    get("/ui/overview")
+        .expectStatus()
+        .isFound()
+        .expectHeader()
+        .valueMatches("Location", expectedLocation);
   }
 
   @Test
   public void requestsWithoutAuthShouldBeOk() {
     get("/favicon.ico").expectStatus().isOk();
     get("/actuator/health").expectStatus().isOk();
+    get("/ui/").expectStatus().isOk();
   }
 
   @Test
@@ -70,6 +75,6 @@ public void requestsWithInvalidUserRoleShouldBeForbidden() {
     delete("/habits/123").expectStatus().isForbidden();
     get("/track").expectStatus().isForbidden();
     put("/track", "{}").expectStatus().isForbidden();
-    get("/ui/").expectStatus().isForbidden();
+    get("/ui/overview").expectStatus().isForbidden();
   }
 }

services/gateway/src/intTest/resources/__files/ui-overview.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>hc-ui overview</title>
+</head>
+<body>DUMMY</body>
+</html>

services/gateway/src/intTest/resources/mappings/ui/GET_ui-Overview.json

@@ -0,0 +1,18 @@
+{
+  "request": {
+    "method": "GET",
+    "url": "/ui/overview",
+    "headers": {
+      "Authorization": {
+        "absent": true
+      }
+    }
+  },
+  "response": {
+    "status": 200,
+    "headers": {
+      "Content-Type": "text/html"
+    },
+    "bodyFileName": "ui-overview.html"
+  }
+}

services/gateway/src/intTest/resources/mappings/ui/GET_ui.json

@@ -1,13 +1,10 @@
 {
   "request": {
     "method": "GET",
-    "url": "/ui/",
+    "urlPattern": "\/ui\/(?!(overview)).*",
     "headers": {
       "Authorization": {
         "absent": true
-      },
-      "X-User-ID": {
-        "equalTo": "default"
       }
     }
   },

services/gateway/src/main/java/de/codecentric/hc/gateway/security/GatewayAuthConfig.java

@@ -14,7 +14,7 @@ public class GatewayAuthConfig {
 
   @Getter @Setter @NotNull private GatewayAuthType type;
 
-  public static enum GatewayAuthType {
+  public enum GatewayAuthType {
     HTTP_BASIC,
     OAUTH_2_LOGIN
   }

services/gateway/src/main/java/de/codecentric/hc/gateway/security/SecurityConfig.java

@@ -77,8 +77,12 @@ private ServerHttpSecurity commonConfig(ServerHttpSecurity http) {
         .hasRole(USER)
         .pathMatchers("/report/**")
         .hasRole(USER)
-        .pathMatchers("/ui/**")
+        .pathMatchers("/ui/overview")
         .hasRole(USER)
+        .pathMatchers("/ui/**")
+        .permitAll()
+        .pathMatchers("/")
+        .permitAll()
         .and();
   }
 

services/gateway/src/main/resources/META-INF/additional-spring-configuration-metadata.json

@@ -0,0 +1,33 @@
+{
+  "groups": [
+    {
+      "name": "gateway.auth",
+      "type": "de.codecentric.hc.gateway.security.GatewayAuthConfig",
+      "description": "Auth related configuration"
+    }
+  ],
+  "properties": [
+    {
+      "name": "gateway.auth.type",
+      "type": "de.codecentric.hc.gateway.security.GatewayAuthConfig.GatewayAuthType",
+      "sourceType": "de.codecentric.hc.gateway.security.GatewayAuthConfig",
+      "description": "Authentication method used for Spring Security.",
+      "defaultValue": "HTTP_BASIC"
+    }
+  ],
+  "hints": [
+    {
+      "name": "gateway.auth.type",
+      "values": [
+        {
+          "value": "HTTP_BASIC",
+          "description": "Secure endpoints using HTTP basic auth."
+        },
+        {
+          "value": "OAUTH_2_LOGIN",
+          "description": "Secure endpoints using OAuth."
+        }
+      ]
+    }
+  ]
+}

services/gateway/src/main/resources/application.yml

@@ -30,8 +30,13 @@ spring:
           predicates:
             - Path=/ui/**
           filters:
-            - AddRequestHeaderUserId
             - RemoveRequestHeader=Authorization
+        - id: index_route
+          uri: no://op
+          predicates:
+            - Path=/
+          filters:
+            - RedirectTo=302, /ui
   security:
     oauth2:
       client:

services/ui/.dockerignore

@@ -0,0 +1 @@
+node_modules/

services/ui/.env.development

@@ -1,7 +1 @@
-VUE_APP_HABIT_SERVICE_HOST=http://localhost:9001/
-VUE_APP_TRACKING_SERVICE_HOST=http://localhost:9002/
-VUE_APP_REPORT_SERVICE_HOST=http://localhost:9003/
-VUE_APP_OIDC_AUTH=disabled
-VUE_APP_OIDC_AUTHORITY_HOST=http://localhost:8080/auth/realms/habitcentric/.well-known/openid-configuration
-VUE_APP_OIDC_CLIENT_ID=ui
-VUE_APP_UI_PATH=/
+REACT_APP_OIDC_ENABLED=false

services/ui/.env.development-oidc

@@ -1,7 +1 @@
-VUE_APP_HABIT_SERVICE_HOST=http://localhost:9001/
-VUE_APP_TRACKING_SERVICE_HOST=http://localhost:9002/
-VUE_APP_REPORT_SERVICE_HOST=http://localhost:9003/
-VUE_APP_OIDC_AUTH=enabled
-VUE_APP_OIDC_AUTHORITY_HOST=http://localhost:8080/auth/realms/habitcentric/.well-known/openid-configuration
-VUE_APP_OIDC_CLIENT_ID=ui
-VUE_APP_UI_PATH=/
+REACT_APP_OIDC_ENABLED=true

services/ui/.env.production

@@ -1,7 +1,2 @@
-VUE_APP_HABIT_SERVICE_HOST=${HABIT_HOST}
-VUE_APP_TRACKING_SERVICE_HOST=${TRACKING_HOST}
-VUE_APP_REPORT_SERVICE_HOST=${REPORT_HOST}
-VUE_APP_OIDC_AUTH=${OIDC_AUTH}
-VUE_APP_OIDC_AUTHORITY_HOST=${OIDC_AUTHORITY_HOST}
-VUE_APP_OIDC_CLIENT_ID=${OIDC_CLIENT_ID}
-VUE_APP_UI_PATH=/ui
+PUBLIC_URL=\$PUBLIC_URL
+REACT_APP_OIDC_ENABLED=\$OIDC_ENABLED

services/ui/.gitignore

@@ -1,30 +1,27 @@
-.DS_Store
-node_modules
-/dist
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
 /coverage
-/test-reports
-/licenses
-/licenses.txt
+junit.xml
 
-# local env files
+# production
+/build
+
+# misc
+.DS_Store
 .env.local
-.env.*.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Log files
-/logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Editor directories and files
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*
 .idea
-*.iws
 *.iml
-*.ipr
-/out/

services/ui/Dockerfile

@@ -1,17 +1,14 @@
-FROM node:14.19.0-alpine@sha256:43ec2ba01c2a245e341489956258afd3535a9ebfdf87ade04b84299ca736607f as build
+FROM node:17.4.0 as build
 WORKDIR /app
-COPY package.json yarn.lock ./
-RUN yarn install
-COPY .env.production .eslintrc.js babel.config.js postcss.config.js vue.config.js ./
+COPY package.json package-lock.json ./
+RUN npm install
+COPY .env.production tailwind.config.js tsconfig.json ./
 COPY public public/
 COPY src src/
-RUN yarn run build
+RUN npm run build
 
-FROM nginx:1.16.0-alpine@sha256:270bea203d2fc3743fb9ce0193325e188b7e6233043487e3d3cf117ea4d3f337 as run
-ENV HABIT_HOST /
-ENV TRACKING_HOST /
-ENV REPORT_HOST /
-COPY --from=build /app/dist /usr/share/nginx/html/dist
+FROM nginx:1.21.6 as run
+COPY --from=build /app/build /usr/share/nginx/html/dist
 COPY nginx.conf /etc/nginx/nginx.conf
 COPY ./docker-entrypoint.sh /
 RUN chmod +x /docker-entrypoint.sh