Skip to content

Commit c56a950

Browse files
jeff-phillips-18jeff-phillips-18
committed
Add providers for Env Config and Feature flags, fix lint errors
Signed-off-by: Jeffrey Phillips <[email protected]>
1 parent a02c7af commit c56a950

File tree

27 files changed

+465
-354
lines changed

27 files changed

+465
-354
lines changed

‎src/app/api/envConfig/route.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export async function GET() {
1717
DEPLOYMENT_TYPE: process.env.IL_UI_DEPLOYMENT || '',
1818
ENABLE_DEV_MODE: process.env.IL_ENABLE_DEV_MODE || 'false',
1919
ENABLE_DOC_CONVERSION: process.env.IL_ENABLE_DOC_CONVERSION || 'false',
20+
ENABLE_DOCUMENT_MANAGEMENT: process.env.IL_ENABLE_DOCUMENT_MANAGEMENT || '',
21+
ENABLE_SKILLS_FEATURES: process.env.IL_ENABLE_SKILLS_FEATURES || '',
22+
ENABLE_PLAYGROUND_FEATURES: process.env.IL_ENABLE_PLAYGROUND_FEATURES || '',
2023
EXPERIMENTAL_FEATURES: process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES || '',
2124
TAXONOMY_ROOT_DIR: process.env.NEXT_PUBLIC_TAXONOMY_ROOT_DIR || '',
2225
TAXONOMY_KNOWLEDGE_DOCUMENT_REPO:

‎src/app/contribute/knowledge/page.tsx‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
11
// src/app/contribute/knowledge/page.tsx
22
'use client';
3-
import React, { useEffect, useState } from 'react';
3+
import React from 'react';
44
import { Flex, Spinner } from '@patternfly/react-core';
55
import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens';
66
import { AppLayout } from '@/components/AppLayout';
77
import KnowledgeFormGithub from '@/components/Contribute/Knowledge/Github';
88
import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native';
9+
import { useEnvConfig } from '@/context/EnvConfigContext';
910

1011
const KnowledgeFormPage: React.FunctionComponent = () => {
11-
const [deploymentType, setDeploymentType] = useState<string | undefined>();
12-
const [loaded, setLoaded] = useState<boolean>();
13-
14-
useEffect(() => {
15-
let canceled = false;
16-
17-
const getEnvVariables = async () => {
18-
const res = await fetch('/api/envConfig');
19-
const envConfig = await res.json();
20-
if (!canceled) {
21-
setDeploymentType(envConfig.DEPLOYMENT_TYPE);
22-
setLoaded(true);
23-
}
24-
};
25-
26-
getEnvVariables();
27-
28-
return () => {
29-
canceled = true;
30-
};
31-
}, []);
12+
const {
13+
loaded,
14+
envConfig: { isGithubMode }
15+
} = useEnvConfig();
3216

3317
return (
3418
<AppLayout className="contribute-page">
3519
{loaded ? (
36-
<>{deploymentType === 'native' ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</>
20+
<>{!isGithubMode ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</>
3721
) : (
3822
<Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
3923
<Spinner size="xl" />

‎src/app/contribute/skill/page.tsx‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,27 @@
11
// src/app/contribute/skill/page.tsx
22
'use client';
3+
import React from 'react';
4+
import { Flex, Spinner } from '@patternfly/react-core';
5+
import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens/dist/esm/t_global_spacer_xl';
36
import { AppLayout } from '@/components/AppLayout';
47
import { SkillFormGithub } from '@/components/Contribute/Skill/Github/index';
58
import { SkillFormNative } from '@/components/Contribute/Skill/Native/index';
6-
import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens';
7-
import { Flex, Spinner } from '@patternfly/react-core';
8-
import { useEffect, useState } from 'react';
9+
import { useEnvConfig } from '@/context/EnvConfigContext';
910

1011
const SkillFormPage: React.FunctionComponent = () => {
11-
const [deploymentType, setDeploymentType] = useState<string | undefined>();
12-
const [loaded, setLoaded] = useState<boolean>();
13-
14-
useEffect(() => {
15-
let canceled = false;
16-
17-
const getEnvVariables = async () => {
18-
const res = await fetch('/api/envConfig');
19-
const envConfig = await res.json();
20-
if (!canceled) {
21-
setDeploymentType(envConfig.DEPLOYMENT_TYPE);
22-
setLoaded(true);
23-
}
24-
};
25-
26-
getEnvVariables();
12+
const {
13+
loaded,
14+
envConfig: { isGithubMode }
15+
} = useEnvConfig();
2716

28-
return () => {
29-
canceled = true;
30-
};
31-
}, []);
3217
return (
3318
<AppLayout className="contribute-page">
3419
{loaded ? (
35-
<>{deploymentType === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</>
20+
!isGithubMode ? (
21+
<SkillFormNative />
22+
) : (
23+
<SkillFormGithub />
24+
)
3625
) : (
3726
<Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
3827
<Spinner size="xl" />

‎src/app/dashboard/page.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
// src/app/dashboard/page.tsx
22
'use client';
33

4+
import React from 'react';
5+
import { Flex, Spinner } from '@patternfly/react-core';
6+
import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens/dist/esm/t_global_spacer_xl';
47
import '@patternfly/react-core/dist/styles/base.css';
58
import { AppLayout } from '@/components/AppLayout';
69
import { DashboardGithub } from '@/components/Dashboard/Github/dashboard';
710
import { DashboardNative } from '@/components/Dashboard/Native/dashboard';
8-
import { useEffect, useState } from 'react';
11+
import { useEnvConfig } from '@/context/EnvConfigContext';
912

1013
const Home: React.FunctionComponent = () => {
11-
const [deploymentType, setDeploymentType] = useState<string | undefined>();
14+
const {
15+
loaded,
16+
envConfig: { isGithubMode }
17+
} = useEnvConfig();
1218

13-
useEffect(() => {
14-
const getEnvVariables = async () => {
15-
const res = await fetch('/api/envConfig');
16-
const envConfig = await res.json();
17-
setDeploymentType(envConfig.DEPLOYMENT_TYPE);
18-
};
19-
getEnvVariables();
20-
}, []);
21-
22-
return <AppLayout>{deploymentType === 'native' ? <DashboardNative /> : <DashboardGithub />}</AppLayout>;
19+
return (
20+
<AppLayout>
21+
{loaded ? (
22+
!isGithubMode ? (
23+
<DashboardNative />
24+
) : (
25+
<DashboardGithub />
26+
)
27+
) : (
28+
<Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
29+
<Spinner size="xl" />
30+
</Flex>
31+
)}
32+
</AppLayout>
33+
);
2334
};
2435

2536
export default Home;

‎src/app/login/page.tsx‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,28 @@
11
// src/app/login/page.tsx
22
'use client';
33

4-
import React, { useState, useEffect } from 'react';
4+
import React from 'react';
55
import { Spinner } from '@patternfly/react-core';
66
import NativeLogin from '@/app/login/nativelogin';
77
import GithubLogin from '@/app/login/githublogin';
88
import './login-page.css';
9+
import { useEnvConfig } from '@/context/EnvConfigContext';
910

1011
const Login: React.FunctionComponent = () => {
11-
const [deploymentType, setDeploymentType] = useState<string | 'github'>();
12-
const [isLoading, setIsLoading] = useState<boolean>(true);
13-
14-
useEffect(() => {
15-
const chooseLoginPage = async () => {
16-
try {
17-
const res = await fetch('/api/envConfig');
18-
const envConfig = await res.json();
19-
setDeploymentType(envConfig.DEPLOYMENT_TYPE);
20-
} catch (error) {
21-
console.error('Error fetching environment config:', error);
22-
setDeploymentType('github');
23-
} finally {
24-
setIsLoading(false);
25-
}
26-
};
27-
chooseLoginPage();
28-
}, []);
12+
const {
13+
loaded,
14+
envConfig: { isGithubMode }
15+
} = useEnvConfig();
2916

3017
return (
3118
<div className="login-page-background">
32-
{isLoading ? (
19+
{!loaded ? (
3320
<div className="loading-container">
3421
<Spinner size="lg" />
3522
Loading...
3623
</div>
3724
) : (
38-
<div className="login-page-container">{deploymentType === 'native' ? <NativeLogin /> : <GithubLogin />}</div>
25+
<div className="login-page-container">{!isGithubMode ? <NativeLogin /> : <GithubLogin />}</div>
3926
)}
4027
</div>
4128
);

‎src/components/AppLayout.tsx‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33

44
import * as React from 'react';
55
import { usePathname, useRouter } from 'next/navigation';
6-
import HelpDropdown from './HelpDropdown/HelpDropdown';
76
import Link from 'next/link';
8-
import UserMenu from './UserMenu/UserMenu';
97
import { useSession } from 'next-auth/react';
10-
import { useState } from 'react';
118
import {
129
Bullseye,
1310
Spinner,
@@ -31,7 +28,11 @@ import {
3128
} from '@patternfly/react-core';
3229
import { BarsIcon } from '@patternfly/react-icons';
3330
import ThemePreference from '@/components/ThemePreference/ThemePreference';
31+
import HelpDropdown from './HelpDropdown/HelpDropdown';
32+
import UserMenu from './UserMenu/UserMenu';
33+
3434
import '../styles/globals.scss';
35+
import { useFeatureFlags } from '@/context/FeatureFlagsContext';
3536

3637
interface IAppLayout {
3738
children: React.ReactNode;
@@ -46,21 +47,13 @@ type Route = {
4647

4748
const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className }) => {
4849
const { data: session, status } = useSession();
49-
const [isExperimentalEnabled, setExperimental] = useState(false);
50+
const {
51+
featureFlags: { experimentalFeaturesEnabled }
52+
} = useFeatureFlags();
5053

5154
const router = useRouter();
5255
const pathname = usePathname();
5356

54-
React.useEffect(() => {
55-
// Fetch the experimental feature flag
56-
const fetchExperimentalFeature = async () => {
57-
const res = await fetch('/api/envConfig');
58-
const envConfig = await res.json();
59-
setExperimental(envConfig.EXPERIMENTAL_FEATURES === 'true');
60-
};
61-
fetchExperimentalFeature();
62-
}, []);
63-
6457
React.useEffect(() => {
6558
if (status === 'loading') return; // Do nothing while loading
6659
if (!session && pathname !== '/login') {
@@ -82,12 +75,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
8275

8376
//const isExperimentalEnabled = process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES === 'true';
8477

85-
// Only log if experimental features are enabled
86-
if (isExperimentalEnabled) {
87-
console.log('Is Experimental Enabled:', isExperimentalEnabled);
88-
console.log('Environment Variable:', process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES);
89-
}
90-
9178
const routes = [
9279
{ path: '/dashboard', label: 'Dashboard' },
9380
{
@@ -106,7 +93,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
10693
{ path: '/playground/endpoints', label: 'Custom model endpoints' }
10794
]
10895
},
109-
isExperimentalEnabled && {
96+
experimentalFeaturesEnabled && {
11097
path: '/experimental',
11198
label: 'Experimental features',
11299
children: [

‎src/components/Chat/ModelsContext.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
import * as React from 'react';
55
import { Endpoint, Model } from '@/types';
6+
import { useEnvConfig } from '@/context/EnvConfigContext';
67

78
const isValidModel = (model: Model) => model.name && model.apiURL && model.modelName;
89

@@ -20,17 +21,25 @@ type ModelsProviderProps = {
2021

2122
const ModelsContextProvider: React.FC<ModelsProviderProps> = ({ children }) => {
2223
const [models, setModels] = React.useState<Model[]>([]);
24+
const { loaded, envConfig } = useEnvConfig();
2325

2426
React.useEffect(() => {
25-
let canceled = false;
26-
27-
const fetchModels = async (): Promise<Model[]> => {
28-
const response = await fetch('/api/envConfig');
29-
const envConfig = await response.json();
30-
27+
if (loaded) {
3128
const defaultModels: Model[] = [
32-
{ isDefault: true, name: 'Granite-7b', apiURL: envConfig.GRANITE_API, modelName: envConfig.GRANITE_MODEL_NAME, enabled: true },
33-
{ isDefault: true, name: 'Merlinite-7b', apiURL: envConfig.MERLINITE_API, modelName: envConfig.MERLINITE_MODEL_NAME, enabled: true }
29+
{
30+
isDefault: true,
31+
name: 'Granite-7b',
32+
apiURL: envConfig.graniteApi,
33+
modelName: envConfig.graniteModelName,
34+
enabled: true
35+
},
36+
{
37+
isDefault: true,
38+
name: 'Merlinite-7b',
39+
apiURL: envConfig.merliniteApi,
40+
modelName: envConfig.merliniteModelName,
41+
enabled: true
42+
}
3443
];
3544

3645
const storedEndpoints = localStorage.getItem('endpoints');
@@ -45,19 +54,9 @@ const ModelsContextProvider: React.FC<ModelsProviderProps> = ({ children }) => {
4554
}))
4655
: [];
4756

48-
return [...defaultModels.filter(isValidModel), ...customModels.filter(isValidModel)];
49-
};
50-
51-
fetchModels().then((models) => {
52-
if (!canceled) {
53-
setModels(models);
54-
}
55-
});
56-
57-
return () => {
58-
canceled = true;
59-
};
60-
}, []);
57+
setModels([...defaultModels.filter(isValidModel), ...customModels.filter(isValidModel)]);
58+
}
59+
}, [loaded, envConfig]);
6160

6261
const contextValue = React.useMemo(
6362
() => ({

‎src/components/ClientProviders.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33

44
import { ReactNode } from 'react';
55
import { SessionProvider } from 'next-auth/react';
6-
import { ThemeProvider } from '../context/ThemeContext';
6+
import { ThemeProvider } from '@/context/ThemeContext';
7+
import { EnvConfigProvider } from '@/context/EnvConfigContext';
8+
import { FeatureFlagsProvider } from '@/context/FeatureFlagsContext';
79

810
interface ClientProviderProps {
911
children: ReactNode;
@@ -12,7 +14,11 @@ interface ClientProviderProps {
1214
const ClientProvider = ({ children }: ClientProviderProps) => {
1315
return (
1416
<SessionProvider>
15-
<ThemeProvider>{children}</ThemeProvider>
17+
<EnvConfigProvider>
18+
<FeatureFlagsProvider>
19+
<ThemeProvider>{children}</ThemeProvider>
20+
</FeatureFlagsProvider>
21+
</EnvConfigProvider>
1622
</SessionProvider>
1723
);
1824
};

0 commit comments

Comments
 (0)