feat: initial frontend for license inventory with component

src/routes.jsx

@@ -23,8 +23,10 @@ import User from './ui/views/User/User';
 import UserList from './ui/views/UserList/UserList';
 import RepoDetails from './ui/views/RepoDetails/RepoDetails';
 import RepoList from './ui/views/RepoList/RepoList';
+import LicenseList from './ui/views/LicenseList/LicenseList';
+import LicenseDetails from './ui/views/LicenseDetails/LicenseDetails';
 
-import { RepoIcon } from '@primer/octicons-react';
+import { RepoIcon, LawIcon } from '@primer/octicons-react';
 
 import { Group, AccountCircle, Dashboard } from '@material-ui/icons';
 
@@ -85,6 +87,22 @@ const dashboardRoutes = [
     layout: '/admin',
     visible: true,
   },
+  {
+    path: '/licenses',
+    name: 'Licenses',
+    icon: LawIcon,
+    component: LicenseList,
+    layout: '/admin',
+    visible: true,
+  },
+  {
+    path: '/license/:id',
+    name: 'License',
+    icon: Person,
+    component: LicenseDetails,
+    layout: '/admin',
+    visible: false,
+  },
 ];
 
 export default dashboardRoutes;

src/ui/views/LicenseDetails/LicenseDetails.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import GridItem from '../../components/Grid/GridItem';
+import GridContainer from '../../components/Grid/GridContainer';
+import LicenseCard from '../LicenseList/Components/LicenseCard';
+
+const license = {
+  spdx_id: 'MIT',
+  status: 'approved',
+  full_name: 'MIT License',
+  description:
+    'A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.',
+  commercial_use: true,
+  modification: true,
+  distribution: true,
+  patent_use: false,
+  private_use: true,
+  trademark_use: true,
+  liability: false,
+  warranty: false,
+};
+
+export default function LicenseDetails(props) {
+  return (
+    <GridContainer>
+      <GridItem>
+        <LicenseCard data={license} />
+      </GridItem>
+      <GridItem sx={12}>
+        <h4>Audit History</h4>
+      </GridItem>
+    </GridContainer>
+  );
+}

src/ui/views/LicenseList/Components/LicenseCard.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import GridItem from '../../../components/Grid/GridItem';
+import GridContainer from '../../../components/Grid/GridContainer';
+
+export default function License(props) {
+  const { data } = props;
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        background: '#EEEAEA',
+        borderRadius: '15px',
+        color: 'black',
+        marginTop: 15,
+        marginBottom: 15,
+      }}
+    >
+      <GridContainer>
+        <GridItem xs={12} sm={6}>
+          <div style={{ margin: 25 }}>
+            <h4 style={{ fontWeight: 'bold' }}>
+              <a href={`/admin/license/${data.spdx_id}`}>{data.full_name}</a>
+            </h4>
+            <p>{data.description}</p>
+          </div>
+        </GridItem>
+        <GridItem xs={0} sm={6}>
+          <div style={{ margin: 25 }}>
+            <GridContainer>
+              <GridItem xs={4}>
+                <b>Permissions</b>
+                <ul style={{ padding: 0, listStyleType: 'none', fontSize: '14px' }}>
+                  {data.commercial_use ? <li>Commercial use</li> : null}
+                  {data.modification ? <li>Modification</li> : null}
+                  {data.distribution ? <li>Distribution</li> : null}
+                  {data.patent_use ? <li>Patent use</li> : null}
+                  {data.private_use ? <li>Private Use</li> : null}
+                </ul>
+              </GridItem>
+              <GridItem xs={4}>
+                <b>Limitations</b>
+                <ul style={{ padding: 0, listStyleType: 'none', fontSize: '14px' }}>
+                  {!data.trademark_use ? <li> Trademark use</li> : null}
+                  {!data.liability ? <li>Liability</li> : null}
+                  {!data.warranty ? <li>Warranty</li> : null}
+                </ul>
+              </GridItem>
+              <GridItem xs={4}>
+                <b>Conditions</b>
+                <ul style={{ padding: 0, listStyleType: 'none', fontSize: '14px' }}>
+                  <li>License and copyright notice</li>
+                  <li>State changes</li>
+                </ul>
+              </GridItem>
+            </GridContainer>
+          </div>
+        </GridItem>
+      </GridContainer>
+    </div>
+  );
+}

src/ui/views/LicenseList/LicenseList.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import GridItem from '../../components/Grid/GridItem';
+import GridContainer from '../../components/Grid/GridContainer';
+import LicenseCard from './Components/LicenseCard';
+import { CheckCircleFillIcon } from '@primer/octicons-react';
+
+const licenses = [
+  {
+    spdx_id: 'Apache-2.0',
+    status: 'approved',
+    full_name: 'Apache License 2.0',
+    description:
+      'A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.',
+    commercial_use: true,
+    modification: true,
+    distribution: true,
+    patent_use: true,
+    private_use: true,
+    trademark_use: false,
+    liability: false,
+    warranty: false,
+  },
+  {
+    spdx_id: 'MIT',
+    status: 'approved',
+    full_name: 'MIT License',
+    description:
+      'A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.',
+    commercial_use: true,
+    modification: true,
+    distribution: true,
+    patent_use: false,
+    private_use: true,
+    trademark_use: true,
+    liability: false,
+    warranty: false,
+  },
+  {
+    spdx_id: '0BSD',
+    status: 'approved',
+    full_name: 'BSD Zero Clause License',
+    description:
+      'A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.',
+    commercial_use: true,
+    modification: true,
+    distribution: true,
+    patent_use: false,
+    private_use: true,
+    trademark_use: true,
+    liability: false,
+    warranty: false,
+  },
+];
+
+export default function LicenseList() {
+  return (
+    <GridContainer>
+      <GridItem sx={12}>
+        <h4>
+          <span style={{ color: 'green' }}>
+            <CheckCircleFillIcon size={24} />
+          </span>{' '}
+          Approved
+        </h4>
+      </GridItem>
+      {licenses
+        .filter((license) => license.status === 'approved')
+        .map((license) => {
+          return (
+            <GridItem key={license.spdx_id} xs={12} sm={12} md={12}>
+              <LicenseCard data={license} key={license.spdx_id} />
+            </GridItem>
+          );
+        })}
+    </GridContainer>
+  );
+}