From 677d285ef28b342874acc840d79740aec4606246 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sat, 3 Sep 2022 14:06:25 -0500
Subject: [PATCH] installPybricksDialog: move unsupported hubs to separate
 component

---
 .../InstallPybricksDialog.tsx                 | 116 +++++++++---------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
index 0827090e..b65dc2c5 100644
--- a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
+++ b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
@@ -59,6 +59,64 @@ const dialogBody = classNames(
     'pb-firmware-installPybricksDialog-body',
 );
 
+const UnsupportedHubs: React.VoidFunctionComponent = () => {
+    const i18n = useI18n();
+
+    return (
+        <div className={Classes.RUNNING_TEXT}>
+            <h4>
+                {i18n.translate('selectHubPanel.notOnListButton.info.mindstorms.title')}
+            </h4>
+            <ul>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.mindstorms.rcx',
+                    )}
+                </li>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.mindstorms.nxt',
+                    )}
+                </li>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.mindstorms.ev3',
+                    )}
+                </li>
+            </ul>
+            <h4>
+                {i18n.translate('selectHubPanel.notOnListButton.info.poweredUp.title')}
+            </h4>
+            <ul>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.poweredUp.wedo2',
+                    )}
+                    <em>*</em>
+                </li>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.poweredUp.duploTrain',
+                    )}
+                    <em>*</em>
+                </li>
+                <li>
+                    {i18n.translate(
+                        'selectHubPanel.notOnListButton.info.poweredUp.mario',
+                    )}
+                </li>
+            </ul>
+
+            <em>
+                *{' '}
+                {i18n.translate(
+                    'selectHubPanel.notOnListButton.info.poweredUp.footnote',
+                )}
+            </em>
+        </div>
+    );
+};
+
 const SelectHubPanel: React.VoidFunctionComponent = () => {
     const i18n = useI18n();
 
@@ -69,63 +127,7 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
             <Popover2
                 popoverClassName={Classes2.POPOVER2_CONTENT_SIZING}
                 placement="right-end"
-                content={
-                    <div className={Classes.RUNNING_TEXT}>
-                        <h4>
-                            {i18n.translate(
-                                'selectHubPanel.notOnListButton.info.mindstorms.title',
-                            )}
-                        </h4>
-                        <ul>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.mindstorms.rcx',
-                                )}
-                            </li>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.mindstorms.nxt',
-                                )}
-                            </li>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.mindstorms.ev3',
-                                )}
-                            </li>
-                        </ul>
-                        <h4>
-                            {i18n.translate(
-                                'selectHubPanel.notOnListButton.info.poweredUp.title',
-                            )}
-                        </h4>
-                        <ul>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.poweredUp.wedo2',
-                                )}
-                                <em>*</em>
-                            </li>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.poweredUp.duploTrain',
-                                )}
-                                <em>*</em>
-                            </li>
-                            <li>
-                                {i18n.translate(
-                                    'selectHubPanel.notOnListButton.info.poweredUp.mario',
-                                )}
-                            </li>
-                        </ul>
-
-                        <em>
-                            *{' '}
-                            {i18n.translate(
-                                'selectHubPanel.notOnListButton.info.poweredUp.footnote',
-                            )}
-                        </em>
-                    </div>
-                }
+                content={<UnsupportedHubs />}
                 renderTarget={({ isOpen: _isOpen, ref, ...targetProps }) => (
                     <Button
                         elementRef={ref as React.Ref<HTMLButtonElement>}