feat: devtool add header slot (#3886)

Author: 2heal1

packages/chrome-devtools/src/App.tsx

@@ -18,6 +18,7 @@ const App = (props: RootComponentProps) => {
     handleSnapshot,
     handleProxyAddress,
     customValueValidate,
+    headerSlot,
   } = props;
   const [module, setModule] = useState(window.__FEDERATION__?.moduleInfo || {});
 
@@ -39,6 +40,7 @@ const App = (props: RootComponentProps) => {
               handleSnapshot={handleSnapshot}
               handleProxyAddress={handleProxyAddress}
               customValueValidate={customValueValidate}
+              headerSlot={headerSlot}
             />
           ) : (
             <Empty description={'No ModuleInfo Detected'} />

packages/chrome-devtools/src/component/Form/index.module.scss

@@ -45,6 +45,11 @@
     }
   }
 
+  & .headerSlot {
+    display: flex;
+    align-items: center;
+  }
+
   & .badge {
     display: flex;
     transform: scale(1.6);

packages/chrome-devtools/src/component/Form/index.tsx

@@ -45,6 +45,7 @@ interface FormProps {
   validateForm: any;
   enableHMR: string;
   onHMRChange: (on: boolean) => void;
+  headerSlot?: ReactNode;
 }
 const FormComponent = (props: FormProps & RootComponentProps) => {
   const {
@@ -222,13 +223,16 @@ const FormComponent = (props: FormProps & RootComponentProps) => {
             <div className={styles.status}>
               <Badge color={condition.color} className={styles.badge} />
               <span className={styles.message}>{condition.message}</span>
-              <Switch
-                checked={enableHMR === 'enable'}
-                checkedText={'Enable HMR'}
-                uncheckedText={'Disable HMR'}
-                onChange={hmrChange}
-                className={styles.switch}
-              />
+              <span className={styles.headerSlot}>
+                {props.headerSlot}
+                <Switch
+                  checked={enableHMR === 'enable'}
+                  checkedText={'Enable HMR'}
+                  uncheckedText={'Disable HMR'}
+                  onChange={hmrChange}
+                  className={styles.switch}
+                />
+              </span>
             </div>
           </div>
 

packages/chrome-devtools/src/component/Layout/index.tsx

@@ -59,6 +59,7 @@ const Layout = (
     getVersion,
     handleProxyAddress,
     customValueValidate,
+    headerSlot,
   } = props;
   const { producer } = separateType(moduleInfo);
   const [condition, setCondition] = useState(statusInfo.processing);
@@ -219,6 +220,7 @@ const Layout = (
           setVersionList={setVersionList}
           getVersion={getVersion}
           customValueValidate={customValueValidate}
+          headerSlot={headerSlot}
         />
       </Form>
 

packages/chrome-devtools/src/utils/types/common.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { getModuleInfo } from '../index';
 
 export interface FormItemStatus {
@@ -14,4 +15,5 @@ export interface RootComponentProps {
   getVersion?: (moduleName: string) => Promise<Array<string>>;
   handleProxyAddress?: (address: string) => string;
   customValueValidate?: (schema: string) => boolean;
+  headerSlot?: ReactNode;
 }