From 13b4178a795226852b97715266b4220c7aa0e26f Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 26 Apr 2021 12:27:43 -0700
Subject: [PATCH] stubbed out pages

---
 ui/src/app/App.js                             |  4 +-
 ui/src/app/admin/container/UserManagement.js  | 10 ++--
 ui/src/app/core/components/FormattedDate.js   |  4 +-
 ui/src/app/dashboard/container/Dashboard.js   | 14 ++---
 .../app/dashboard/container/ProvidersTab.js   |  7 +--
 ui/src/app/dashboard/container/SourcesTab.js  |  3 +-
 ui/src/app/metadata/Metadata.js               | 33 +++++++++++
 .../component/MetadataConfiguration.js        |  7 +++
 .../app/metadata/component/MetadataDetail.js  | 33 +++++++++++
 .../app/metadata/component/MetadataHeader.js  | 35 ++++++++++++
 .../app/metadata/component/MetadataHistory.js | 13 +++++
 .../app/metadata/component/MetadataOptions.js | 56 +++++++++++++++++++
 ui/src/app/metadata/editor/MetadataEditor.js  | 26 +++++++++
 ui/src/app/metadata/hoc/MetadataSchema.js     | 36 ++++++++++++
 ui/src/app/metadata/hoc/MetadataSelector.js   | 39 +++++++++++++
 ui/src/app/metadata/hooks/api.js              | 33 +++++++++++
 .../provider/component/ProviderList.js        | 22 ++++----
 .../metadata/source/component/SourceList.js   |  6 +-
 18 files changed, 346 insertions(+), 35 deletions(-)
 create mode 100644 ui/src/app/metadata/Metadata.js
 create mode 100644 ui/src/app/metadata/component/MetadataConfiguration.js
 create mode 100644 ui/src/app/metadata/component/MetadataDetail.js
 create mode 100644 ui/src/app/metadata/component/MetadataHeader.js
 create mode 100644 ui/src/app/metadata/component/MetadataHistory.js
 create mode 100644 ui/src/app/metadata/component/MetadataOptions.js
 create mode 100644 ui/src/app/metadata/editor/MetadataEditor.js
 create mode 100644 ui/src/app/metadata/hoc/MetadataSchema.js
 create mode 100644 ui/src/app/metadata/hoc/MetadataSelector.js
 create mode 100644 ui/src/app/metadata/hooks/api.js

diff --git a/ui/src/app/App.js b/ui/src/app/App.js
index f9acbb044..c979b0201 100644
--- a/ui/src/app/App.js
+++ b/ui/src/app/App.js
@@ -14,6 +14,7 @@ import Footer from './core/components/Footer';
 import Dashboard from './dashboard/container/Dashboard';
 import Header from './core/components/Header';
 import { UserProvider } from './core/user/UserContext';
+import { Metadata } from './metadata/Metadata';
 
 function App() {
     return (
@@ -28,6 +29,7 @@ function App() {
                                     <Redirect to="/dashboard" />
                                 </Route>
                                 <Route path="/dashboard" component={Dashboard} />
+                                <Route path="/metadata/:type/:id" component={Metadata} />
                             </Switch>
                         </main>
                         <Footer />
@@ -40,7 +42,7 @@ function App() {
 
 /*
 <main >
-                    <page-title class="sr-only sr-only-focusable"></page-title>
+                    <page-title className="sr-only sr-only-focusable"></page-title>
                     <router-outlet></router-outlet>
                     <notification-list></notification-list>
                 </main>
diff --git a/ui/src/app/admin/container/UserManagement.js b/ui/src/app/admin/container/UserManagement.js
index 0cf2c8fb1..d06a6e0dd 100644
--- a/ui/src/app/admin/container/UserManagement.js
+++ b/ui/src/app/admin/container/UserManagement.js
@@ -99,23 +99,23 @@ export default function UserManagement({ users, roles, onDelete, onSetRole }) {
             <td>{{ user.emailAddress }}</td>
             <td>
                 <label [for]="'role-' + user.username"
-                    class="sr-only"><translate-i18n key="action.user-role">User role</translate-i18n></label>
+                    className="sr-only"><translate-i18n key="action.user-role">User role</translate-i18n></label>
                 <select
                     [id]="'role-' + user.username"
                     [name]="'role-' + user.username"
                     [ngModel]="user.role"
-                    class="form-control"
+                    className="form-control"
                     (change)="setUserRole(user, $event.target.value)"
                     [disabled]="currentUser.username === user.username">
                     <option *ngFor="let role of roles$ | async" [value]="role">{{ role }}</option>
                 </select>
             </td>
             <td>
-                <button class="btn btn-link" (click)="deleteUser(user.username)" *ngIf="!(currentUser.username === user.username)">
-                    <span class="sr-only">
+                <button className="btn btn-link" (click)="deleteUser(user.username)" *ngIf="!(currentUser.username === user.username)">
+                    <span className="sr-only">
                         <translate-i18n key="label.delete-user">Delete User</translate-i18n>
                     </span>
-                    <i class="fa fa-trash fa-lg text-danger"></i>
+                    <i className="fa fa-trash fa-lg text-danger"></i>
                 </button>
             </td>
         </tr>*/
\ No newline at end of file
diff --git a/ui/src/app/core/components/FormattedDate.js b/ui/src/app/core/components/FormattedDate.js
index 7a18594a2..ea01aa1e8 100644
--- a/ui/src/app/core/components/FormattedDate.js
+++ b/ui/src/app/core/components/FormattedDate.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { format } from 'date-fns';
 
-export default function FormattedDate ({ date }) {
-    const formatted = React.useMemo(() => format(new Date(date), 'MMM Lo, Y'), [date]);
+export default function FormattedDate ({ date, time = false }) {
+    const formatted = React.useMemo(() => format(new Date(date), `MMM Lo, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);
 
     return (<>{ formatted }</>);
 }
\ No newline at end of file
diff --git a/ui/src/app/dashboard/container/Dashboard.js b/ui/src/app/dashboard/container/Dashboard.js
index 9580c2857..dc1274e98 100644
--- a/ui/src/app/dashboard/container/Dashboard.js
+++ b/ui/src/app/dashboard/container/Dashboard.js
@@ -44,15 +44,13 @@ export function Dashboard () {
                 </NavItem>
             </Nav>
             <Switch>
-                <Route>
-                    <Route exact path={`${path}`}>
-                        <Redirect to={ `${path}/metadata/manager/resolvers` } />
-                    </Route>
-                    <Route path={`${path}/metadata/manager/resolvers`} component={SourcesTab} />
-                    <Route path={`${path}/metadata/manager/providers`} component={ProvidersTab} />
-                    <Route path={`${path}/admin/management`} component={AdminTab} />
-                    <Route path={`${path}/admin/actions`} component={ActionsTab} />
+                <Route exact path={`${path}`}>
+                    <Redirect to={`${path}/metadata/manager/resolvers`} />
                 </Route>
+                <Route path={`${path}/metadata/manager/resolvers`} component={SourcesTab} />
+                <Route path={`${path}/metadata/manager/providers`} component={ProvidersTab} />
+                <Route path={`${path}/admin/management`} component={AdminTab} />
+                <Route path={`${path}/admin/actions`} component={ActionsTab} />
             </Switch>
         </div>
     );
diff --git a/ui/src/app/dashboard/container/ProvidersTab.js b/ui/src/app/dashboard/container/ProvidersTab.js
index 929c0e3e1..88ba28c5a 100644
--- a/ui/src/app/dashboard/container/ProvidersTab.js
+++ b/ui/src/app/dashboard/container/ProvidersTab.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import useFetch from 'use-http';
-import Translate from '../../i18n/components/translate';
-import API_BASE_PATH from '../../App.constant';
 
+import { useMetadataEntities } from '../../metadata/hooks/api';
+import Translate from '../../i18n/components/translate';
 import ProviderList from '../../metadata/provider/component/ProviderList';
 
 export function ProvidersTab () {
 
     const [providers, setProviders] = React.useState([]);
 
-    const { get, response } = useFetch(`${API_BASE_PATH}/MetadataResolvers`, {})
+    const { get, response } = useMetadataEntities('provider');
 
     async function loadProviders() {
         const providers = await get('/')
diff --git a/ui/src/app/dashboard/container/SourcesTab.js b/ui/src/app/dashboard/container/SourcesTab.js
index d047d54c6..8b55a0da8 100644
--- a/ui/src/app/dashboard/container/SourcesTab.js
+++ b/ui/src/app/dashboard/container/SourcesTab.js
@@ -4,12 +4,13 @@ import Translate from '../../i18n/components/translate';
 import API_BASE_PATH from '../../App.constant';
 
 import SourceList from '../../metadata/source/component/SourceList';
+import { useMetadataEntities } from '../../metadata/hooks/api';
 
 export function SourcesTab () {
 
     const [sources, setSources] = React.useState([]);
 
-    const { get, del, response } = useFetch(`${API_BASE_PATH}/EntityDescriptors`, {})
+    const { get, del, response } = useMetadataEntities('source');
 
     async function loadSources() {
         const sources = await get('/')
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
new file mode 100644
index 000000000..99deee5fd
--- /dev/null
+++ b/ui/src/app/metadata/Metadata.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { MetadataOptions } from './component/MetadataOptions';
+import { MetadataDetail } from './component/MetadataDetail';
+import { MetadataHistory } from './component/MetadataHistory';
+import { MetadataEditor } from './editor/MetadataEditor';
+import { MetadataSelector } from './hoc/MetadataSelector';
+import MetadataSchema from './hoc/MetadataSchema';
+
+export function Metadata () {
+
+    let { path } = useRouteMatch();
+
+    return (
+        <MetadataSelector>
+            <MetadataSchema>
+                <Switch>
+                    <Route path={`${path}/configuration/options`} render={ () =>
+                        <MetadataDetail>
+                            <MetadataOptions></MetadataOptions>
+                        </MetadataDetail>
+                    } />
+                    <Route path={`${path}/configuration/history`} render={ () =>
+                        <MetadataDetail>
+                            <MetadataHistory></MetadataHistory>
+                        </MetadataDetail>
+                    } />
+                    <Route path={`${path}/edit`} component={ MetadataEditor } />
+                </Switch>
+            </MetadataSchema>
+        </MetadataSelector>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataConfiguration.js b/ui/src/app/metadata/component/MetadataConfiguration.js
new file mode 100644
index 000000000..64fde5e01
--- /dev/null
+++ b/ui/src/app/metadata/component/MetadataConfiguration.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function MetadataConfiguration () {
+    return (
+        <></>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataDetail.js b/ui/src/app/metadata/component/MetadataDetail.js
new file mode 100644
index 000000000..d685727b8
--- /dev/null
+++ b/ui/src/app/metadata/component/MetadataDetail.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Translate from '../../i18n/components/translate';
+
+import { MetadataObjectContext } from '../hoc/MetadataSelector';
+
+export function MetadataDetail ({ children }) {
+
+    const metadata = React.useContext(MetadataObjectContext);
+
+    return (
+        <div className="container-fluid p-3">
+            <section className="section" tabIndex="0">
+                <div className="section-body px-4 pb-4 border border-info">
+                    <nav aria-label="breadcrumb">
+                        <ol className="breadcrumb breadcrumb-bar">
+                            <li className="breadcrumb-item">
+                                <Link to="/dashboard"><Translate value="action.dashboard">Dashboard</Translate></Link>
+                            </li>
+                            <li className="breadcrumb-item active" aria-current="page">
+                                <span className="display-6">
+                                    { metadata.serviceProviderName || metadata.name }
+                                </span>
+                            </li>
+                        </ol>
+                    </nav>
+                    { children }
+                </div>
+            </section>
+        </div>
+        
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataHeader.js b/ui/src/app/metadata/component/MetadataHeader.js
new file mode 100644
index 000000000..d9fcdc3da
--- /dev/null
+++ b/ui/src/app/metadata/component/MetadataHeader.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import FormattedDate from '../../core/components/FormattedDate';
+
+import Translate from '../../i18n/components/translate';
+
+export function MetadataHeader ({ model, current = true, enabled = true }) {
+    return (
+        <div className="card enabled-status">
+            <div className="card-body">
+                <div className="d-flex justify-content-between">
+                    <h5 className="card-title version-title">
+                        <Translate value="label.saved">Saved</Translate>:&nbsp;
+                        <span className="save-date">
+                            <FormattedDate date={model.modifiedDate} time={true} />
+                        </span>
+                        <br />
+                        <Translate value="label.by">By</Translate>:&nbsp;
+                        <span className="author">{model.createdBy }</span>
+                    </h5>
+                    
+                </div>
+                
+                <p className="card-text">
+                    <span className={`badge badge-${enabled ? 'primary' : 'danger' }`}>
+                        <Translate value={`value.${enabled ? 'enabled' : 'disabled'}`}>Enabled</Translate>
+                    </span>
+                    &nbsp;
+                    <span className={`badge badge-${current ? 'primary' : 'warning'}`}>
+                        <Translate value={`value.${current ? 'current' : 'not-current'}`}>Current</Translate>
+                    </span>
+                </p>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataHistory.js b/ui/src/app/metadata/component/MetadataHistory.js
new file mode 100644
index 000000000..a372179cc
--- /dev/null
+++ b/ui/src/app/metadata/component/MetadataHistory.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Translate from '../../i18n/components/translate';
+
+export function MetadataHistory () {
+    return (
+        <>
+            <h2 className="mb-4">
+                <Translate value={`label.version-history`}>version history</Translate>
+            </h2>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/component/MetadataOptions.js b/ui/src/app/metadata/component/MetadataOptions.js
new file mode 100644
index 000000000..853e660cb
--- /dev/null
+++ b/ui/src/app/metadata/component/MetadataOptions.js
@@ -0,0 +1,56 @@
+import { faArrowDown, faHistory } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import Translate from '../../i18n/components/translate';
+
+import { MetadataObjectContext } from '../hoc/MetadataSelector';
+import { MetadataHeader } from './MetadataHeader';
+
+export function MetadataOptions () {
+
+    const metadata = React.useContext(MetadataObjectContext);
+
+    const { type, id } = useParams();
+
+    return (
+        <>
+            <h2 className="mb-4">
+                <Translate value={`label.${type}-configuration`}>[{type}] configuration</Translate>
+            </h2>
+            <div className="container">
+                <MetadataHeader
+                    current={true}
+                    enabled={type === 'source' ? metadata.enabled : metadata.serviceEnabled}
+                    model={metadata} />
+                <div className="px-3 my-3 d-flex justify-content-between" id="navigation">
+                    <div>
+                        <Link className="btn btn-link" to={`/metadata/${type}/${id}/configuration/history`}>
+                            <FontAwesomeIcon icon={ faHistory } />&nbsp;
+                            <Translate value="action.version-history">Version History</Translate>
+                        </Link>
+                        {type === 'provider' &&
+                            <button className="btn btn-link" onClick={"onScrollTo('filters')"}>
+                                <FontAwesomeIcon icon={faArrowDown} />&nbsp;
+                                <Translate value="label.filters">Filters</Translate>
+                            </button>
+                        }
+                    </div>
+                    {/*<div *ngIf="hasXml$ | async">
+                    <div className="btn-group" role="group" aria-label="Options selected">
+                        <a className="btn" routerLink="../options" routerLinkActive="btn-primary" aria-pressed="true">
+                            <span className="sr-only"><Translate value="action.toggle-view">Toggle view:</Translate></span>
+                            Options
+                        </a>
+                        <a className="btn" routerLink="../xml" routerLinkActive="btn-primary">
+                            <span className="sr-only"><Translate value="action.toggle-view">Toggle view:</Translate></span>
+                            XML
+                        </a>
+                    </div>
+                </div>*/}
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
new file mode 100644
index 000000000..8e0e4aece
--- /dev/null
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Translate from '../../i18n/components/translate';
+
+import { MetadataObjectContext, MetadataTypeContext } from '../hoc/MetadataSelector';
+
+export function MetadataEditor () {
+
+    const metadata = React.useContext(MetadataObjectContext);
+    const type = React.useContext(MetadataTypeContext);
+
+    return (
+        <section className="section" aria-label={`Edit metadata ${type} - ${metadata.serviceProviderName || metadata.name }`} tabIndex="0">
+            <div className="section-header bg-info p-2 text-white">
+                <div className="row justify-content-between">
+                    <div className="col-md-12">
+                        <span className="display-6">
+                            <i className="fa fa-fw fa-gears"></i>
+                            Edit metadata { type } - {metadata.serviceProviderName || metadata.name}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/hoc/MetadataSchema.js b/ui/src/app/metadata/hoc/MetadataSchema.js
new file mode 100644
index 000000000..dd0da1b85
--- /dev/null
+++ b/ui/src/app/metadata/hoc/MetadataSchema.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useParams } from 'react-router';
+import { useMetadataSchema, getSchemaPath } from '../hooks/api';
+
+export const MetadataSchemaContext = React.createContext();
+
+
+export function MetadataSchema({ children }) {
+
+    let { type } = useParams();
+
+    const { get, response } = useMetadataSchema();
+
+    const [schema, setSchema] = React.useState([]);
+
+    async function loadSchema(t) {
+        const source = await get(`/${getSchemaPath(t)}`)
+        if (response.ok) {
+            setSchema(source);
+        }
+    }
+
+    React.useEffect(() => { loadSchema(type) }, [type]);
+
+    return (
+        <>
+            {type &&
+                <MetadataSchemaContext.Provider value={type}>
+                    {children}
+                </MetadataSchemaContext.Provider>
+            }
+        </>
+    );
+}
+
+export default MetadataSchema;
\ No newline at end of file
diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
new file mode 100644
index 000000000..f7cd954a1
--- /dev/null
+++ b/ui/src/app/metadata/hoc/MetadataSelector.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useParams } from 'react-router';
+import { useMetadataEntity } from '../hooks/api';
+
+export const MetadataTypeContext = React.createContext();
+export const MetadataObjectContext = React.createContext();
+
+
+export function MetadataSelector ({ children }) {
+
+    let { type, id } = useParams();
+
+    const { get, response } = useMetadataEntity(type);
+
+    const [metadata, setMetadata] = React.useState([]);
+
+    async function loadMetadata(id) {
+        const source = await get(`/${id}`)
+        if (response.ok) {
+            setMetadata(source);
+        }
+    }
+
+    React.useEffect(() => { loadMetadata(id) }, [id]);
+
+    return (
+        <>
+        {type &&
+            <MetadataTypeContext.Provider value={type}>
+                {metadata && metadata.version &&
+                <MetadataObjectContext.Provider value={metadata}>{children}</MetadataObjectContext.Provider>
+                }
+            </MetadataTypeContext.Provider>
+        }
+        </>
+    );
+}
+
+export default MetadataSelector;
\ No newline at end of file
diff --git a/ui/src/app/metadata/hooks/api.js b/ui/src/app/metadata/hooks/api.js
new file mode 100644
index 000000000..3402e7eb8
--- /dev/null
+++ b/ui/src/app/metadata/hooks/api.js
@@ -0,0 +1,33 @@
+import useFetch from 'use-http';
+
+import API_BASE_PATH from '../../App.constant';
+
+const paths = {
+    source: 'EntityDescriptor',
+    provider: 'MetadataResolver'
+};
+
+const schema = {
+    source: 'MetadataSources'
+}
+
+export function getMetadataPath(type) {
+    return `/${paths[type]}`;
+}
+
+export function getSchemaPath(type) {
+    return `/${schema[type]}`;
+}
+
+export function useMetadataEntities(type = 'source') {
+    return useFetch(`${API_BASE_PATH}${getMetadataPath(type)}s`);
+}
+
+export function useMetadataEntity(type = 'source') {
+    return useFetch(`${API_BASE_PATH}${getMetadataPath(type)}`);
+}
+
+
+export function useMetadataSchema() {
+    return useFetch(`${API_BASE_PATH}/ui`);
+}
diff --git a/ui/src/app/metadata/provider/component/ProviderList.js b/ui/src/app/metadata/provider/component/ProviderList.js
index cea52f41b..788162645 100644
--- a/ui/src/app/metadata/provider/component/ProviderList.js
+++ b/ui/src/app/metadata/provider/component/ProviderList.js
@@ -27,34 +27,34 @@ export default function ProviderList({ entities, onDelete }) {
                         <tr key={idx}>
                             <td>
                                 <div className="d-flex align-items-center">
-                                    <div class="provider-index text-center text-primary font-weight-bold">{ idx + 1 }</div>
+                                    <div className="provider-index text-center text-primary font-weight-bold">{ idx + 1 }</div>
                                     <button className="btn btn-link px-1"
                                         aria-label="Decrease reorder by 1">
                                             <FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
-                                        <i class="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
+                                        <i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
                                     </button>
                                     <button className="btn btn-link px-1"
                                         aria-label="Increase reorder by 1">
                                         <FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
-                                        <i class="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
+                                        <i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
                                     </button>
                                 </div>
                                 { /*
                                      
-                                    <div *ngIf="!(isSearching$ | async)" class="provider-index text-center text-primary font-weight-bold">{{ i + 1 }}</div>
-                                    <div *ngIf="(isSearching$ | async)" class="provider-index text-center text-primary font-weight-bold">&mdash;</div>
+                                    <div *ngIf="!(isSearching$ | async)" className="provider-index text-center text-primary font-weight-bold">{{ i + 1 }}</div>
+                                    <div *ngIf="(isSearching$ | async)" className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
                                     &nbsp;
-                                    <button class="btn btn-link px-1"
+                                    <button className="btn btn-link px-1"
                                         (click)="updateOrderDown(provider); $event.stopPropagation();"
                                         [disabled]="isLast || (isSearching$ | async)"
                                         aria-label="Decrease reorder by 1">
-                                        <i class="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
+                                        <i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
                                     </button>
-                                    <button class="btn btn-link  px-1"
+                                    <button className="btn btn-link  px-1"
                                         (click)="updateOrderUp(provider); $event.stopPropagation();"
                                         [disabled]="isFirst || (isSearching$ | async)"
                                         aria-label="Increase reorder by 1">
-                                        <i class="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
+                                        <i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
                                     </button>
                                 </div>
                                 */ }
@@ -95,7 +95,7 @@ export default function ProviderList({ entities, onDelete }) {
                 </td>
                 <td className="text-center">
                     <span *ngIf="resolver.isDraft()">
-                        <span className="badge badge-warning" tabindex="0" aria-label="Warning Badge: Incomplete Form">
+                        <span className="badge badge-warning" tabIndex="0" aria-label="Warning Badge: Incomplete Form">
                             <Translate value="message.incomplete-form">
                             Incomplete Form
                             </Translate>
@@ -112,7 +112,7 @@ export default function ProviderList({ entities, onDelete }) {
                         </button>
                     </ng-container>
                     <ng-container *ngIf="!toggleEnabled.observers.length">
-                        <span tabindex="0"
+                        <span tabIndex="0"
                             [attr.aria-label]="(resolver.enabled ? 'value.enabled' : 'value.disabled') | translate"
                             className="badge"
                             *ngIf="!resolver.isDraft()"
diff --git a/ui/src/app/metadata/source/component/SourceList.js b/ui/src/app/metadata/source/component/SourceList.js
index 6ec1b71e3..fc8751a39 100644
--- a/ui/src/app/metadata/source/component/SourceList.js
+++ b/ui/src/app/metadata/source/component/SourceList.js
@@ -39,7 +39,7 @@ export default function SourceList({ entities, onDelete }) {
                     {entities.map((source, idx) =>
                         <tr key={ idx }>
                             <td>
-                                <Link to={`/metadata/resolver/${source.id}/configuration/options`}>{source.serviceProviderName }</Link>
+                                <Link to={`/metadata/source/${source.id}/configuration/options`}>{source.serviceProviderName }</Link>
                             </td>
                             <td>
                                 {source.entityId}
@@ -108,7 +108,7 @@ export default function SourceList({ entities, onDelete }) {
                 </td>
                 <td className="text-center">
                     <span *ngIf="resolver.isDraft()">
-                        <span className="badge badge-warning" tabindex="0" aria-label="Warning Badge: Incomplete Form">
+                        <span className="badge badge-warning" tabIndex="0" aria-label="Warning Badge: Incomplete Form">
                             <Translate value="message.incomplete-form">
                             Incomplete Form
                             </Translate>
@@ -125,7 +125,7 @@ export default function SourceList({ entities, onDelete }) {
                         </button>
                     </ng-container>
                     <ng-container *ngIf="!toggleEnabled.observers.length">
-                        <span tabindex="0"
+                        <span tabIndex="0"
                             [attr.aria-label]="(resolver.enabled ? 'value.enabled' : 'value.disabled') | translate"
                             className="badge"
                             *ngIf="!resolver.isDraft()"