adjust core changes

e23b70c4 · Mohammad Torkashvand · e6fdd6f1 · e23b70c4 · e23b70c4 · e23b70c4
Commit e23b70c4 authored 10 months ago by Mohammad Torkashvand
--- a/.env.example
+++ b/.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
+USE_WEB_SOCKETS=false
+USE_THEME_TOGGLE=false
+SHOW_WORKFLOW_INFORMATION_LINK=true
+WORKFLOW_INFORMATION_LINK_URL="https://workfloworchestrator.org/"

-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"
+# Auth variables
+OAUTH2_ACTIVE=true
+NEXTAUTH_PROVIDER_ID="keycloak"
+NEXTAUTH_PROVIDER_NAME="Keycloak"
 NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE="openid profile"
-NEXTAUTH_URL=http://localhost:3000/api/auth
+OAUTH2_CLIENT_ID="orchestrator-client"
+OAUTH2_CLIENT_SECRET="KEYCLOAK_SECRET"
+OIDC_CONF_FULL_WELL_KNOWN_URL="https://localhost:8085/api/v1/auth/.well-known/openid-configuration"

-# OPA Settings
-OPA_PUBLIC_BUNDLE_URL=http://localhost:8181/v1/data/opa/public-bundle
-
-#Maps Settings
-NETWORK_TOPOLOGY_API_URL="https://orchestrator.uat.gap.geant.org/api/v1/networks/topology"
+# Required by the Nextauth middleware
+NEXTAUTH_URL=http://localhost:3000/api/auth
+NEXTAUTH_SECRET="NEXTAUTH_SECRET"

-# docker-compose variables
+# Auth variables for local development environment (Keycloak in Docker)
 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
--- a/.env.local.example
+++ b/.env.local.example
@@ -7,17 +7,17 @@ ORCHESTRATOR_GRAPHQL_HOST=http://localhost:8080
 ORCHESTRATOR_GRAPHQL_PATH=/api/graphql
 ORCHESTRATOR_WEBSOCKET_URL=ws://localhost:8080

-AUTH_ACTIVE=true
+OAUTH2_ACTIVE=true
 NEXTAUTH_URL=http://localhost:3000/api/auth

 # OIDC Authentication Settings
-NEXTAUTH_ID="oidc"
-NEXTAUTH_CLIENT_ID="APP-A43E6FB7-1EEF-49CB-95B9-9AFF6FA7EF66"
-NEXTAUTH_CLIENT_SECRET="YOUR_OIDC_CLIENT_SECRET"
+OAUTH2_NEXTAUTH_PROVIDER_ID="oidc"
+OAUTH2_CLIENT_ID="APP-A43E6FB7-1EEF-49CB-95B9-9AFF6FA7EF66"
+OAUTH2_CLIENT_SECRET="YOUR_OIDC_CLIENT_SECRET"
 NEXTAUTH_SECRET="SOhxHLn53mV7ML7y8L6rL5oOQxOVb0V4p2Ez0ZSIuOs=" # openssl rand -base64 32
-NEXTAUTH_ISSUER="https://proxy.aai.geant.org"
+OIDC_CONF_FULL_WELL_KNOWN_URL="https://proxy.aai.geant.org"
 NEXTAUTH_WELL_KNOWN_OVERRIDE="https://proxy.aai.geant.org/.well-known/openid-configuration"
-NEXTAUTH_TOKEN_ENDPOINT="https://proxy.aai.geant.org/OIDC/token"
+OIDC_TOKEN_ENDPOINT="https://proxy.aai.geant.org/OIDC/token"

 # docker-compose variables
 # KEYCLOAK_ADMIN=admin

--- a/configuration/configuration.ts
+++ b/configuration/configuration.ts
 import {
  Environment,
  OrchestratorConfig,
+  getEnvironmentVariables,
 } from '@orchestrator-ui/orchestrator-ui-components';

-const DEFAULT_GRAPHQL_CORE_ENDPOINT = 'http://localhost:8080/api/graphql';
-const DEFAULT_ORCHESTRATOR_API_BASE_URL = 'http://localhost:8080/api';
-const DEFAULT_ORCHESTRATOR_WEBSOCKET_URL = 'ws://localhost:8080';
-
-const ENGINE_STATUS_ENDPOINT = '/settings/status';
-const PROCESS_STATUS_COUNTS_ENDPOINT = '/processes/status-counts';
-const PROCESSES_ENDPOINT = '/processes';
-const SUBSCRIPTION_PROCESSES_ENDPOINT =
-  '/processes/process-subscriptions-by-subscription-id';
-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 {
+    USE_THEME_TOGGLE,
+    ENVIRONMENT_NAME,
+    ORCHESTRATOR_API_HOST,
+    ORCHESTRATOR_API_PATH,
+    ORCHESTRATOR_GRAPHQL_HOST,
+    ORCHESTRATOR_GRAPHQL_PATH,
+    ORCHESTRATOR_WEBSOCKET_URL,
+    USE_WEB_SOCKETS,
+    WORKFLOW_INFORMATION_LINK_URL,
+    SHOW_WORKFLOW_INFORMATION_LINK,
+    OAUTH2_ACTIVE,
+  } = getEnvironmentVariables([
+    'USE_THEME_TOGGLE',
+    'ENVIRONMENT_NAME',
+    'ORCHESTRATOR_API_HOST',
+    'ORCHESTRATOR_API_PATH',
+    'ORCHESTRATOR_GRAPHQL_HOST',
+    'ORCHESTRATOR_GRAPHQL_PATH',
+    'ORCHESTRATOR_WEBSOCKET_URL',
+    'USE_WEB_SOCKETS',
+    'WORKFLOW_INFORMATION_LINK_URL',
+    'SHOW_WORKFLOW_INFORMATION_LINK',
+    'OAUTH2_ACTIVE',
+  ]);

-  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;
+  const graphqlEndpointCore = `${ORCHESTRATOR_GRAPHQL_HOST}${ORCHESTRATOR_GRAPHQL_PATH}`;
+  const orchestratorApiBaseUrl = `${ORCHESTRATOR_API_HOST}${ORCHESTRATOR_API_PATH}`;

  return {
    orchestratorApiBaseUrl,
-    engineStatusEndpoint: `${orchestratorApiBaseUrl}${ENGINE_STATUS_ENDPOINT}`,
-    graphqlEndpointCore: orchestratorGraphqlBaseUrl,
-    processesEndpoint: `${orchestratorApiBaseUrl}${PROCESSES_ENDPOINT}`,
-    environmentName: process.env.ENVIRONMENT_NAME ?? Environment.DEVELOPMENT,
-    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,
+    graphqlEndpointCore,
+    environmentName: ENVIRONMENT_NAME ?? Environment.DEVELOPMENT,
+    orchestratorWebsocketUrl: ORCHESTRATOR_WEBSOCKET_URL,
+    authActive: OAUTH2_ACTIVE?.toLowerCase() != 'false',
+    useWebSockets: USE_WEB_SOCKETS?.toLowerCase() === 'true',
+    useThemeToggle: USE_THEME_TOGGLE?.toLowerCase() === 'true',
+    workflowInformationLinkUrl: WORKFLOW_INFORMATION_LINK_URL,
    showWorkflowInformationLink:
-      process.env.SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() === 'true',
+      SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() === 'true',
  };
 };
--- a/next.config.js
+++ b/next.config.js
@@ -10,6 +10,6 @@ module.exports = {
    transpilePackages: ['@orchestrator-ui/orchestrator-ui-components'],
    publicRuntimeConfig: {
        OPA_PUBLIC_BUNDLE_URL: process.env.OPA_PUBLIC_BUNDLE_URL,
-        NEXTAUTH_CLIENT_ID: process.env.NEXTAUTH_CLIENT_ID,
+        OAUTH2_CLIENT_ID: process.env.OAUTH2_CLIENT_ID,
    },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,14 +13,14 @@
    "prettier:check": "prettier --check \"{components,configuration,contexts,pages,translations,public}/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
    "prepare": "husky"
  },
-  "dependencies": {
+    "dependencies": {
    "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^93.1.1",
+    "@elastic/eui": "^95.1.0",
    "@elfalem/leaflet-curve": "^0.9.2",
    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.1",
    "@open-policy-agent/opa-wasm": "^1.8.1",
-    "@orchestrator-ui/orchestrator-ui-components": "1.20.0",
+    "@orchestrator-ui/orchestrator-ui-components": "1.37.1",
    "@reduxjs/toolkit": "^2.0.1",
    "axios": "^1.7.2",
    "cytoscape": "^3.29.2",
@@ -42,7 +42,7 @@
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-no-ssr": "^1.1.0",
    "react-query": "3.39.3",
-    "react-redux": "^9.1.0",
+    "react-redux": "^8.1.3",
    "use-query-params": "2.2.1"
  },
  "devDependencies": {
@@ -55,23 +55,24 @@
    "@types/leaflet": "^1.9.12",
    "@types/node": "^20.10.5",
    "@types/node-fetch": "^2.6.11",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "@types/react-leaflet-markercluster": "^3.0.4",
    "@types/react-no-ssr": "^1.1.7",
+    "babel-jest": "^29.7.0",
    "esbuild-jest": "^0.4.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^9.0.11",
    "prettier": "^2.3.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.5.2"
  },
  "overrides": {
    "@elastic/eui": {
-      "typescript": "^5.3.2"
+      "typescript": "^5.5.2"
    },
    "react-no-ssr": {
-      "react": "^18.2.0"
+      "react": "^18.3.1"
+    }
    }
-  }
 }
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
 import '../font/inter.css';
 import { getAppLogo } from '@/components/AppLogo/AppLogo';
-import { WfoAuthWithPolicy } from '@/components/WfoAuthWithPolicy';
 import { getInitialOrchestratorConfig } from '@/configuration';
 import { GsoConfigProvider, GsoConfig } from '@/contexts/GsoConfigContext';
-import useAxiosInterceptor from '@/hooks/useAxiosInterceptor';
-import useFetchInterceptor from '@/hooks/useFetchInterceptor';
 import { TranslationsProvider } from '@/translations/translationsProvider';
+import type { EuiSideNavItemType } from '@elastic/eui';
 import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
-import '@elastic/eui/dist/eui_theme_dark.min.css';
 import '@elastic/eui/dist/eui_theme_light.min.css';
-import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 import {
-  ApiClientContextProvider,
  ColorModes,
  ConfirmationDialogContextWrapper,
  OrchestratorConfig,
  OrchestratorConfigProvider,
  StoreProvider,
+  WfoAuth,
  WfoErrorBoundary,
+  WfoMenuItemLink,
  WfoPageTemplate,
  WfoToastsList,
  defaultOrchestratorTheme,
-  WfoMenuItemLink,
 } from '@orchestrator-ui/orchestrator-ui-components';
 import { SessionProvider } from 'next-auth/react';
 import { NextAdapter } from 'next-query-params';
@@ -30,36 +26,17 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import NoSSR from 'react-no-ssr';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
-import { QueryClientConfig } from 'react-query/types/core/types';
 import { QueryParamProvider } from 'use-query-params';

 type AppOwnProps = { orchestratorConfig: OrchestratorConfig };

-const queryClientConfig: QueryClientConfig = {
-  defaultOptions: {
-    queries: {
-      cacheTime: 5 * 1000,
-      refetchOnWindowFocus: true,
-    },
-  },
-};
-
-const useAuthInterceptor = () => {
-  useFetchInterceptor();
-  useAxiosInterceptor();
-};
-
 function CustomApp({
  Component,
  pageProps,
  orchestratorConfig,
 }: AppProps & AppOwnProps) {
  const router = useRouter();
-  useAuthInterceptor();

-  const [queryClient] = useState(() => new QueryClient(queryClientConfig));
  const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
    ColorModes.LIGHT,
  );
@@ -123,47 +100,39 @@ function CustomApp({
          <SessionProvider session={pageProps.session}>
            <NoSSR>
              <GsoConfigProvider config={config}>
-                <WfoAuthWithPolicy>
+                <WfoAuth>
                  <EuiProvider
                    colorMode={themeMode}
                    modify={defaultOrchestratorTheme}
                  >
-                    <ApiClientContextProvider>
-                      <QueryClientProvider
-                        client={queryClient}
-                        contextSharing={true}
-                      >
-                        <TranslationsProvider>
-                          <Head>
-                            <link rel="icon" href="/favicon.png" />
-                            <title>GÉANT Service Orchestrator</title>
-                          </Head>
-                          <main className="app">
-                            <ConfirmationDialogContextWrapper>
-                              <WfoPageTemplate
-                                getAppLogo={getAppLogo}
-                                onThemeSwitch={handleThemeSwitch}
-                                overrideMenuItems={addMenuItems}
-                              >
-                                <QueryParamProvider
-                                  adapter={NextAdapter}
-                                  options={{
-                                    removeDefaultsFromUrl: false,
-                                    enableBatching: true,
-                                  }}
-                                >
-                                  <Component {...pageProps} />
-                                </QueryParamProvider>
-                              </WfoPageTemplate>
-                              <WfoToastsList />
-                            </ConfirmationDialogContextWrapper>
-                            <ReactQueryDevtools initialIsOpen={false} />
-                          </main>
-                        </TranslationsProvider>
-                      </QueryClientProvider>
-                    </ApiClientContextProvider>
+                    <TranslationsProvider>
+                      <Head>
+                        <link rel="icon" href="/favicon.png" />
+                        <title>GÉANT Service Orchestrator</title>
+                      </Head>
+                      <main className="app">
+                        <ConfirmationDialogContextWrapper>
+                          <WfoPageTemplate
+                            getAppLogo={getAppLogo}
+                            onThemeSwitch={handleThemeSwitch}
+                            overrideMenuItems={addMenuItems}
+                          >
+                            <QueryParamProvider
+                              adapter={NextAdapter}
+                              options={{
+                                removeDefaultsFromUrl: false,
+                                enableBatching: true,
+                              }}
+                            >
+                              <Component {...pageProps} />
+                            </QueryParamProvider>
+                          </WfoPageTemplate>
+                          <WfoToastsList />
+                        </ConfirmationDialogContextWrapper>
+                      </main>
+                    </TranslationsProvider>
                  </EuiProvider>
-                </WfoAuthWithPolicy>
+                </WfoAuth>
              </GsoConfigProvider>
            </NoSSR>
          </SessionProvider>

--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
 import {
  WfoSession,
  WfoUserProfile,
+  getEnvironmentVariables,
 } from '@orchestrator-ui/orchestrator-ui-components';
 import NextAuth, { AuthOptions } from 'next-auth';
 import { JWT } from 'next-auth/jwt';
 import { OAuthConfig } from 'next-auth/providers';
-import fetch from 'node-fetch';

-const token_endpoint_auth_method = process.env.NEXTAUTH_CLIENT_SECRET
+const {
+  OAUTH2_ACTIVE,
+  OAUTH2_CLIENT_ID,
+  OAUTH2_CLIENT_SECRET,
+  NEXTAUTH_PROVIDER_ID,
+  NEXTAUTH_PROVIDER_NAME,
+  NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE,
+  OIDC_CONF_FULL_WELL_KNOWN_URL,
+  OIDC_TOKEN_ENDPOINT,
+} = getEnvironmentVariables([
+  'OAUTH2_ACTIVE',
+  'OAUTH2_CLIENT_ID',
+  'OAUTH2_CLIENT_SECRET',
+  'NEXTAUTH_PROVIDER_ID',
+  'NEXTAUTH_PROVIDER_NAME',
+  'NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE',
+  'OIDC_CONF_FULL_WELL_KNOWN_URL',
+  'OIDC_TOKEN_ENDPOINT',
+]);
+
+const isOauth2Enabled = OAUTH2_ACTIVE?.toLowerCase() != 'false';
+
+const token_endpoint_auth_method = OAUTH2_CLIENT_SECRET
  ? 'client_secret_basic'
  : 'none';

-const authActive = process.env.AUTH_ACTIVE?.toLowerCase() !== 'false';
-
 async function refreshAccessToken(token: JWT): Promise<JWT> {
  try {
    const raw = JSON.stringify({
-      client_id: process.env.NEXTAUTH_CLIENT_ID,
+      client_id: OAUTH2_CLIENT_ID,
      grant_type: 'refresh_token',
      refresh_token: token.refreshToken as string,
    });

-    const response = await fetch(process.env.NEXTAUTH_TOKEN_ENDPOINT!, {
+    const response = await fetch(OIDC_TOKEN_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
@@ -59,14 +79,14 @@ async function refreshAccessToken(token: JWT): Promise<JWT> {
 }

 const wfoProvider: OAuthConfig<WfoUserProfile> = {
-  id: process.env.NEXTAUTH_ID || '',
-  name: 'GEANT Identity Provider',
+  id: NEXTAUTH_PROVIDER_ID,
+  name: NEXTAUTH_PROVIDER_NAME,
  type: 'oauth',
-  clientId: process.env.NEXTAUTH_CLIENT_ID,
-  wellKnown: process.env.NEXTAUTH_WELL_KNOWN_OVERRIDE,
+  clientId: OAUTH2_CLIENT_ID,
+  wellKnown: OIDC_CONF_FULL_WELL_KNOWN_URL,
  authorization: {
    params: {
-      scope: process.env.NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE,
+      scope: NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE,
      prompt: 'consent',
    },
  },
@@ -96,7 +116,7 @@ const wfoProvider: OAuthConfig<WfoUserProfile> = {
 };

 export const authOptions: AuthOptions = {
-  providers: authActive ? [wfoProvider] : [],
+  providers: isOauth2Enabled ? [wfoProvider] : [],
  callbacks: {
    async jwt({ token, account, profile }): Promise<JWT> {
      // The "account" is only available right after signing in -- adding useful data to the token

--- a/pages/api/runtime-config.ts
+++ b/pages/api/runtime-config.ts
+import { getEnvironmentVariables } from '@orchestrator-ui/orchestrator-ui-components';
 import { NextApiRequest, NextApiResponse } from 'next';

 interface RuntimeConfig {
@@ -6,14 +7,21 @@ interface RuntimeConfig {
  networkTopologyApiUrl: string;
 }

+const { OPA_PUBLIC_BUNDLE_URL, OAUTH2_CLIENT_ID, NETWORK_TOPOLOGY_API_URL } =
+  getEnvironmentVariables([
+    'OPA_PUBLIC_BUNDLE_URL',
+    'OAUTH2_CLIENT_ID',
+    'NETWORK_TOPOLOGY_API_URL',
+  ]);
+
 export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<RuntimeConfig | { error: string }>,
 ) {
  const config: RuntimeConfig = {
-    opaPublicBundleUrl: process.env.OPA_PUBLIC_BUNDLE_URL || '',
-    oidcClientId: process.env.NEXTAUTH_CLIENT_ID || '',
-    networkTopologyApiUrl: process.env.NETWORK_TOPOLOGY_API_URL || '',
+    opaPublicBundleUrl: OPA_PUBLIC_BUNDLE_URL || '',
+    oidcClientId: OAUTH2_CLIENT_ID || '',
+    networkTopologyApiUrl: NETWORK_TOPOLOGY_API_URL || '',
  };

  res.status(200).json(config);

--- a/translations/en-GB.json
+++ b/translations/en-GB.json
-{
-  "workflow": { "activate_iptrunk": "Activate IP trunk" },
-  "forms": { "fields": { "site_ts_address": "Hello Chris!" } }
-}
+{}