Split actions tab

TIER · Oct 6, 2022 · c33925e · c33925e
1 parent 4672fc9
commit c33925e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 23 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -489,6 +489,7 @@ label.disable=Disable
 label.enabled=Enabled
 label.disabled=Disabled
 label.enable-metadata-sources=Enable Metadata Sources
+label.approve-metadata-sources=Approve Metadata Sources
 label.title=Title
 label.author=Author
 label.creation-date=Creation Date

diff --git a/ui/src/app/dashboard/view/ActionsTab.js b/ui/src/app/dashboard/view/ActionsTab.js
@@ -1,47 +1,77 @@
 import React from 'react';
+import { useParams } from 'react-router';
 import { MetadataActions } from '../../admin/container/MetadataActions';
 import UserActions from '../../admin/container/UserActions';
 import Spinner from '../../core/components/Spinner';
 
 import Translate from '../../i18n/components/translate';
 import SourceList from '../../metadata/domain/source/component/SourceList';
 
+import Nav from 'react-bootstrap/Nav';
+import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+import Badge from 'react-bootstrap/Badge';
+
 export function ActionsTab({ sources, users, reloadSources, reloadUsers, loadingSources, loadingUsers }) {
 
+    const { path, url } = useRouteMatch();
+
     return (
         <>
             <section className="section">
                 <div className="section-body border border-top-0 border-primary">
                     <div className="section-header bg-primary p-2 text-light">
                         <div className="row justify-content-between">
                             <div className="col-12">
-                                <span className="lead"><Translate value="label.enable-metadata-sources">Enable Metadata Sources</Translate></span>
+                                <span className="lead">Actions Required<Translate value=""></Translate></span>
                             </div>
                         </div>
                     </div>
-                    <div className="p-3">
-                        <MetadataActions type="source">
-                            {(enable) =>
-                                <SourceList entities={sources} onDelete={reloadSources} onEnable={(s, e) => enable(s, e, reloadSources)}>
-                                    {loadingSources && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
-                                </SourceList>
-                            }
-                        </MetadataActions>
-                    </div>
-                </div>
-            </section>
-            <section className="section">
-                <div className="section-body border border-top-0 border-primary">
-                    <div className="section-header bg-primary p-2 text-light">
-                        <div className="row justify-content-between">
-                            <div className="col-12">
-                                <span className="lead"><Translate value="label.user-access-request">User Access Request</Translate></span>
-                            </div>
-                        </div>
+                    <div className="p-3 pb-0">
+                        <Nav variant="pills"
+                            activeKey="/home"
+                            onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
+                            >
+                            <Nav.Item>
+                                <NavLink className="nav-link" to={`${path}/enable`}>
+                                    <Translate value="label.enable-metadata-sources">Enable Metadata Sources</Translate>
+                                    { sources.length ? <Badge pill bg="danger" className="ms-1">{sources.length}</Badge> : '' }
+                                </NavLink>
+                            </Nav.Item>
+                            <Nav.Item>
+                                <NavLink className="nav-link" to={`${path}/useraccess`}>
+                                    <Translate value="label.user-access-request">User Access Request</Translate>
+                                    { users.length ? <Badge pill bg="danger" className="ms-1">{users.length}</Badge> : '' }
+                                </NavLink>
+                            </Nav.Item>
+                            <Nav.Item>
+                                <NavLink className="nav-link" to={`${path}/approve`}>
+                                    <Translate value="label.approve-metadata-sources">Approve Metadata Sources</Translate>
+                                </NavLink>
+                            </Nav.Item>
+                        </Nav>
+                        <hr />
                     </div>
-                    <UserActions users={users} reloadUsers={reloadUsers}>
-                        {loadingUsers && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
-                    </UserActions>
+
+                    <Switch>
+                        <Route exact path={`${path}`}>
+                            <Redirect to={`${url}/enable`} />
+                        </Route>
+                        <Route path={`${path}/enable`}>
+                            <MetadataActions type="source">
+                                {(enable) =>
+                                    <SourceList entities={sources} onDelete={reloadSources} onEnable={(s, e) => enable(s, e, reloadSources)}>
+                                        {loadingSources && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
+                                    </SourceList>
+                                }
+                            </MetadataActions>
+                        </Route>
+                        <Route path={`${path}/useraccess`} render={() =>
+                            <UserActions users={users} reloadUsers={reloadUsers}>
+                                {loadingUsers && <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> }
+                            </UserActions>
+                        } />
+                    </Switch>
                 </div>
             </section>
         </>