add new gui 2 structure

2c7592ac · Mohammad Torkashvand · 69bf36a3 · 2c7592ac · 2c7592ac · 2c7592ac
Commit 2c7592ac authored 1 year ago by Mohammad Torkashvand
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
+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 { SessionProvider } from 'next-auth/react';
+import { NextAdapter } from 'next-query-params';
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app';
+import Head from 'next/head';
+import { QueryParamProvider } from 'use-query-params';
+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 {
+    ApiClientContextProvider,
+    ColorModes,
+    ConfirmationDialogContextWrapper,
+    OrchestratorConfig,
+    OrchestratorConfigProvider,
+    StoreProvider,
+    WfoAuth,
+    WfoErrorBoundary,
+    WfoPageTemplate,
+    WfoToastsList,
+    defaultOrchestratorTheme,
+} from '@orchestrator-ui/orchestrator-ui-components';
+import { getAppLogo } from '@/components/AppLogo/AppLogo';
+import { getInitialOrchestratorConfig } from '@/configuration';
+import { TranslationsProvider } from '@/translations/translationsProvider';
+import '../font/inter.css';
+type AppOwnProps = { orchestratorConfig: OrchestratorConfig };
+const queryClientConfig: QueryClientConfig = {
+    defaultOptions: {
+        queries: {
+            cacheTime: 5 * 1000,
+            refetchOnWindowFocus: true,
+        },
+    },
+};
+function CustomApp({
+    Component,
+    pageProps,
+    orchestratorConfig,
+}: AppProps & AppOwnProps) {
+    const [queryClient] = useState(() => new QueryClient(queryClientConfig));
+    const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
+        ColorModes.LIGHT,
+    );
+    const handleThemeSwitch = (newThemeMode: EuiThemeColorMode) => {
+        setThemeMode(newThemeMode);
+        localStorage.setItem('themeMode', newThemeMode);
+    };
+    useEffect(() => {
+        // Initialize theme mode from localStorage or set it to 'light' if not present
+        const storedTheme = localStorage.getItem('themeMode');
+        if (
+            !storedTheme ||
+            (storedTheme !== ColorModes.LIGHT &&
+                storedTheme !== ColorModes.DARK)
+        ) {
+            handleThemeSwitch(ColorModes.LIGHT);
+        }
+    }, []);
+    return (
+        <WfoErrorBoundary>
+            <OrchestratorConfigProvider
+                initialOrchestratorConfig={orchestratorConfig}
+            >
+                <StoreProvider initialOrchestratorConfig={orchestratorConfig}>
+                    <SessionProvider session={pageProps.session}>
+                        <NoSSR>
+                            <WfoAuth>
+                                <EuiProvider
+                                    colorMode={themeMode}
+                                    modify={defaultOrchestratorTheme}
+                                >
+                                    <ApiClientContextProvider>
+                                        <QueryClientProvider
+                                            client={queryClient}
+                                            contextSharing={true}
+                                        >
+                                            <TranslationsProvider>
+                                                <Head>
+                                                    <link
+                                                        rel="icon"
+                                                        href="/favicon.png"
+                                                    />
+                                                    <title>
+                                                        Welcome to
+                                                        example-orchestrator-ui!
+                                                    </title>
+                                                </Head>
+                                                <main className="app">
+                                                    <ConfirmationDialogContextWrapper>
+                                                        <WfoPageTemplate
+                                                            getAppLogo={
+                                                                getAppLogo
+                                                            }
+                                                            onThemeSwitch={
+                                                                handleThemeSwitch
+                                                            }
+                                                        >
+                                                            <QueryParamProvider
+                                                                adapter={
+                                                                    NextAdapter
+                                                                }
+                                                                options={{
+                                                                    removeDefaultsFromUrl:
+                                                                        false,
+                                                                    enableBatching:
+                                                                        true,
+                                                                }}
+                                                            >
+                                                                <Component
+                                                                    {...pageProps}
+                                                                />
+                                                            </QueryParamProvider>
+                                                        </WfoPageTemplate>
+                                                        <WfoToastsList />
+                                                    </ConfirmationDialogContextWrapper>
+                                                    <ReactQueryDevtools
+                                                        initialIsOpen={false}
+                                                    />
+                                                </main>
+                                            </TranslationsProvider>
+                                        </QueryClientProvider>
+                                    </ApiClientContextProvider>
+                                </EuiProvider>
+                            </WfoAuth>
+                        </NoSSR>
+                    </SessionProvider>
+                </StoreProvider>
+            </OrchestratorConfigProvider>
+        </WfoErrorBoundary>
+    );
+}
+CustomApp.getInitialProps = async (
+    context: AppContext,
+): Promise<AppOwnProps & AppInitialProps> => {
+    const ctx = await App.getInitialProps(context);
+    return {
+        ...ctx,
+        orchestratorConfig: getInitialOrchestratorConfig(),
+    };
+};
+export default CustomApp;
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
+import NextAuth, { AuthOptions } from 'next-auth';
+import { JWT } from 'next-auth/jwt';
+import { OAuthConfig } from 'next-auth/providers';
+import {
+    WfoSession,
+    WfoUserProfile,
+} from '@orchestrator-ui/orchestrator-ui-components';
+const token_endpoint_auth_method = process.env.NEXTAUTH_CLIENT_SECRET
+    ? 'client_secret_basic'
+    : 'none';
+const authActive = process.env.AUTH_ACTIVE?.toLowerCase() != 'false';
+const wfoProvider: OAuthConfig<WfoUserProfile> = {
+    id: process.env.NEXTAUTH_ID || '',
+    name: process.env.NEXTAUTH_ID || '',
+    type: 'oauth',
+    clientId: process.env.NEXTAUTH_CLIENT_ID || '',
+    clientSecret: process.env.NEXTAUTH_CLIENT_SECRET || undefined,
+    wellKnown:
+        process.env.NEXTAUTH_WELL_KNOWN_OVERRIDE ??
+        `${process.env.NEXTAUTH_ISSUER || ''}/.well-known/openid-configuration`,
+    authorization: {
+        params: {
+            scope:
+                process.env.NEXTAUTH_AUTHORIZATION_SCOPE_OVERRIDE ??
+                'openid profile',
+        },
+    },
+    idToken: true,
+    checks: ['pkce', 'state'],
+    userinfo: {
+        request: async (context) => {
+            const { client, tokens } = context;
+            if (!context.provider.wellKnown || !tokens.access_token) {
+                return {};
+            }
+            return await client.userinfo(tokens.access_token);
+        },
+    },
+    profile(profile) {
+        return {
+            id: profile.sub,
+            name: profile.name ?? profile.preferred_username,
+            email: profile.email,
+        };
+    },
+    client: {
+        token_endpoint_auth_method,
+        response_types: ['code'],
+    },
+};
+export const authOptions: AuthOptions = {
+    providers: authActive ? [wfoProvider] : [],
+    callbacks: {
+        async jwt({ token, account, profile }) {
+            // The "account" is only available right after signing in -- adding useful data to the token
+            if (account) {
+                token.accessToken = account.access_token;
+                token.profile = profile;
+            }
+            return token;
+        },
+        async session({ session, token }: { session: WfoSession; token: JWT }) {
+            // Assign data to the session to be available in the client through the useSession hook
+            session.profile = token.profile as WfoUserProfile | undefined;
+            session.accessToken = token.accessToken
+                ? String(token.accessToken)
+                : '';
+            return session;
+        },
+    },
+};
+export default NextAuth(authOptions);
--- a/pages/forms.tsx
+++ b/pages/forms.tsx
+import React from 'react';
+import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { CreateForm } from '@orchestrator-ui/orchestrator-ui-components';
+export function FormsPage() {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    const handleSubmit = (userInputs: any) => {
+        // eslint-disable-next-line no-console
+        console.log('Submitted: ', userInputs);
+    };
+    return (
+        <>
+            <EuiPageHeader pageTitle="Form test" />
+            <EuiHorizontalRule />
+            <EuiSpacer />
+            <CreateForm
+                formKey={'all_form_fields'}
+                handleSubmit={handleSubmit}
+            />
+            <EuiSpacer />
+        </>
+    );
+}
+export default FormsPage;
--- a/pages/index.tsx
+++ b/pages/index.tsx
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import { EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import {
+    WfoStartPage,
+    useWfoSession,
+} from '@orchestrator-ui/orchestrator-ui-components';
+export function Index() {
+    const { session } = useWfoSession();
+    const t = useTranslations('main');
+    const username = session?.user?.name || '';
+    return (
+        <>
+            <EuiPageHeader pageTitle={`${t('welcome')} ${username}`} />
+            <EuiSpacer />
+            <WfoStartPage />
+        </>
+    );
+}
+export default Index;
--- a/pages/metadata/index.tsx
+++ b/pages/metadata/index.tsx
+import React from 'react';
+import { useRouter } from 'next/router';
+import {
+    PolicyResource,
+    WfoPageUnauthorized,
+    usePolicy,
+} from '@orchestrator-ui/orchestrator-ui-components';
+export const IndexPage = () => {
+    const router = useRouter();
+    const { isAllowed } = usePolicy();
+    if (!isAllowed(PolicyResource.NAVIGATION_METADATA)) {
+        return <WfoPageUnauthorized />;
+    }
+    router.push('/metadata/products');
+};
+export default IndexPage;
--- a/pages/metadata/productblocks.tsx
+++ b/pages/metadata/productblocks.tsx
+import React from 'react';
+import { WfoProductBlocksPage } from '@orchestrator-ui/orchestrator-ui-components';
+export const ProductBlocksPage = () => <WfoProductBlocksPage />;
+export default ProductBlocksPage;
--- a/pages/metadata/products.tsx
+++ b/pages/metadata/products.tsx
+import React from 'react';
+import { WfoProductsPage } from '@orchestrator-ui/orchestrator-ui-components';
+export const ProductsPage = () => <WfoProductsPage />;
+export default ProductsPage;
--- a/pages/metadata/resource-types.tsx
+++ b/pages/metadata/resource-types.tsx
+import React from 'react';
+import { WfoResourceTypesPage } from '@orchestrator-ui/orchestrator-ui-components';
+export const ResourceTypesPage = () => <WfoResourceTypesPage />;
+export default ResourceTypesPage;
--- a/pages/metadata/tasks.tsx
+++ b/pages/metadata/tasks.tsx
+import React from 'react';
+import { WfoTasksPage } from '@orchestrator-ui/orchestrator-ui-components';
+export const TasksPage = () => <WfoTasksPage />;
+export default TasksPage;
--- a/pages/metadata/workflows.tsx
+++ b/pages/metadata/workflows.tsx
+import React from 'react';
+import { WfoWorkflowsPage } from '@orchestrator-ui/orchestrator-ui-components';
+export const WorkflowsPage = () => <WfoWorkflowsPage />;
+export default WorkflowsPage;
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
+import React from 'react';
+import { WfoSettingsPage } from '@orchestrator-ui/orchestrator-ui-components';
+export function SettingsPage() {
+    return <WfoSettingsPage />;
+}
+export default SettingsPage;
--- a/pages/subscriptions/[subscriptionId].tsx
+++ b/pages/subscriptions/[subscriptionId].tsx
+import React from 'react';
+import { WfoSubscriptionDetailPage } from '@orchestrator-ui/orchestrator-ui-components';
+const SubscriptionDetailPage = () => <WfoSubscriptionDetailPage />;
+export default SubscriptionDetailPage;
--- a/pages/subscriptions/index.tsx
+++ b/pages/subscriptions/index.tsx
+import React from 'react';
+import {
+    PolicyResource,
+    WfoPolicyRenderPageFallback,
+    WfoSubscriptionsListPage,
+} from '@orchestrator-ui/orchestrator-ui-components';
+export default function SubscriptionsPage() {
+    return (
+        <WfoPolicyRenderPageFallback
+            resource={PolicyResource.NAVIGATION_SUBSCRIPTIONS}
+        >
+            <WfoSubscriptionsListPage />
+        </WfoPolicyRenderPageFallback>
+    );
+}
--- a/pages/tasks/[taskId].tsx
+++ b/pages/tasks/[taskId].tsx
+import React from 'react';
+import { useRouter } from 'next/router';
+import { WfoProcessDetailPage } from '@orchestrator-ui/orchestrator-ui-components';
+const TaskDetailPage = () => {
+    const router = useRouter();
+    const { taskId } = router.query;
+    return (
+        <>
+            {(taskId && typeof taskId === 'string' && (
+                <WfoProcessDetailPage processId={taskId} />
+            )) || <div>Invalid taskId</div>}
+        </>
+    );
+};
+export default TaskDetailPage;
--- a/pages/tasks/index.tsx
+++ b/pages/tasks/index.tsx
+import React from 'react';
+import {
+    PolicyResource,
+    WfoPolicyRenderPageFallback,
+    WfoTasksListPage,
+} from '@orchestrator-ui/orchestrator-ui-components';
+export function TasksPage() {
+    return (
+        <WfoPolicyRenderPageFallback resource={PolicyResource.NAVIGATION_TASKS}>
+            <WfoTasksListPage />
+        </WfoPolicyRenderPageFallback>
+    );
+}
+export default TasksPage;
--- a/pages/tasks/new/[taskName].tsx
+++ b/pages/tasks/new/[taskName].tsx
+import React from 'react';
+import { useRouter } from 'next/router';
+import { WfoStartProcessPage } from '@orchestrator-ui/orchestrator-ui-components';
+const StartTaskPage = () => {
+    const router = useRouter();
+    const { taskName } = router.query;
+    if (taskName && typeof taskName === 'string') {
+        return <WfoStartProcessPage isTask={true} processName={taskName} />;
+    }
+    return <div>Invalid arguments provided</div>;
+};
+export default StartTaskPage;
--- a/pages/tasks/new/index.tsx
+++ b/pages/tasks/new/index.tsx
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { PATH_TASKS } from '@orchestrator-ui/orchestrator-ui-components';
+const IndexPage = () => {
+    const router = useRouter();
+    useEffect(() => {
+        router.push(PATH_TASKS);
+    }, [router]);
+    return null;
+};
+export default IndexPage;
--- a/pages/workflows/[workflowId].tsx
+++ b/pages/workflows/[workflowId].tsx
+import React from 'react';
+import { useRouter } from 'next/router';
+import { WfoProcessDetailPage } from '@orchestrator-ui/orchestrator-ui-components';
+const WorkflowDetailPage = () => {
+    const router = useRouter();
+    const { workflowId } = router.query;
+    return (
+        <>
+            {(workflowId && typeof workflowId === 'string' && (
+                <WfoProcessDetailPage processId={workflowId} />
+            )) || <div>Invalid workflowId</div>}
+        </>
+    );
+};
+export default WorkflowDetailPage;
--- a/pages/workflows/index.tsx
+++ b/pages/workflows/index.tsx
+import React from 'react';
+import {
+    PolicyResource,
+    WfoPolicyRenderPageFallback,
+    WfoWorkflowsListPage,
+} from '@orchestrator-ui/orchestrator-ui-components';
+export default function WorkflowsPage() {
+    return (
+        <WfoPolicyRenderPageFallback
+            resource={PolicyResource.NAVIGATION_WORKFLOWS}
+        >
+            <WfoWorkflowsListPage />
+        </WfoPolicyRenderPageFallback>
+    );
+}
--- a/pages/workflows/new/[workflowName].tsx
+++ b/pages/workflows/new/[workflowName].tsx
+import React from 'react';
+import { useRouter } from 'next/router';
+import { WfoStartProcessPage } from '@orchestrator-ui/orchestrator-ui-components';
+const StartWorkflowPage = () => {
+    const router = useRouter();
+    const { workflowName } = router.query;
+    if (workflowName && typeof workflowName === 'string') {
+        return (
+            <WfoStartProcessPage isTask={false} processName={workflowName} />
+        );
+    }
+    return <div>Invalid arguments provided</div>;
+};
+export default StartWorkflowPage;