From e9f1bd5ab8684c25d5c64a77ab08783503bb26c2 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 2 Aug 2022 14:59:52 -0700
Subject: [PATCH] Fixed issue with scrollbar on dashboard

Former-commit-id: 8c5c29392d932da493211d12ba7ab96a2fed0182
---
 .../domain/provider/component/ProviderList.js | 151 +++++++++---------
 .../domain/source/component/SourceList.js     |   9 +-
 2 files changed, 83 insertions(+), 77 deletions(-)

diff --git a/ui/src/app/metadata/domain/provider/component/ProviderList.js b/ui/src/app/metadata/domain/provider/component/ProviderList.js
index 1b367a69d..9a9ac90d4 100644
--- a/ui/src/app/metadata/domain/provider/component/ProviderList.js
+++ b/ui/src/app/metadata/domain/provider/component/ProviderList.js
@@ -18,83 +18,86 @@ export function ProviderList({ children, entities, reorder = true, first, last,
     const translator = useTranslator();
 
     return (
-        <Scroller entities={entities}>
-        {(limited) => <div className="table-responsive mt-3 provider-list!">
-            <table className="table table-striped w-100 table-hover">
-                <thead>
-                    <tr>
-                        <th><Translate value="label.order">Order</Translate></th>
-                        <th className="w-25"><Translate value="label.title">Title</Translate></th>
-                        <th className="w-15"><Translate value="label.provider-type">Provider Type</Translate></th>
-                        <th className="w-15"><Translate value="label.author">Author</Translate></th>
-                        <th className="w-15"><Translate value="label.creation-date">Created Date</Translate></th>
-                        <th className="text-end w-15"><Translate value="label.enabled">Enabled</Translate></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {limited.map((provider, idx) =>
-                        <tr key={idx}>
-                            <td className="align-middle">
-                                <div className="d-flex align-items-center">
-                                    {reorder ?
-                                        <div className="provider-index text-center text-primary font-weight-bold">{idx + 1}</div>
+        <React.Fragment>
+            <Scroller entities={entities}>
+            {(limited) => <div className="table-responsive mt-3 provider-list!">
+                <table className="table table-striped w-100 table-hover">
+                    <thead>
+                        <tr>
+                            <th><Translate value="label.order">Order</Translate></th>
+                            <th className="w-25"><Translate value="label.title">Title</Translate></th>
+                            <th className="w-15"><Translate value="label.provider-type">Provider Type</Translate></th>
+                            <th className="w-15"><Translate value="label.author">Author</Translate></th>
+                            <th className="w-15"><Translate value="label.creation-date">Created Date</Translate></th>
+                            <th className="text-end w-15"><Translate value="label.enabled">Enabled</Translate></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {limited.map((provider, idx) =>
+                            <tr key={idx}>
+                                <td className="align-middle">
+                                    <div className="d-flex align-items-center">
+                                        {reorder ?
+                                            <div className="provider-index text-center text-primary font-weight-bold">{idx + 1}</div>
+                                            :
+                                            <div className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
+                                        }
+                                        &nbsp;
+                                        <Button 
+                                            onClick={ () => onOrderDown(provider.resourceId) }
+                                            variant="link"
+                                            className=" px-1"
+                                            disabled={provider.resourceId === last || !reorder}
+                                            aria-label="Decrease reorder by 1">
+                                                <FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
+                                            <i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
+                                        </Button>
+                                        <Button
+                                            onClick={ () => onOrderUp(provider.resourceId) }
+                                            variant="link"
+                                            className="px-1"
+                                            aria-label="Increase reorder by 1"
+                                            disabled={provider.resourceId === first || !reorder}>
+                                            <FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
+                                            <i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
+                                        </Button>
+                                    </div>
+                                </td>
+                                <td className="align-middle">
+                                    <Link to={`/metadata/provider/${provider.resourceId}/configuration/options`}>{provider.name}</Link>
+                                </td>
+                                <td className="align-middle">{ provider['@type'] }</td>
+                                <td className="align-middle">{ provider.createdBy }</td>
+                                <td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
+                                <td className="align-middle">
+                                    <span className="d-flex justify-content-end">
+                                    {onEnable && isAdmin ?
+                                        <Form.Check
+                                            size="lg"
+                                            type="switch"
+                                            id={`enable-switch-${provider.resourceId}`}
+                                            aria-label={translator(provider.enabled ? 'label.disable' : 'label.enable')}
+                                            onChange={({ target: { checked } }) => onEnable(provider, checked)}
+                                            checked={provider.enabled}
+                                        >
+                                        </Form.Check>
                                         :
-                                        <div className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
+                                        <Badge variant={provider.enabled ? 'success' : 'danger'}>
+                                            <Translate value={provider.enabnled ? 'value.enabled' : 'value.disabled'}></Translate>
+                                        </Badge>
                                     }
-                                    &nbsp;
-                                    <Button 
-                                        onClick={ () => onOrderDown(provider.resourceId) }
-                                        variant="link"
-                                        className=" px-1"
-                                        disabled={provider.resourceId === last || !reorder}
-                                        aria-label="Decrease reorder by 1">
-                                            <FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
-                                        <i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
-                                    </Button>
-                                    <Button
-                                        onClick={ () => onOrderUp(provider.resourceId) }
-                                        variant="link"
-                                        className="px-1"
-                                        aria-label="Increase reorder by 1"
-                                        disabled={provider.resourceId === first || !reorder}>
-                                        <FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
-                                        <i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
-                                    </Button>
-                                </div>
-                            </td>
-                            <td className="align-middle">
-                                <Link to={`/metadata/provider/${provider.resourceId}/configuration/options`}>{provider.name}</Link>
-                            </td>
-                            <td className="align-middle">{ provider['@type'] }</td>
-                            <td className="align-middle">{ provider.createdBy }</td>
-                            <td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
-                            <td className="align-middle">
-                                <span className="d-flex justify-content-end">
-                                {onEnable && isAdmin ?
-                                    <Form.Check
-                                        size="lg"
-                                        type="switch"
-                                        id={`enable-switch-${provider.resourceId}`}
-                                        aria-label={translator(provider.enabled ? 'label.disable' : 'label.enable')}
-                                        onChange={({ target: { checked } }) => onEnable(provider, checked)}
-                                        checked={provider.enabled}
-                                    >
-                                    </Form.Check>
-                                    :
-                                    <Badge variant={provider.enabled ? 'success' : 'danger'}>
-                                        <Translate value={provider.enabnled ? 'value.enabled' : 'value.disabled'}></Translate>
-                                    </Badge>
-                                }
-                                </span>
-                            </td>
-                        </tr>
-                    )}
-                </tbody>
-            </table>
+                                    </span>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+            }
+            </Scroller>
             {children}
-        </div>
-        }
-        </Scroller>
+        </React.Fragment>
+        
     );
 }
 
diff --git a/ui/src/app/metadata/domain/source/component/SourceList.js b/ui/src/app/metadata/domain/source/component/SourceList.js
index 42af027dd..8e8a10825 100644
--- a/ui/src/app/metadata/domain/source/component/SourceList.js
+++ b/ui/src/app/metadata/domain/source/component/SourceList.js
@@ -23,7 +23,8 @@ export default function SourceList({ entities, onDelete, onEnable, onChangeGroup
     const canEnable = useCanEnable();
 
     return (
-        <Scroller entities={entities}>
+        <React.Fragment>
+            <Scroller entities={entities}>
             {(limited) =>
                 <div className="table-responsive mt-3 source-list">
                     <table className="table table-striped w-100 table-hover">
@@ -122,9 +123,11 @@ export default function SourceList({ entities, onDelete, onEnable, onChangeGroup
                             </GroupsProvider>
                         </tbody>
                     </table>
-                    {children}
                 </div>
             }
-        </Scroller>
+            </Scroller>
+            {children}
+        </React.Fragment>
+        
     );
 }