started working on adapters tab for wizard

packages/admin/src/src/components/Wizard/WizardAdaptersTab.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+    Paper, Toolbar, Button, Accordion, Box, AccordionSummary, AccordionDetails, Checkbox,
+} from '@mui/material';
+import { Check as IconCheck, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { I18n } from '@iobroker/adapter-react-v5';
+
+interface WizardAdaptersTabProps {
+    /** Function to call if wizard step finishes */
+    onDone: () => void;
+}
+
+interface AdapterOptions {
+    /** Adapter name */
+    name: string;
+    /** Adapter description */
+    description: string;
+}
+
+export default class WizardAdaptersTab extends React.Component<WizardAdaptersTabProps> {
+    /** Height of the toolbar */
+    private readonly TOOLBAR_HEIGHT = 64;
+
+    /**
+     * Render Accordion for given adapter
+     *
+     * @param options Adapter specific information
+     */
+    renderAdapterAccordion(options: AdapterOptions): React.ReactNode {
+        const { name, description } = options;
+
+        return <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
+            <Checkbox />
+            <Accordion sx={{
+                borderColor: 'background.paper', borderWidth: '1px', borderStyle: 'solid', width: '100%',
+            }}
+            >
+                <AccordionSummary
+                    sx={{
+                        backgroundColor: 'primary.main',
+                        fontWeight: 'bold',
+                    }}
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel1-content"
+                    id="panel1-header"
+                >
+                    {name}
+                </AccordionSummary>
+                <AccordionDetails sx={{ backgroundColor: 'background.appbar' }}>
+                    {description}
+                </AccordionDetails>
+            </Accordion>
+        </Box>;
+    }
+
+    /**
+     * Render the component
+     */
+    render(): React.ReactNode {
+        return <Paper sx={{
+            height: '100%',
+            maxHeight: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        }}
+        >
+            <Box sx={{
+                height: `calc(100% - ${this.TOOLBAR_HEIGHT}px)`,
+                width: '90%',
+                overflow: 'auto',
+                '-ms-overflow-style': 'none',
+                'scrollbar-width': 'none',
+                '&::-webkit-scrollbar': {
+                    display: 'none',
+                },
+            }}
+            >
+                <h2>{I18n.t('Cloud')}</h2>
+                {this.renderAdapterAccordion({
+                    name: 'IoT',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n' +
+                        '                malesuada lacus ex, sit amet blandit leo lobortis eget.',
+                })}
+                {this.renderAdapterAccordion({ name: 'Cloud', description: 'TODO' })}
+                <h2>{I18n.t('Logic')}</h2>
+                {this.renderAdapterAccordion({ name: 'Javascript', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'Scenes', description: 'TODO' })}
+                <h2>{I18n.t('Notifications')}</h2>
+                {this.renderAdapterAccordion({ name: 'Notification Manager', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'Telegram', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'E-Mail', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'Pushover', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'Signal', description: 'TODO' })}
+                <h2>{I18n.t('History')}</h2>
+                {this.renderAdapterAccordion({ name: 'History', description: 'TODO' })}
+                {this.renderAdapterAccordion({ name: 'SQL', description: 'TODO' })}
+                <h2>{I18n.t('Weather')}</h2>
+                {this.renderAdapterAccordion({ name: 'Weatherunderground', description: 'TODO' })}
+                <h2>{I18n.t('Visualization')}</h2>
+                {this.renderAdapterAccordion({ name: 'vis 2', description: 'TODO' })}
+            </Box>
+            <Toolbar sx={{
+                height: this.TOOLBAR_HEIGHT,
+                lineHeight: `${this.TOOLBAR_HEIGHT}px`,
+                width: '100%',
+            }}
+            >
+                <div style={{ flexGrow: 1 }} />
+                <Button
+                    color="primary"
+                    variant="contained"
+                    onClick={() => this.props.onDone()}
+                    startIcon={<IconCheck />}
+                >
+                    {I18n.t('Apply')}
+                </Button>
+            </Toolbar>
+        </Paper>;
+    }
+}

packages/admin/src/src/dialogs/WizardDialog.tsx

@@ -24,15 +24,16 @@
     Router, ToggleThemeMenu, I18n, type AdminConnection,
 } from '@iobroker/adapter-react-v5';
 
-import WizardPasswordTab from '../components/Wizard/WizardPasswordTab';
-import WizardLicenseTab from '../components/Wizard/WizardLicenseTab';
-import WizardFinishImage from '../assets/wizard-finish.jpg';
-import WizardWelcomeImage from '../assets/wizard-welcome.jpg';
-import WizardSettingsTab from '../components/Wizard/WizardSettingsTab';
-import WizardAuthSSLTab from '../components/Wizard/WizardAuthSSLTab';
-import WizardPortForwarding from '../components/Wizard/WizardPortForwarding';
-import Logo from '../assets/logo.png';
-import LongLogo from '../assets/longLogo.svg';
+import WizardPasswordTab from '@/components/Wizard/WizardPasswordTab';
+import WizardLicenseTab from '@/components/Wizard/WizardLicenseTab';
+import WizardFinishImage from '@/assets/wizard-finish.jpg';
+import WizardWelcomeImage from '@/assets/wizard-welcome.jpg';
+import WizardSettingsTab from '@/components/Wizard/WizardSettingsTab';
+import WizardAuthSSLTab from '@/components/Wizard/WizardAuthSSLTab';
+import WizardPortForwarding from '@/components/Wizard/WizardPortForwarding';
+import WizardAdaptersTab from '@/components/Wizard/WizardAdaptersTab';
+import Logo from '@/assets/logo.png';
+import LongLogo from '@/assets/longLogo.svg';
 
 const TOOLBAR_HEIGHT = 64;
 
@@ -241,6 +242,15 @@
         />;
     }
 
+    /**
+     * Render the adapters selection wizard tab
+     */
+    renderAdapters() {
+        return <WizardAdaptersTab
+            onDone={() => this.setState({ activeStep: this.state.activeStep + 1 })}
+        />;
+    }
+
     async onClose() {
         // read if discovery is available
         const discovery = await this.props.socket.getState('system.adapter.discovery.0.alive');
@@ -349,6 +359,7 @@
                             <Step><StepLabel>{this.props.t('Authentication')}</StepLabel></Step>
                             <Step><StepLabel>{this.props.t('Port forwarding')}</StepLabel></Step>
                             <Step><StepLabel>{this.props.t('Settings')}</StepLabel></Step>
+                            <Step><StepLabel>{this.props.t('Adapters')}</StepLabel></Step>
                             <Step><StepLabel>{this.props.t('Finish')}</StepLabel></Step>
                         </Stepper>
                     </Toolbar>
@@ -359,7 +370,8 @@
                 {this.state.activeStep === 3 ? <div className={this.props.classes.tabPanel}>{this.renderAuthentication()}</div> : null}
                 {this.state.activeStep === 4 ? <div className={this.props.classes.tabPanel}>{this.renderPortForwarding()}</div> : null}
                 {this.state.activeStep === 5 ? <div className={this.props.classes.tabPanel}>{this.renderSettings()}</div> : null}
-                {this.state.activeStep === 6 ? <div className={this.props.classes.tabPanel}>{this.renderFinish()}</div> : null}
+                {this.state.activeStep === 6 ? <div className={this.props.classes.tabPanel}>{this.renderAdapters()}</div> : null}
+                {this.state.activeStep === 7 ? <div className={this.props.classes.tabPanel}>{this.renderFinish()}</div> : null}
             </DialogContent>
         </Dialog>;
     }