feat(myopencre): enable CSV download of all CREs

Author: PRAteek-singHWY

.python-version

@@ -1 +1 @@
-3.11
+3.11.9

application/defs/osib_defs.py

@@ -347,7 +347,7 @@ def paths_to_osib(
         attributes=Node_attributes(
             sources_i18n={
                 Lang("en"): _Source(
-                    name="Open Worldwide Application Security Project",
+                    name="Open Web Application Security Project",
                     source="https://owasp.org",
                 )
             }

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Button, Container, Header } from 'semantic-ui-react';
+
+import { useEnvironment } from '../../hooks';
+
+export const MyOpenCRE = () => {
+  const { apiUrl } = useEnvironment();
+  // console.log('API URL:', apiUrl);
+
+  const downloadCreCsv = async () => {
+    try {
+      const baseUrl = apiUrl || window.location.origin;
+
+      const backendUrl = baseUrl.includes('localhost') ? 'http://127.0.0.1:5000' : baseUrl;
+
+      const response = await fetch(`${backendUrl}/cre_csv`, {
+        method: 'GET',
+        headers: {
+          Accept: 'text/csv',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error ${response.status}`);
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = 'opencre-cre-mapping.csv';
+      document.body.appendChild(link);
+      link.click();
+
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('CSV download failed:', err);
+      alert('Failed to download CRE CSV');
+    }
+  };
+
+  return (
+    <Container style={{ marginTop: '3rem' }}>
+      <Header as="h1">MyOpenCRE</Header>
+
+      <p>
+        MyOpenCRE allows you to map your own security standard (e.g. SOC2) to OpenCRE Common Requirements
+        using a CSV spreadsheet.
+      </p>
+
+      <p>
+        Start by downloading the mapping template below, fill it with your standard’s controls, and map them
+        to CRE IDs.
+      </p>
+
+      <Button primary onClick={downloadCreCsv}>
+        Download CRE Catalogue (CSV)
+      </Button>
+    </Container>
+  );
+};

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx

@@ -23,8 +23,6 @@
     color: var(--muted-foreground);
     height: 1rem;
     width: 1rem;
-    pointer-events: none;
-    z-index: 1; 
   }
 
   input {

application/frontend/src/pages/Search/components/SearchBar.scss

@@ -21,6 +21,7 @@ import { ExplorerCircles } from './pages/Explorer/visuals/circles/circles';
 import { ExplorerForceGraph } from './pages/Explorer/visuals/force-graph/forceGraph';
 import { GapAnalysis } from './pages/GapAnalysis/GapAnalysis';
 import { MembershipRequired } from './pages/MembershipRequired/MembershipRequired';
+import { MyOpenCRE } from './pages/MyOpenCRE/MyOpenCRE';
 import { SearchName } from './pages/Search/SearchName';
 import { StandardSection } from './pages/Standard/StandardSection';
 
@@ -31,6 +32,12 @@ export interface IRoute {
 }
 
 export const ROUTES: IRoute[] = [
+  {
+    path: '/myopencre',
+    component: MyOpenCRE,
+    showFilter: false,
+  },
+
   {
     path: INDEX,
     component: SearchPage,

application/frontend/src/routes.tsx

@@ -7,6 +7,7 @@ import { Button } from 'semantic-ui-react';
 
 import { ClearFilterButton } from '../../components/FilterButton/FilterButton';
 import { useLocationFromOutsideRoute } from '../../hooks/useLocationFromOutsideRoute';
+import { MyOpenCRE } from '../../pages/MyOpenCRE/MyOpenCRE';
 import { SearchBar } from '../../pages/Search/components/SearchBar';
 
 export const Header = () => {
@@ -49,6 +50,9 @@ export const Header = () => {
               <a href="/explorer" className="nav-link">
                 Explorer
               </a>
+              <Link to="/myopencre" className="nav-link">
+                MyOpenCRE
+              </Link>
             </div>
 
             <div>
@@ -137,6 +141,9 @@ export const Header = () => {
           <a href="/explorer" className="nav-link" onClick={closeMobileMenu}>
             Explorer
           </a>
+          <a href="/myopencre" className="nav-link" onClick={MyOpenCRE}>
+            MyOpenCRE
+          </a>
         </div>
 
         <div className="mobile-auth">

application/frontend/src/scaffolding/Header/Header.tsx

@@ -301,16 +301,3 @@
     display: block;
   }
 }
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}

application/frontend/src/scaffolding/Header/header.scss

@@ -4,11 +4,11 @@ schema:         v0.90
 date:           2021/11/04
 children:
   "OWASP":
-    aliases: ["Open Worldwide Application Security Project", "owasp"]
+    aliases: ["Open Web Application Security Project", "owasp"]
     attributes:
       sources_i18n:
         en:
-          name:             "Open Worldwide Application Security Project® (OWASP)"
+          name:             "Open Web Application Security Project® (OWASP)"
     children:
       "ZAP":
         attributes: