Merge pull request #376 from GinaIsaia/profile

Profile page added

Author: lpalashevski

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@lfai/egeria-ui-components",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "description": "Encapsulated reactjs components with business logic inside.",
   "license": "Apache-2.0",
   "repository": {

package.json

@@ -4,11 +4,12 @@ import { EgeriaAssetDetails } from '../Assets/Details';
 import { EgeriaAssetDetailsPrint } from '../Assets/Details/print';
 import { EgeriaGlossary } from '../Glossary';
 import { EgeriaLineageGraphRouteWrapper } from '../Lineage/Graph/RouteWrapper';
-import { ASSET_CATALOG_PATH, eNavigateTo, VISIBLE_COMPONENTS } from '@lfai/egeria-js-commons';
+import { ASSET_CATALOG_PATH, eNavigateTo, token, VISIBLE_COMPONENTS } from '@lfai/egeria-js-commons';
 import { EgeriaApp, EgeriaLogin, EgeriaPageNotFound, RequireAuth, RequirePermissions } from '@lfai/egeria-ui-core';
 
 import './index.scss';
 import { EgeriaLineageGraphPrint } from '../Lineage/Graph/print';
+import { EgeriaProfile } from '../Profile';
 
 console.log('API_URL', process.env.REACT_APP_API_URL);
 
@@ -84,6 +85,12 @@ export function Demo() {
                                   element={<EgeriaGlossary />} />
             </RequireAuth> } />
 
+            <Route path={'/profile'} element={<RequireAuth>
+              <RequirePermissions component={token.getValue() ? '*' : null}
+                                  showAccessDenied={true}
+                                  element={<EgeriaProfile />} />
+            </RequireAuth> } />
+
             <Route path={'/login'} element={
               <EgeriaLogin loginCallback={ () => eNavigateTo('/') }/>
             } />

src/components/Demo/index.tsx

@@ -0,0 +1,36 @@
+import { JWTInterface, token } from '@lfai/egeria-js-commons';
+import { Avatar, List, Paper, Text, Title } from '@mantine/core';
+
+export function EgeriaProfile() {
+  const decodedToken: JWTInterface | null = token.decodedObject();
+
+  return (<>
+     { decodedToken && <><Paper radius='md' withBorder p='lg' mb='md'>
+      <Avatar size={120} radius={120} mx='auto' />
+
+      <Text ta='center' fz='lg' weight={500} mt='md'>
+        { decodedToken?.sub }
+      </Text>
+    </Paper>
+
+    <Paper radius='md' withBorder p='lg' mb='md'>
+      <Title order={2}>Scopes</Title>
+
+      <List ml='md'>
+        { decodedToken?.scope.map((component: any, index: number) => {
+          return <List.Item key={index}><Text>{component}</Text></List.Item>
+        }) }
+      </List>
+    </Paper>
+
+    <Paper radius='md' withBorder p='lg' mb='md'>
+      <Title order={2}>Visible components</Title>
+
+      <List ml='md'>
+        { decodedToken?.visibleComponents.map((component: any, index: number) => {
+          return <List.Item key={index}><Text>{component}</Text></List.Item>
+        }) }
+      </List>
+    </Paper></> }
+  </>);
+}

src/components/Profile/index.tsx

@@ -5,6 +5,7 @@ import { EgeriaAssetDetails } from './components/Assets/Details';
 import { EgeriaAssetDetailsPrint } from './components/Assets/Details/print';
 import { EgeriaAssetCatalog } from './components/Assets/Catalog';
 import { EgeriaLineageGraphPrint } from './components/Lineage/Graph/print';
+import { EgeriaProfile } from './components/Profile';
 
 export {
   // components
@@ -14,5 +15,6 @@ export {
   EgeriaGlossary,
   EgeriaLineageGraph,
   EgeriaLineageGraphRouteWrapper,
-  EgeriaLineageGraphPrint
+  EgeriaLineageGraphPrint,
+  EgeriaProfile
 }