Merge branch 'main' into getting-started

Signed-off-by: Christopher Andrew Hinchey <[email protected]>
p-oneil · Mar 2, 2023 · 4a135e6 · 4a135e6
2 parents e1448ca + 3b63856
commit 4a135e6
Show file tree

Hide file tree

Showing 50 changed files with 4,815 additions and 3,160 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,38 @@
+---
+name: Bug Report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -0,0 +1,20 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/user-story-template.md b/.github/ISSUE_TEMPLATE/user-story-template.md
@@ -0,0 +1,44 @@
+---
+name: User Story Template
+about: Create a user story for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Summary**
+
+A user story should typically have a summary structured this way:
+
+1. **As a** [user concerned by the story]
+1. **I want** [goal of the story]
+1. **so that** [reason for the story]
+
+
+**Acceptance Criteria**
+
+1. [If I do A.]
+1. [B should happen.]
+
+[
+Also, here are a few points that need to be addressed:
+
+1. Constraint 1;
+1. Constraint 2;
+1. Constraint 3.
+]
+
+**Resources:**
+
+* Mockups: [Here goes a URL to or the name of the mockup(s) in inVision];
+* Testing URL: [Here goes a URL to the testing branch or IP];
+* Staging URL: [Here goes a URL to the feature on staging];
+
+
+**Notes**
+
+[Some complementary notes if necessary:]
+
+* > Here goes a quote from an email
+* Here goes whatever useful information can exist…
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"
diff --git a/.github/workflows/e2e-ci.yml b/.github/workflows/e2e-ci.yml
@@ -0,0 +1,36 @@
+name: "Tests: E2E"
+
+on: [pull_request]
+
+env:
+  GITHUB_PR_NUMBER: ${{github.event.pull_request.number}}
+
+jobs:
+  tests_e2e_netlify_prepare:
+    name: Wait for deployment on Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Waiting for Netlify Preview
+        uses: josephduffy/wait-for-netlify-action@v1
+        id: wait-for-netflify-preview
+        with:
+          site_name: "mitre-saf-v2"
+          max_timeout: 180
+
+  tests_e2e_netlify:
+    needs: tests_e2e_netlify_prepare
+    name: Run end-to-end tests on Netlify PR preview
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: install dependencies
+        run: yarn install --frozen-lockfile
+      - name: install playwright browsers
+        run: npx playwright install --with-deps
+      - name: yarn run test:e2e
+        run: yarn run test:e2e
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: "https://deploy-preview-${{env.GITHUB_PR_NUMBER}}--mitre-saf-v2.netlify.app/"
+          DEBUG: pw:api
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
diff --git a/.gitignore b/.gitignore
@@ -7,8 +7,7 @@ node_modules
 .env
 dist
 .DS_Store
+.vscode
 /test-results/
 /playwright-report/
-/playwright/.cache/
-.vscode
-
+/playwright/.cache/
diff --git a/README.md b/README.md
@@ -14,8 +14,9 @@ This repository contains the frontend source code for the upcoming new https://s
 
 1. [Fork repository](https://github.com/mitre/saf-site) and clone it locally
 2. Install project dependencies: `yarn install`
-3. For developing use: `yarn dev`
-4. For production use: `yarn build` and `yarn preview` 
+3. Install playwright dependencies with `npx playwright install`
+4. For developing use: `yarn dev`
+5. For production use: `yarn build` and `yarn preview` 
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://mitre-saf-v2.netlify.app/)
 

diff --git a/app.vue b/app.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="bg-gray-50 dark:bg-dark-bg overscroll-none" >
     <NuxtLayout>
-      <!-- <header1 /> -->
       <NuxtLoadingIndicator />
       <!-- <NuxtLoadingBar :duration="1000" /> -->
       <NuxtPage />
-      <!-- <footer1 /> -->
     </NuxtLayout>
   </div>
 </template> 

diff --git a/components/Header.vue b/components/Header.vue
@@ -45,29 +45,28 @@
                 open
                   ? 'text-gray-900 dark:text-gray-400'
                   : '',
-                toolkit.some(e => e.href === route.fullPath) ? 'text-sky-500' : 'text-gray-600 dark:text-gray-400',
+                framework.some(e => e.href === route.fullPath) ? 'text-sky-500' : 'text-gray-600 dark:text-gray-400',
                 'group bg-white dark:bg-dark-bg rounded-md inline-flex items-center text-base font-medium  hover:text-gray-900 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
               ]">
-                <span>Toolkit</span>
+                <span>Framework</span>
                 <ChevronDownIcon :class="[
                   open ? 'text-gray-900 dark:text-gray-400'
                     : '',
-                  toolkit.some(e => e.href === route.fullPath) ? 'text-sky-500' : 'text-gray-600 dark:text-gray-400',
+                  framework.some(e => e.href === route.fullPath) ? 'text-sky-500' : 'text-gray-600 dark:text-gray-400',
                   'ml-2 h-5 w-5 group-hover:text-gray-900 dark:group-hover:text-gray-200'
                 ]" aria-hidden="true" />
               </PopoverButton>
 
-              <transition enter-active-class="transition ease-out duration-200"
-                enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0"
-                leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0"
-                leave-to-class="opacity-0 translate-y-1">
+              <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1"
+                enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150"
+                leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
                 <PopoverPanel
                   class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
                   <div class="rounded-lg shadow-lg ring-1 ring-black dark:ring-gray-500 ring-opacity-5 overflow-hidden">
                     <div class="relative grid gap-6 bg-white dark:bg-dark-bg px-5 py-6 sm:gap-8 sm:p-8">
-                      <NuxtLink v-for="item in toolkit" :key="item.name" :to="item.href" :class="[
+                      <NuxtLink v-for="item in framework" :key="item.name" :to="item.href" :class="[
                         '-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700',
-                        item.href == route.fullPath
+                        item.href.includes(route.fullPath + '/')
                           ? 'bg-gray-300 dark:bg-gray-700'
                           : 'text-gray-600 dark:text-gray-400'
                       ]">
@@ -112,10 +111,9 @@
                 ]" aria-hidden="true" />
               </PopoverButton>
 
-              <transition enter-active-class="transition ease-out duration-200"
-                enter-from-class="opacity-0 translate-y-1" enter-to-class="opacity-100 translate-y-0"
-                leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0"
-                leave-to-class="opacity-0 translate-y-1">
+              <transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 translate-y-1"
+                enter-to-class="opacity-100 translate-y-0" leave-active-class="transition ease-in duration-150"
+                leave-from-class="opacity-100 translate-y-0" leave-to-class="opacity-0 translate-y-1">
                 <PopoverPanel
                   class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
                   <div class="rounded-lg shadow-lg ring-1 ring-black dark:ring-gray-500 ring-opacity-5 overflow-hidden">
@@ -202,7 +200,7 @@
                 </div>
                 <div class="my-3">
                   <nav class="grid gap-y-8 py-2">
-                    <NuxtLink v-for="item in toolkit" :key="item.name" :to="item.href" :class="[
+                    <NuxtLink v-for="item in framework" :key="item.name" :to="item.href" :class="[
                       '-m-3 p-3 flex items-center rounded-md hover:bg-gray-50 dark:hover:bg-gray-700',
                       item.href == route.fullPath
                         ? 'bg-gray-300 dark:bg-gray-700'
@@ -311,48 +309,49 @@ import {
   MoonIcon,
   SunIcon,
   PencilAltIcon,
-  PresentationChartBarIcon
+  PresentationChartBarIcon,
+  UserGroupIcon
 } from '@heroicons/vue/outline';
 import { AcademicCapIcon, BookOpenIcon, ChevronDownIcon, RssIcon } from '@heroicons/vue/solid';
 
 ////  Data  ////
 const selected = ref("")
 const route = useRoute()
 // const options = ref(['Light', 'Dark', 'System'])
-const toolkit = ref([
+const framework = ref([
   {
     name: 'Plan',
     description:
       'Choose, tailor, and create security guidance appropriate for your mission.',
-    href: '/toolkit/plan',
+    href: '/framework/plan',
     icon: PencilAltIcon
   },
   {
     name: 'Harden',
     description:
       'Implement security baselines using our Ansible, Chef, and Terraform content.',
-    href: '/toolkit/harden',
+    href: '/framework/harden',
     icon: ShieldCheckIcon
   },
   {
     name: 'Validate',
     description:
       'Generate detailed security testing results through automated tests and manual attestation.',
-    href: '/toolkit/validate',
+    href: '/framework/validate',
     icon: ClipboardCheckIcon
   },
   {
     name: 'Normalize',
     description:
       'Convert security results from all your security tools into a common data format.',
-    href: '/toolkit/normalize',
+    href: '/framework/normalize',
     icon: CubeIcon
   },
   {
     name: 'Visualize',
     description:
       'Identify overall security status and deep-dive to solve specific security defects',
-    href: '/toolkit/visualize',
+    href: '/framework/visualize',
     icon: ViewGridIcon
   }
 ]);
@@ -393,6 +392,13 @@ const resources = ref([
       'Learn how to maximize our platform to get the most out of it.',
     href: '/training',
     icon: AcademicCapIcon
+  },
+  {
+    name: 'Admin Login',
+    description:
+      'Update and mantain content as an admin.',
+    href: 'https://saf-site-backend.herokuapp.com/admin/',
+    icon: UserGroupIcon
   }
 ]);
 

diff --git a/components/LoadingSpinner.vue b/components/LoadingSpinner.vue
@@ -0,0 +1,9 @@
+<template>
+  <button disabled type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
+    <svg aria-hidden="true" role="status" class="inline w-4 h-4 mr-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
+    </svg>
+    Loading...
+  </button>
+</template>
diff --git a/components/ReadingPage.vue b/components/ReadingPage.vue
@@ -1,12 +1,10 @@
 <template>
     <div class="relative py-16 bg-white dark:bg-dark-bg overflow-hidden min-h-screen h-full">
+        <ScrollToTop />
         <div
-            class="absolute inset-0 bg-[url(/assets/grid.svg)] bg-top [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]">
-        </div>
-        <div
-            class="relative w-full bg-white dark:bg-gray-800 px-6 py-12 shadow-2xl shadow-slate-700/10 ring-1 ring-gray-900/5 md:mx-auto md:max-w-3xl lg:max-w-4xl lg:pt-16 lg:pb-28">
+            class="relative w-full bg-white dark:bg-gray-800 px-6 py-12 shadow-2xl shadow-slate-700/10 dark:shadow-gray-600 ring-1 ring-gray-900/5 dark:ring-gray-700 md:mx-auto md:max-w-3xl lg:max-w-4xl lg:pt-16 lg:pb-28">
             <div class="relative px-4 sm:px-6 lg:px-8">
-                <div v-if="isLoaded" class="text-lg prose prose-lg max-w-prose mx-auto ">
+                <div class="text-lg prose prose-lg max-w-prose mx-auto ">
                     <h1>
                         <span
                             class="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-MITRE-silver sm:text-4xl">
@@ -23,9 +21,6 @@
                     </h1>
                     <slot> <!-- The body of the reading page goes here --></slot>
                 </div>
-                <div v-else class="text-lg prose prose-lg max-w-prose mx-auto ">
-                    <Loading />
-                </div>
             </div>
         </div>
     </div>
@@ -45,10 +40,6 @@ const props = defineProps({
     author: {
         type: String,
         required: true,
-    },
-    isLoaded: {
-        type: Boolean,
-        required: true,
     }
 });