OpenConceptLab/ocl_issues#2023 | Matching component with row states a…

…nd repo select

.eslintrc.json

@@ -236,7 +236,10 @@
           "sameas",
           "nbsp",
           "scroller",
-          "llm"
+          "llm",
+          "unmapped",
+          "unmap",
+          "mins"
         ],
         "skipIfMatch": [
           "http://[^s]*",

package.json

@@ -31,7 +31,7 @@
     "react-password-strength-bar": "^0.3.5",
     "react-router-dom": "^5.3.4",
     "react-virtuoso": "^4.12.3",
-    "react-window": "^1.8.10",
+    "react-window": "^1.8.11",
     "stacktrace-js": "^2.0.2",
     "xlsx": "^0.18.5"
   },
@@ -51,7 +51,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.4.1",
     "copy-webpack-plugin": "^4.6.0",
-    "cross-fetch": "^3.1.8",
+    "cross-fetch": "^3.2.0",
     "css-loader": "^0.28.8",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",

src/components/app/App.jsx

@@ -26,6 +26,7 @@ import UserSettings from '../users/UserSettings';
 import OrgHome from '../orgs/OrgHome';
 import URLRegistry from '../url-registry/URLRegistry'
 import RepoConceptsMatch from '../repos/RepoConceptsMatch'
+import Matching from '../repos/Matching'
 
 const AuthenticationRequiredRoute = ({component: Component, ...rest}) => (
   <Route
@@ -94,6 +95,7 @@ const App = props => {
               <SessionUserRoute exact path='/users/:user/edit' component={UserEdit} />
               <AuthenticationRequiredRoute path='/users/:user/settings' component={UserSettings} />
               <AuthenticationRequiredRoute path={`/users/:user/:tab(${orgTabsStr})?`} component={UserHome} />
+              <AuthenticationRequiredRoute exact path='/$term-match' component={Matching} />
               <Route path={`/orgs/:org/:tab(${orgTabsStr})?`} component={OrgHome} />
 
               <Route exact path='/403' component={Error403} />

src/components/common/AutocompleteLoading.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, LinearProgress } from '@mui/material'
+import { BLACK } from '../../common/colors'
+
+const AutocompleteLoading = ({ text }) => {
+
+  return (
+    <React.Fragment>
+      <Box sx={{ width: '100%', margin: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
+        {
+          text &&
+            <div className='col-xs-12' style={{width: '100%', textAlign: 'center', marginBottom: '10px', color: BLACK}}>
+              Loading results for <b>{ text }</b>
+            </div>
+        }
+        <div className='col-xs-8'>
+          <LinearProgress />
+        </div>
+      </Box>
+
+    </React.Fragment>
+  )
+}
+
+export default AutocompleteLoading;