Config management

packages/yii-dev-panel/src/Application/Component/Layout.tsx

@@ -43,6 +43,7 @@ const pages = [
         name: 'Inspector',
         link: '#',
         items: [
+            {name: 'Config Management', link: '/inspector/config'},
             {name: 'Tests', link: '/inspector/tests'},
             {name: 'Analyse', link: '/inspector/analyse'},
             {name: 'File Explorer', link: '/inspector/files'},

packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts

@@ -189,6 +189,10 @@ export type EventsResponse = {
     console: EventListenersType;
     web: EventListenersType;
 };
+export type MergePlanResponseType = {
+    path: string;
+    data: any;
+};
 
 type Response<T = any> = {
     data: T;
@@ -330,6 +334,10 @@ export const inspectorApi = createApi({
             transformResponse: (result: Response<CommandResponseType>) => result.data,
             invalidatesTags: ['inspector/composer'],
         }),
+        getMergePlan: builder.query<MergePlanResponseType, void>({
+            query: (key) => `config/merge-plan`,
+            transformResponse: (result: Response<MergePlanResponseType>) => result.data,
+        }),
     }),
 });
 
@@ -361,5 +369,6 @@ export const {
     usePostComposerRequirePackageMutation,
     usePostCurlBuildMutation,
     useGetEventsQuery,
+    useGetMergePlanQuery,
     useGetOpcacheQuery,
 } = inspectorApi;

packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx

@@ -0,0 +1,91 @@
+import {Button, LinearProgress, Stack, Tab, Tabs, Typography} from '@mui/material';
+import Box from '@mui/material/Box';
+import {CodeHighlight} from '@yiisoft/yii-dev-panel-sdk/Component/CodeHighlight';
+import {JsonRenderer} from '@yiisoft/yii-dev-panel-sdk/Component/JsonRenderer';
+import {useGetMergePlanQuery} from '@yiisoft/yii-dev-panel/Module/Inspector/API/Inspector';
+import * as React from 'react';
+import {SyntheticEvent, useEffect, useMemo, useState} from 'react';
+import {useSearchParams} from 'react-router-dom';
+
+type TabPanelProps = {
+    children?: React.ReactNode;
+    index: string;
+    value: string;
+};
+
+function TabPanel(props: TabPanelProps) {
+    const {children, value, index, ...other} = props;
+
+    return (
+        <div role="tabpanel" hidden={value !== index} {...other}>
+            {value === index && <Box sx={{p: 3}}>{children}</Box>}
+        </div>
+    );
+}
+export const ConfigManagementPage = () => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const searchString = searchParams.get('filter') || '';
+    const mergePlanQuery = useGetMergePlanQuery();
+    const [env, setEnv] = useState<string>('');
+    const [group, setGroup] = useState<string>('');
+    const handleChangeEnv = (event: SyntheticEvent, newValue: string) => setEnv(newValue);
+    const handleChangeGroup = (event: SyntheticEvent, newValue: string) => setGroup(newValue);
+    const data = mergePlanQuery.data?.data;
+
+    const envs = useMemo(() => {
+        if (!mergePlanQuery.data || !data) {
+            return [];
+        }
+        return Object.keys(data || {});
+    }, [mergePlanQuery.isFetching]);
+
+    const groups = useMemo(() => {
+        if (!env || !data) {
+            return [];
+        }
+        return Object.keys(data[env] || {});
+    }, [data, env]);
+
+    useEffect(() => {
+        setGroup(groups[0] || '');
+    }, [env]);
+    useEffect(() => {
+        setEnv(envs[0] || '');
+    }, [data]);
+
+    const handleReload = () => mergePlanQuery.refetch();
+
+    return (
+        <>
+            <h2>{'Config Management'}</h2>
+            {mergePlanQuery.isFetching && <LinearProgress />}
+            {!mergePlanQuery.isFetching && (
+                <Box>
+                    <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
+                        <Typography variant="h6" my={1}>
+                            Path:{' '}
+                        </Typography>
+                        <Button onClick={handleReload}>Reload</Button>
+                    </Stack>
+
+                    <CodeHighlight language={'text/plain'} code={mergePlanQuery.data.path} showLineNumbers={false} />
+                    <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+                        <Tabs value={env} onChange={handleChangeEnv}>
+                            {envs.map((group) => (
+                                <Tab label={group} value={group} key={group} />
+                            ))}
+                        </Tabs>
+                    </Box>
+                    <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+                        <Tabs value={group} onChange={handleChangeGroup}>
+                            {groups.map((group) => (
+                                <Tab label={group} value={group} key={group} />
+                            ))}
+                        </Tabs>
+                    </Box>
+                    <JsonRenderer value={env in data && group in data[env] ? data[env][group] : undefined} />
+                </Box>
+            )}
+        </>
+    );
+};

packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts

@@ -6,6 +6,7 @@ export {ConfigurationPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/C
 export {ContainerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/ContainerPage';
 export {DefinitionsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/DefinitionsPage';
 export {ParametersPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Config/ParametersPage';
+export {ConfigManagementPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ConfigManagementPage';
 export {ContainerEntryPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerEntryPage';
 export {DatabasePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/DatabasePage';
 export {EventsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/EventsPage';

packages/yii-dev-panel/src/Module/Inspector/router.tsx

@@ -91,6 +91,10 @@ export const routes = [
                 path: 'cache',
                 element: <Pages.CachePage />,
             },
+            {
+                path: 'config',
+                element: <Pages.ConfigManagementPage />,
+            },
             {
                 path: 'config',
                 element: <Pages.ConfigurationPage />,