From ab6fdbf17f97071c3ebe57f4e78aa2cca3b9630c Mon Sep 17 00:00:00 2001
From: Dmitrii Derepko <xepozz@list.ru>
Date: Sun, 8 Oct 2023 13:39:41 +0300
Subject: [PATCH 1/2] Add merge plan view page

---
 .../src/Application/Component/Layout.tsx      |  1 +
 .../src/Module/Inspector/API/Inspector.ts     |  9 +++
 .../Inspector/Pages/ConfigManagementPage.tsx  | 80 +++++++++++++++++++
 .../src/Module/Inspector/Pages/index.ts       |  1 +
 .../src/Module/Inspector/router.tsx           |  4 +
 5 files changed, 95 insertions(+)
 create mode 100644 packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx

diff --git a/packages/yii-dev-panel/src/Application/Component/Layout.tsx b/packages/yii-dev-panel/src/Application/Component/Layout.tsx
index 20dabdb5..a58f391e 100644
--- a/packages/yii-dev-panel/src/Application/Component/Layout.tsx
+++ b/packages/yii-dev-panel/src/Application/Component/Layout.tsx
@@ -46,6 +46,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'},
diff --git a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts
index c63c7206..218f9c70 100644
--- a/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts
+++ b/packages/yii-dev-panel/src/Module/Inspector/API/Inspector.ts
@@ -71,6 +71,10 @@ export type EventsResponse = {
     console: EventListenersType;
     web: EventListenersType;
 };
+export type MergePlanResponseType = {
+    path: string;
+    data: any;
+};
 
 type Response<T = any> = {
     data: T;
@@ -207,6 +211,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,
+        }),
     }),
 });
 
@@ -238,4 +246,5 @@ export const {
     usePostComposerRequirePackageMutation,
     usePostCurlBuildMutation,
     useGetEventsQuery,
+    useGetMergePlanQuery,
 } = inspectorApi;
diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx
new file mode 100644
index 00000000..bcf6fe4f
--- /dev/null
+++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx
@@ -0,0 +1,80 @@
+import {LinearProgress, Tab, Tabs} from '@mui/material';
+import Box from '@mui/material/Box';
+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 || !mergePlanQuery.data) {
+            return [];
+        }
+        return Object.keys(data[env] || {});
+    }, [mergePlanQuery.isFetching, env]);
+
+    useEffect(() => {
+        setGroup(groups[0] || '');
+    }, [env]);
+    useEffect(() => {
+        setEnv(envs[0] || '');
+    }, [data]);
+
+    return (
+        <>
+            <h2>{'Config Management'}</h2>
+            {mergePlanQuery.isFetching && <LinearProgress />}
+            {!mergePlanQuery.isFetching && (
+                <Box>
+                    <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>
+            )}
+        </>
+    );
+};
diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts
index bac2a237..6165b066 100644
--- a/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts
+++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/index.ts
@@ -2,6 +2,7 @@ export {AnalysePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/Analyse
 export {CachePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/CachePage';
 export {CommandsPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/CommandsPage';
 export {ComposerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ComposerPage';
+export {ConfigManagementPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ConfigManagementPage';
 export {ContainerEntryPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerEntryPage';
 export {ContainerPage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/ContainerPage';
 export {DatabasePage} from '@yiisoft/yii-dev-panel/Module/Inspector/Pages/DatabasePage';
diff --git a/packages/yii-dev-panel/src/Module/Inspector/router.tsx b/packages/yii-dev-panel/src/Module/Inspector/router.tsx
index 638e4199..054f2b35 100644
--- a/packages/yii-dev-panel/src/Module/Inspector/router.tsx
+++ b/packages/yii-dev-panel/src/Module/Inspector/router.tsx
@@ -108,6 +108,10 @@ export const routes = [
                 path: 'cache',
                 element: <Pages.CachePage />,
             },
+            {
+                path: 'config',
+                element: <Pages.ConfigManagementPage />,
+            },
         ],
     },
 ] satisfies RouteObject[];

From debe8294202f40adfdc9ce3ff676692ae225f6b2 Mon Sep 17 00:00:00 2001
From: Dmitrii Derepko <xepozz@list.ru>
Date: Sun, 8 Oct 2023 14:03:59 +0300
Subject: [PATCH 2/2] Add reload button

---
 .../Inspector/Pages/ConfigManagementPage.tsx    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx
index bcf6fe4f..13d9badf 100644
--- a/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx
+++ b/packages/yii-dev-panel/src/Module/Inspector/Pages/ConfigManagementPage.tsx
@@ -1,5 +1,6 @@
-import {LinearProgress, Tab, Tabs} from '@mui/material';
+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';
@@ -39,11 +40,11 @@ export const ConfigManagementPage = () => {
     }, [mergePlanQuery.isFetching]);
 
     const groups = useMemo(() => {
-        if (!env || !mergePlanQuery.data) {
+        if (!env || !data) {
             return [];
         }
         return Object.keys(data[env] || {});
-    }, [mergePlanQuery.isFetching, env]);
+    }, [data, env]);
 
     useEffect(() => {
         setGroup(groups[0] || '');
@@ -52,12 +53,22 @@ export const ConfigManagementPage = () => {
         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) => (