Merge pull request #8 from snyk-tech-services/feat/license-org-view

feat: license org view template & styles
snyk-tech-services · Oct 1, 2020 · 61d90f2 · 61d90f2
2 parents a3e533c + 6ffc558
commit 61d90f2
Show file tree

Hide file tree

Showing 13 changed files with 1,009 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -45,25 +45,24 @@
     "handlebars": "4.7.6",
     "lodash": "4.17.20",
     "node-fetch": "2.6.1",
-    "snyk-api-ts-client": "1.5.0",
+    "snyk-api-ts-client": "1.5.2",
     "snyk-config": "^3.0.0",
     "source-map-support": "^0.5.16",
     "tslib": "2.0.1",
-    "yargs": "16.0.2",
-    "yargs-command-config": "1.0.5"
+    "yargs": "16.0.3"
   },
   "devDependencies": {
-    "cpx": "1.5.0",
     "@types/jest": "26.0.13",
     "@types/lodash": "4.14.161",
     "@types/node": "14.6.3",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
+    "cpx": "1.5.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
-    "jest": "^25.1.0",
+    "jest": "26.4.2",
     "prettier": "^1.19.1",
-    "ts-jest": "^25.1.0",
+    "ts-jest": "25.5.1",
     "ts-node": "8.6.2",
     "tsc-watch": "^4.1.0",
     "typescript": "^3.7.5"

diff --git a/src/cmds/generate.ts b/src/cmds/generate.ts
@@ -68,7 +68,7 @@ export async function handler(argv: {
       orgPublicId,
     );
     const generateReportFunc = outputHandlers[outputFormat];
-    const res = await generateReportFunc(licenseData, template, view);
+    const res = await generateReportFunc(orgPublicId, licenseData, template, view);
     if (res) {
       const outputFileName = `${orgPublicId}-${view}.html`;
       const outputFile = pathLib.resolve(__dirname, outputFileName);

diff --git a/src/lib/generate-output/html/index.ts b/src/lib/generate-output/html/index.ts
@@ -14,7 +14,14 @@ export const enum SupportedViews {
   // PROJECT_DEPENDENCIES = 'project-dependencies',
 }
 
+const transformDataFunc = {
+  [SupportedViews.ORG_LICENSES]: transformDataForLicenseView,
+  // TODO: support later
+  // [SupportedViews.PROJECT_DEPENDENCIES]: transformDataForDependencyView,
+};
+
 export async function generateHtmlReport(
+  orgPublicId: string,
   data: LicenseReportData,
   templateOverridePath: string | undefined = undefined,
   view: SupportedViews = SupportedViews.ORG_LICENSES,
@@ -27,13 +34,30 @@ export async function generateHtmlReport(
       hbsTemplate === DEFAULT_TEMPLATE ? 'default template' : hbsTemplate
     }`,
   );
-  await registerPeerPartial(hbsTemplate, 'inline-css');
   debug(`✅ Registered Handlebars.js partials`);
   const htmlTemplate = await compileTemplate(hbsTemplate);
   debug(`✅ Compiled template ${hbsTemplate}`);
-  return htmlTemplate(data);
+
+  const transformedData = transformDataFunc[view](orgPublicId, data);
+
+  return htmlTemplate(transformedData);
+}
+
+function transformDataForLicenseView(
+  orgPublicId: string,
+  data: LicenseReportData,
+): {
+  licenses: LicenseReportData;
+  orgPublicId: string;
+} {
+  return { licenses: data, orgPublicId };
 }
 
+// TODO: support later
+// function transformDataForDependencyView(data: LicenseReportData) {
+//   return data;
+// }
+
 function selectTemplate(view: SupportedViews, templateOverride?): string {
   switch (view) {
     case SupportedViews.ORG_LICENSES:
@@ -51,7 +75,11 @@ async function registerPeerPartial(
   name: string,
 ): Promise<void> {
   const file = path.join(__dirname, templatePath);
+  debug(`ℹ️  Registering peer partial template ${file}`);
+
   const template = await compileTemplate(file);
+  debug(`✅ Compiled template ${file}`);
+
   Handlebars.registerPartial(name, template);
 }
 

diff --git a/src/lib/generate-output/html/templates/inline-css.hbs b/src/lib/generate-output/html/templates/inline-css.hbs
diff --git a/src/lib/generate-output/html/templates/licenses-view.hbs b/src/lib/generate-output/html/templates/licenses-view.hbs
@@ -1,21 +1,204 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-    <meta http-equiv="Content-Language" content="en-us">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Snyk Licenses Report</title>
-    <link rel="icon" type="image/png" href="https://res.cloudinary.com/snyk/image/upload/v1468845142/favicon/favicon.png"
-      sizes="194x194">
-    <link rel="shortcut icon" href="https://res.cloudinary.com/snyk/image/upload/v1468845142/favicon/favicon.ico">
-    {{!-- {{> inline-css }} --}}
-  </head>
-
-  <body>
-    <main class="layout-stacked">
-      <h1>Hello!</h1>
-    </main>
-  </body>
-</html>
 
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta http-equiv="Content-Language" content="en-us">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Snyk Licenses Report</title>
+  <link rel="icon" type="image/png" href="https://res.cloudinary.com/snyk/image/upload/v1468845142/favicon/favicon.png"
+    sizes="194x194">
+  <link rel="shortcut icon" href="https://res.cloudinary.com/snyk/image/upload/v1468845142/favicon/favicon.ico">
+  {{!-- {{> inline-css }} --}}
+  <style type="text/css">
+    body {
+      margin: 0;
+      padding: 0;
+      font-weight: 400;
+    }
+
+    a {
+      color: #4b45a1;
+    }
+
+    h1,
+    h2 {
+      color: #393842;
+    }
+
+    .banner-logo {
+      padding-right: 2%;
+      margin-top: .85em;
+    }
+
+    .banner-container {
+      padding: 0 1.25rem;
+    }
+
+    .banner {
+      height: 4.0625rem;
+      padding: .75rem 0;
+    }
+
+    .banner {
+      background-color: #4b45a9;
+      padding: .625rem 0;
+      position: relative;
+      z-index: 1000;
+    }
+
+    .border-bottom {
+      border-bottom: 1px solid #ccc;
+    }
+
+    .border-top {
+      border-top: 1px solid #ccc;
+    }
+
+    .border-left {
+      border-left: 1px solid #ccc;
+    }
+
+    .border-right {
+      border-right: 1px solid #ccc;
+    }
+
+    .license_title {
+      border-left: .5rem solid #ccc;
+      padding: 4px;
+    }
+
+    .license_title--medium {
+      border-left-color: #df8620;
+    }
+
+    .license_title--high {
+      border-left-color: #b31a6b;
+    }
+
+    .display-flex {
+      display: flex;
+      max-width: 100%;
+    }
+
+    .column {
+      flex: 1 0 300px;
+      max-width: 100%;
+    }
+
+    .column-large {
+      flex: 1 0 500px;
+      max-width: 100%;
+    }
+
+    .dependency {
+      flex: 0 0 30%;
+      max-width: 100%;
+      word-break: break-all;
+    }
+
+    .u-padding-top--sm {
+      padding-top: .5rem;
+    }
+
+    .u-margin-top--sm {
+      margin-top: .5rem;
+    }
+
+    .u-padding--sm {
+      padding: .5rem;
+    }
+
+    .u-padding--xl {
+      padding: 2rem;
+    }
+  </style>
+</head>
+
+<body>
+  {{!-- {{> header }} --}}
+  <header id="banner" class="banner">
+    <div class="banner-container">
+      <div class="banner-logo">
+        <a class="brand" href="https://www.snyk.io" title="Snyk">
+          <svg width="68px" height="35px" viewBox="0 0 68 35" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            role="img">
+            <title>Snyk - Open Source Security</title>
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g fill="#fff">
+                <path
+                  d="M5.732,27.278 C3.445,27.278 1.589,26.885 0,26.124 L0.483,22.472 C2.163,23.296 4.056,23.689 5.643,23.689 C6.801,23.689 7.563,23.295 7.563,22.599 C7.563,20.594 0.333,21.076 0.333,15.839 C0.333,12.491 3.407,10.729 7.259,10.729 C9.179,10.729 11.161,11.249 12.444,11.704 L11.924,15.294 C10.577,14.774 8.747,14.291 7.222,14.291 C6.282,14.291 5.518,14.621 5.518,15.231 C5.518,17.208 12.903,16.815 12.903,21.925 C12.903,25.325 9.877,27.277 5.733,27.277 L5.732,27.278 Z M25.726,26.936 L25.726,17.894 C25.726,15.827 24.811,14.85 23.069,14.85 C22.219,14.85 21.329,15.09 20.719,15.46 L20.719,26.936 L15.352,26.936 L15.352,11.262 L20.602,10.83 L20.474,13.392 L20.652,13.392 C21.784,11.87 23.702,10.716 25.992,10.716 C28.736,10.716 31.112,12.416 31.112,16.436 L31.112,26.936 L25.724,26.936 L25.726,26.936 Z M61.175,26.936 L56.879,19.479 L56.446,19.479 L56.446,26.935 L51.082,26.935 L51.082,8.37 L56.447,0 L56.447,17.323 C57.515,16.017 61.112,11.059 61.112,11.059 L67.732,11.059 L61.454,17.689 L67.949,26.95 L61.175,26.95 L61.175,26.938 L61.175,26.936 Z M44.13,11.11 L41.93,18.262 C41.5,19.606 41.08,22.079 41.08,22.079 C41.08,22.079 40.75,19.516 40.292,18.172 L37.94,11.108 L31.928,11.108 L38.462,26.935 C37.572,29.04 36.199,30.815 34.369,30.815 C34.039,30.815 33.709,30.802 33.389,30.765 L31.255,34.061 C31.928,34.441 33.212,34.835 34.737,34.835 C38.703,34.835 41.359,31.627 43.215,26.885 L49.443,11.108 L44.132,11.108 L44.13,11.11 Z">
+                </path>
+              </g>
+            </g>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </header>
+
+  <main class="u-padding--xl">
+    <h1>Licenses Attribution Report</h1>
+    <h2>Org ID: {{orgPublicId}}</h2>
+    {{#each licenses}}
+    <div class="u-padding-top--sm">
+      <h1 class="license_title license_title--{{severity}}">
+        <a href="{{licenseUrl}}">{{id}}</a>
+      </h1>
+      <strong>Severity</strong>: {{severity}}
+      {{#if instructions}}
+      <strong>Legal Instructions</strong>: {{instructions}}
+      {{/if}}
+    </div>
+
+    <div class="display-flex border-right border-top border-bottom border-left u-margin-top--sm">
+      <div class="column-large">
+        <div>
+          <div class="display-flex">
+            <div class="u-padding--sm dependency border-right">
+              <strong>Dependencies</strong>
+            </div>
+            <div class="u-padding--sm">
+              <strong>Copyrights</strong>
+            </div>
+          </div>
+
+          <div>
+            {{#each dependencies}}
+            <div class="display-flex border-top">
+              <div class="u-padding--sm dependency">
+                {{name}}@{{version}}
+              </div>
+              <div class="u-padding--sm">
+                {{#each copyright}}
+                <div class="u-padding-top--sm">
+                  {{this}}
+                </div>
+                {{/each}}
+              </div>
+            </div>
+
+            {{/each}}
+          </div>
+        </div>
+      </div>
+      <div class="column border-left">
+        <div class="border-bottom u-padding--sm">
+          <strong>Projects in Snyk</strong>
+        </div>
+        <div class="u-padding--sm">{{#each projects}}{{id}}({{name}})<br>{{/each}}</div>
+      </div>
+      <div class="border-left">
+        <div class="border-bottom u-padding--sm">
+          <strong>License Text</strong>
+        </div>
+        <div class="u-padding--sm">{{{licenseText}}}</div>
+      </div>
+    </div>
+    </div>
+    {{/each}}
+  </main>
+</body>
+
+</html>