add new gui 2 structure

.dockerignore

+# Node modules
+node_modules
+
+# Next.js build output
+.next
+out
+
+# Logs
+*.log
+
+# # Environment files
+# .env.local
+# .env.development.local
+# .env.test.local
+# .env.production.local
+# .env.example
+
+# Development directories
+__tests__
+coverage
+
+# Editor directories and files
+.vscode
+*.swp
+*.swo
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Temporary files
+*.tmp
+*.temp
+
+# Python
+*.pyc
+*.py
+*.pyo
+*.pyd
+
+# tox
+.tox

.env.example

+ENVIRONMENT_NAME=Development
+PROCESS_DETAIL_REFETCH_INTERVAL=3000
+
+ORCHESTRATOR_API_HOST=http://localhost:8080
+ORCHESTRATOR_API_PATH=/api
+ORCHESTRATOR_GRAPHQL_HOST=http://localhost:8080
+ORCHESTRATOR_GRAPHQL_PATH=/api/graphql
+ORCHESTRATOR_WEBSOCKET_URL=ws://localhost:8080
+
+AUTH_ACTIVE=true
+NEXTAUTH_ID="keycloak"
+NEXTAUTH_CLIENT_ID="orchestrator-client"
+NEXTAUTH_CLIENT_SECRET="KEYCLOAK_SECRET"
+NEXTAUTH_SECRET="NEXTAUTH_SECRET"
+NEXTAUTH_ISSUER="http://localhost:8085/realms/orchestrator"
+NEXTAUTH_WELL_KNOWN_OVERRIDE="http://localhost:8085/auth/.well-known/openid-configuration"
+NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE="openid profile"
+NEXTAUTH_URL=http://localhost:3000/api/auth
+
+# docker-compose variables
+KEYCLOAK_ADMIN=admin
+KEYCLOAK_ADMIN_PASSWORD=admin
+KEYCLOAK_PORT=8085
+
+USE_WEBSOCKET=false
+USE_THEME_TOGGLE=false
+
+SHOW_WORKFLOW_INFORMATION_LINK=false
+WORKFLOW_INFORMATION_LINK_URL=http://localhost:8080

.eslintrc.js

+module.exports = {
+    root: true,
+    extends: ['@orchestrator-ui/eslint-config-custom'],
+};

.gitignore

-.env*
-!.env.local.example
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.idea
+.turbo
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+tsconfig.tsbuildinfo
+
+# python
 venv
 .tox
 *.egg-info

.husky/pre-commit

+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "---------- Running TSC ----------"
+npm run tsc
+
+echo "---------- Running Linter ----------"
+npm run lint
+
+echo "---------- Running Tests ----------"
+npm run test

Dockerfile

-FROM node:18-alpine AS builder
+FROM node:20.12.2-alpine AS builder
 
 # ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED 1
 
 WORKDIR /app
+COPY . .
 
-RUN apk update && apk add --no-cache git
+RUN npm install
+RUN npm run build
 
-RUN git clone https://github.com/workfloworchestrator/orchestrator-ui-library.git --branch @orchestrator-ui/orchestrator-ui-components@1.14.2 --single-branch --depth 1
-RUN cd /app/orchestrator-ui-library && \
-    sed -i 's/git@github.com:/https:\/\/github.com\//' .gitmodules && \
-    git submodule init && \
-    git submodule update && \
-    npm install && \
-    npm update @orchestrator-ui/orchestrator-ui-components && \
-    npm update @orchestrator-ui/eslint-config-custom && \
-    npm update @orchestrator-ui/jest-config && \
-    npm update @orchestrator-ui/tsconfig
 
-# Apply GÉANT customisations
-COPY custom/nextauth.ts /app/orchestrator-ui-library/apps/wfo-ui/pages/api/auth/[...nextauth].ts
+FROM node:20.12.2-alpine AS runner
 
-RUN cd /app/orchestrator-ui-library/ && npm run build
-    
-FROM node:18-alpine AS runner
+RUN apk update && apk add --no-cache curl vim
 
 # ENV NODE_ENV=production
+ENV HOSTNAME=0.0.0.0
+ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN apk update && apk add --no-cache curl vim
-
-COPY --from=builder /app/orchestrator-ui-library/apps/wfo-ui/.next/standalone /app
-COPY --from=builder /app/orchestrator-ui-library/apps/wfo-ui/.next/static /app/.next/static
-COPY --from=builder /app/orchestrator-ui-library/node_modules /app/node_modules
+COPY --from=builder /app/.next/standalone /app
+COPY --from=builder /app/.next/static /app/.next/static
+COPY --from=builder /app/public /app/public
 
 WORKDIR /app
 USER node
 EXPOSE 3000
-CMD ["node", "server.js", "-H", "0.0.0.0"]
-
+CMD ["node", "server.js"]

components/AppLogo/AppLogo.tsx

+import React, { ReactElement } from 'react';
+
+import { EuiText } from '@elastic/eui';
+import { useOrchestratorTheme } from '@orchestrator-ui/orchestrator-ui-components';
+
+import { getAppLogoStyles } from '@/components/AppLogo/styles';
+
+export function getAppLogo(): ReactElement {
+    const { logoStyle } = getAppLogoStyles();
+
+    const AppLogo = () => {
+        const { theme } = useOrchestratorTheme();
+
+        return (
+            <div css={logoStyle}>
+                <EuiText color={theme.colors.emptyShade} size="xs">
+                    Workflow
+                </EuiText>
+                <EuiText color={theme.colors.emptyShade} size="xs">
+                    Orchestrator
+                </EuiText>
+            </div>
+        );
+    };
+
+    return <AppLogo />;
+}

components/AppLogo/styles.ts

+import { css } from '@emotion/css';
+
+export const getAppLogoStyles = () => {
+    const logoStyle = css({
+        display: 'flex',
+        flexDirection: 'column',
+    });
+
+    return { logoStyle };
+};

configuration/configuration.ts

+import process from 'process';
+
+import {
+    Environment,
+    OrchestratorConfig,
+} from '@orchestrator-ui/orchestrator-ui-components';
+
+export const DEFAULT_GRAPHQL_CORE_ENDPOINT =
+    'http://localhost:8080/api/graphql';
+export const DEFAULT_ORCHESTRATOR_API_BASE_URL = 'http://localhost:8080/api';
+export const DEFAULT_ORCHESTRATOR_WEBSOCKET_URL = 'ws://localhost:8080';
+
+export const ENGINE_STATUS_ENDPOINT = '/settings/status';
+export const PROCESSES_ENDPOINT = '/processes';
+export const SUBSCRIPTION_ACTIONS_ENDPOINT = '/subscriptions/workflows';
+export const SUBSCRIPTION_PROCESSES_ENDPOINT =
+    '/processes/process-subscriptions-by-subscription-id';
+export const DEFAULT_WORKFLOW_INFORMATION_LINK_URL = 'http://localhost:8080';
+
+export const getInitialOrchestratorConfig = (): OrchestratorConfig => {
+    const orchestratorGraphqlBaseUrl =
+        process.env.ORCHESTRATOR_GRAPHQL_HOST &&
+        process.env.ORCHESTRATOR_GRAPHQL_PATH
+            ? `${process.env.ORCHESTRATOR_GRAPHQL_HOST}${process.env.ORCHESTRATOR_GRAPHQL_PATH}`
+            : DEFAULT_GRAPHQL_CORE_ENDPOINT;
+
+    const orchestratorApiBaseUrl =
+        process.env.ORCHESTRATOR_API_HOST && process.env.ORCHESTRATOR_API_PATH
+            ? `${process.env.ORCHESTRATOR_API_HOST}${process.env.ORCHESTRATOR_API_PATH}`
+            : DEFAULT_ORCHESTRATOR_API_BASE_URL;
+
+    return {
+        orchestratorApiBaseUrl,
+        engineStatusEndpoint: orchestratorApiBaseUrl + ENGINE_STATUS_ENDPOINT,
+        graphqlEndpointCore: orchestratorGraphqlBaseUrl,
+        processesEndpoint: orchestratorApiBaseUrl + PROCESSES_ENDPOINT,
+        environmentName:
+            process.env.ENVIRONMENT_NAME ?? Environment.DEVELOPMENT,
+        subscriptionActionsEndpoint:
+            orchestratorApiBaseUrl + SUBSCRIPTION_ACTIONS_ENDPOINT,
+        subscriptionProcessesEndpoint:
+            orchestratorApiBaseUrl + SUBSCRIPTION_PROCESSES_ENDPOINT,
+        orchestratorWebsocketUrl:
+            process.env.ORCHESTRATOR_WEBSOCKET_URL ||
+            DEFAULT_ORCHESTRATOR_WEBSOCKET_URL,
+        authActive: process.env.AUTH_ACTIVE?.toLowerCase() != 'false',
+        useWebSockets: process.env.USE_WEB_SOCKETS?.toLowerCase() === 'true',
+        useThemeToggle: process.env.USE_THEME_TOGGLE?.toLowerCase() === 'true',
+        workflowInformationLinkUrl:
+            process.env.WORKFLOW_INFORMATION_LINK_URL ??
+            DEFAULT_WORKFLOW_INFORMATION_LINK_URL,
+        showWorkflowInformationLink:
+            process.env.SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() ===
+            'true',
+    };
+};

configuration/index.ts

+export * from './configuration';

font/inter.css

+@font-face {
+    font-family: 'Inter';
+    font-weight: 400;
+    font-display: swap;
+    src: url('Inter-Regular.ttf');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 500;
+    font-display: swap;
+    src: url('Inter-Medium.ttf');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 600;
+    font-display: swap;
+    src: url('Inter-SemiBold.ttf');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 700;
+    font-display: swap;
+    src: url('Inter-Bold.ttf');
+}

jest.config.cjs

+const base = require('@orchestrator-ui/jest-config/jest-base.config.js');
+
+module.exports = {
+    ...base,
+    displayName: 'Wfo-UI Tests',
+};

next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

+module.exports = {
+    reactStrictMode: false,
+    output: 'standalone',
+    i18n: {
+        // These are all the locales you want to support in
+        // your application
+        locales: ['en-GB', 'nl-NL'],
+        defaultLocale: 'en-GB',
+    },
+    transpilePackages: ['@orchestrator-ui/orchestrator-ui-components'],
+};

package.json

+{
+    "name": "wfo-ui",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "test": "jest --passWithNoTests",
+        "tsc": "tsc --noEmit",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "prepare": "husky"
+    },
+    "dependencies": {
+        "@elastic/datemath": "^5.0.3",
+        "@elastic/eui": "^93.1.1",
+        "@emotion/css": "^11.11.2",
+        "@emotion/react": "^11.11.1",
+        "@orchestrator-ui/orchestrator-ui-components": "1.19.1",
+        "@reduxjs/toolkit": "^2.0.1",
+        "moment": "^2.29.4",
+        "next": "^14.0.4",
+        "next-auth": "^4.24.5",
+        "next-intl": "^3.4.1",
+        "next-query-params": "^5.0.0",
+        "process": "0.11.10",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-no-ssr": "^1.1.0",
+        "react-query": "3.39.3",
+        "react-redux": "^9.1.0",
+        "use-query-params": "2.2.1"
+    },
+    "devDependencies": {
+        "@orchestrator-ui/eslint-config-custom": "*",
+        "@orchestrator-ui/jest-config": "*",
+        "@orchestrator-ui/tsconfig": "*",
+        "@testing-library/jest-dom": "^6.2.0",
+        "@types/node": "^20.10.5",
+        "@types/react": "^18.2.45",
+        "@types/react-dom": "^18.2.18",
+        "@types/react-no-ssr": "^1.1.7",
+        "esbuild-jest": "^0.5.0",
+        "husky": "^9.0.11",
+        "typescript": "^5.3.2"
+    },
+    "overrides": {
+        "@elastic/eui": {
+            "typescript": "^5.3.2"
+        },
+        "react-no-ssr": {
+            "react": "^18.2.0"
+        }
+    }
+}