Add ccdb5-ui npm infrastructure (#6794)

* Add ccdb-ui npm infrastructure * Fix bewd lint errors * Remove unneeded block * Add stylesheet * Fix import order * Add @cfpb/[email protected] * Remove ccdb5-ui wheel * Flush npm cache * Remove satellite * Add yargs to fix missing yargs dependency error * Fix URL name * Delete ccdb_ui.html * Refresh cache and bump @cfpb/ccdb5-ui * Remove unneeded context call * Add CSS overrides for global styles coming in * Update cfgov/legacy/views/complaint.py Co-authored-by: william higgins <[email protected]> * Add trailing newline * Update cfgov/legacy/views/complaint.py Co-authored-by: william higgins <[email protected]> * Update cfgov/legacy/views/complaint.py Co-authored-by: william higgins <[email protected]> * add cache-tag tests * remove explicit tag check * revert wsgi config * Update CSS padding Co-authored-by: william higgins <[email protected]> Co-authored-by: higs4281 <[email protected]>
cfpb · Jan 11, 2022 · d08b9fa · d08b9fa
1 parent 942b8e9
commit d08b9fa
Show file tree

Hide file tree

Showing 14 changed files with 232 additions and 8 deletions.
diff --git a/cfgov/cfgov/settings/base.py b/cfgov/cfgov/settings/base.py
@@ -106,7 +106,6 @@
     "login",
 
     # Satellites
-    "ccdb5_ui",
     "complaint_search",
     "countylimits",
     "crtool",

diff --git a/cfgov/cfgov/urls.py b/cfgov/cfgov/urls.py
@@ -29,7 +29,7 @@
 from housing_counselor.views import (
     HousingCounselorPDFView, HousingCounselorView
 )
-from legacy.views.complaint import ComplaintLandingView
+from legacy.views.complaint import CCDBSearchView, ComplaintLandingView
 from regulations3k.views import redirect_eregs
 from v1.views.documents import DocumentServeView
 
@@ -281,7 +281,9 @@ def empty_200_response(request, *args, **kwargs):
     # CCDB5-UI
     re_path(
         r'^data-research/consumer-complaints/search/',
-        include('ccdb5_ui.config.urls')),
+        CCDBSearchView.as_view(),
+        name='complaint-search'
+    ),
 
     re_path(r'^oah-api/rates/', include('ratechecker.urls')),
     re_path(r'^oah-api/county/', include('countylimits.urls')),

diff --git a/cfgov/jinja2/v1/ccdb-complaint/ccdb-search.html b/cfgov/jinja2/v1/ccdb-complaint/ccdb-search.html
@@ -0,0 +1,37 @@
+{% extends 'layout-full.html' %}
+
+{% block title %}
+  Search the Consumer Complaint Database | Consumer Financial Protection Bureau
+{% endblock %}
+
+{% block css %}
+    {{ super() }}
+    <link rel="stylesheet" href="{{ static('apps/ccdb-search/css/main.css') }}">
+{% endblock %}
+
+{% block desc %}
+    The Consumer Complaint Database is a collection of complaints about consumer financial products and services that we sent to companies for response.
+{% endblock %}
+
+{% block content_main_modifiers -%}
+  {{ super() }} ccdb-search
+{%- endblock %}
+
+{% block content_main %}
+  <div id="ccdb-ui-root"></div>
+{% endblock %}
+
+{% block javascript scoped %}
+    {{ super() }}
+    <script>
+      if ( document.body.parentElement.className.indexOf( 'no-js' ) === -1 ) {
+        !function() {
+          var s = [
+            'https://files.consumerfinance.gov/ccdb/metadata.js',
+            '{{ static('apps/ccdb-search/js/main.js') }}'
+          ];
+          jsl(s);
+        }()
+      }
+    </script>
+{% endblock javascript %}
diff --git a/...inja2/v1/complaint/complaint-landing.html → .../v1/ccdb-complaint/complaint-landing.html b/...inja2/v1/complaint/complaint-landing.html → .../v1/ccdb-complaint/complaint-landing.html
diff --git a/cfgov/legacy/tests/views/test_complaint.py b/cfgov/legacy/tests/views/test_complaint.py
@@ -5,18 +5,27 @@
 class ComplaintLandingViewTests(TestCase):
 
     def setUp(self):
-        self.landing_url = reverse('complaint-landing')
+        self.landing_url = reverse("complaint-landing")
+        self.search_url = reverse("complaint-search")
 
     @override_settings(
         FLAGS={"CCDB_TECHNICAL_ISSUES": [("boolean", False)]})
     def test_no_banner_when_flag_disabled(self):
         response = self.client.get(self.landing_url)
         self.assertEqual(response.status_code, 200)
-        self.assertNotContains(response, 'm-notification_explanation')
+        self.assertNotContains(response, "m-notification_explanation")
 
     @override_settings(
         FLAGS={"CCDB_TECHNICAL_ISSUES": [("boolean", True)]})
     def test_banner_when_flag_enabled(self):
         response = self.client.get(self.landing_url)
         self.assertEqual(response.status_code, 200)
-        self.assertContains(response, 'm-notification_explanation')
+        self.assertContains(response, "m-notification_explanation")
+
+    def test_landing_page_cache_tag(self):
+        response = self.client.get(self.landing_url)
+        self.assertTrue(response.has_header("Edge-Cache-Tag"))
+
+    def test_search_page_cache_tag(self):
+        response = self.client.get(self.search_url)
+        self.assertTrue(response.has_header("Edge-Cache-Tag"))
diff --git a/cfgov/legacy/views/complaint.py b/cfgov/legacy/views/complaint.py
@@ -14,7 +14,7 @@ class ComplaintLandingView(TemplateView):
     It also displays a warning banner if a trouble feature flag has been set.
     """
 
-    template_name = 'complaint/complaint-landing.html'
+    template_name = 'ccdb-complaint/complaint-landing.html'
 
     def get_context_data(self, **kwargs):
         context = super(ComplaintLandingView, self).get_context_data(**kwargs)
@@ -24,3 +24,22 @@ def get_context_data(self, **kwargs):
         })
 
         return context
+
+    def dispatch(self, *args, **kwargs):
+        response = super(ComplaintLandingView, self).dispatch(*args, **kwargs)
+        response['Edge-Cache-Tag'] = 'complaints'
+        return response
+
+
+class CCDBSearchView(TemplateView):
+    """Consumer Complaint Database search page view.
+
+    This view renders the template for the CCDB search application page.
+    """
+
+    def dispatch(self, *args, **kwargs):
+        response = super(CCDBSearchView, self).dispatch(*args, **kwargs)
+        response['Edge-Cache-Tag'] = 'complaints'
+        return response
+
+    template_name = 'ccdb-complaint/ccdb-search.html'
diff --git a/cfgov/unprocessed/apps/ccdb-search/.yarnrc b/cfgov/unprocessed/apps/ccdb-search/.yarnrc
@@ -0,0 +1,2 @@
+yarn-offline-mirror "./npm-packages-offline-cache"
+
diff --git a/cfgov/unprocessed/apps/ccdb-search/css/main.less b/cfgov/unprocessed/apps/ccdb-search/css/main.less
@@ -0,0 +1,59 @@
+@import (reference) 'cfpb-core.less';
+
+// TODO: !important's are added for styles that are overriding ccdb5-ui styles.
+.wrapper {
+  max-width: 1200px !important;
+}
+
+@tablet: ~"only screen and (min-width: 600px) and (max-width: 900px)";
+.wrapper__match-content {
+  @media @tablet {
+    padding-left: 30px !important;
+    padding-right: 30px !important;
+  }
+}
+
+.ccdb-search {
+  width: 100vw !important;
+  max-width: 100vw;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  box-sizing: border-box;
+  left: 50%;
+  right: 50%;
+  position: relative;
+  padding: 0 unit( 15px / 16px, em ) !important;
+
+  .respond-to-max( @bp-sm-max, {
+    padding: 0 unit( 10px / 16px, em ) !important;
+  } );
+
+  // Overrides for design system.
+  .o-expandable_target .o-expandable_cue-close, .o-expandable_target .o-expandable_cue-open {
+    display: block !important;
+  }
+
+  .o-expandable_label {
+    margin-bottom: 0.83333333em !important;
+  }
+
+  // Overrides for cfpb-chart-builder.
+  .cfpb-chart[data-chart-type="tile_map"] {
+    .highcharts-legend__tile-map {
+      transform: translate( 7px, 50px );
+    }
+  }
+
+  .cfpb-chart {
+    max-width: 100% !important;
+  }
+
+  #tile-chart-map {
+    height: auto;
+  }
+
+  // Overrides for styles in meta.less
+  .tags {
+    padding-left: 0;
+  }
+}
diff --git a/cfgov/unprocessed/apps/ccdb-search/js/main.js b/cfgov/unprocessed/apps/ccdb-search/js/main.js
@@ -0,0 +1 @@
+import '@cfpb/ccdb5-ui/dist/ccdb5.min.js';
diff --git a/cfgov/unprocessed/apps/ccdb-search/npm-packages-offline-cache/@cfpb-ccdb5-ui-2.4.6.tgz b/cfgov/unprocessed/apps/ccdb-search/npm-packages-offline-cache/@cfpb-ccdb5-ui-2.4.6.tgz
diff --git a/cfgov/unprocessed/apps/ccdb-search/package.json b/cfgov/unprocessed/apps/ccdb-search/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "ccdb5-ui",
+  "version": "0.0.1",
+  "private": "true",
+  "description": "Consumer Complaint Database (CCDB-UI) application that appears at https://www.consumerfinance.gov/data-research/consumer-complaints/search/.",
+  "author": {
+    "name": "Consumer Financial Protection Bureau",
+    "email": "[email protected]",
+    "url": "https://cfpb.github.io/"
+  },
+  "dependencies": {
+    "@cfpb/ccdb5-ui": "2.4.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cfpb/ccdb5-ui"
+  }
+}
diff --git a/cfgov/unprocessed/apps/ccdb-search/webpack-config.js b/cfgov/unprocessed/apps/ccdb-search/webpack-config.js
@@ -0,0 +1,71 @@
+/* ==========================================================================
+   Settings for webpack JavaScript bundling system.
+   ========================================================================== */
+
+   const TerserPlugin = require( 'terser-webpack-plugin' );
+
+   /* Set warnings to true to show linter-style warnings.
+      Set mangle to false and beautify to true to debug the output code. */
+   const COMMON_MINIFICATION_CONFIG = new TerserPlugin( {
+     parallel: true,
+     extractComments: false,
+     terserOptions: {
+       ie8: false,
+       ecma: 5,
+       warnings: false,
+       mangle: true,
+       output: {
+         comments: false,
+         beautify: false
+       }
+     }
+   } );
+
+   /* Commmon webpack 'module' option used in each configuration.
+      Runs code through Babel and uses global supported browser list. */
+   const COMMON_MODULE_CONFIG = {
+     rules: [ {
+       test: /\.js$/,
+       /* Exclude modules from transpiling.
+          The below regex will match and exclude all node modules
+          except those that start with `@cfpb/` or `cfpb-`.
+          Regex test: https://regex101.com/r/zizz3V/9 */
+       exclude: /node_modules\/(?!(?:@cfpb\/.+|cfpb\-.+)).+/,
+       use: {
+         loader: 'babel-loader?cacheDirectory=true',
+         options: {
+           presets: [ [ '@babel/preset-env', {
+             configPath: __dirname,
+             /* Use useBuiltIns: 'usage' and set `debug: true` to see what
+                scripts require polyfilling. */
+             useBuiltIns: false,
+             debug: false
+           } ] ]
+         }
+       }
+     } ]
+   };
+
+   const STATS_CONFIG  = {
+     stats: {
+       entrypoints: false
+     }
+   };
+
+   const conf = {
+     cache: true,
+     module: COMMON_MODULE_CONFIG,
+     mode: 'production',
+     output: {
+       filename: '[name]'
+     },
+     optimization: {
+       minimize: true,
+       minimizer: [
+         COMMON_MINIFICATION_CONFIG
+       ]
+     },
+     stats: STATS_CONFIG.stats
+   };
+
+   module.exports = { conf };
diff --git a/cfgov/unprocessed/apps/ccdb-search/yarn.lock b/cfgov/unprocessed/apps/ccdb-search/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@cfpb/[email protected]":
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/@cfpb/ccdb5-ui/-/ccdb5-ui-2.4.6.tgz#aec8b24b25f4d3ae5c00f3780a51c288e5417f56"
+  integrity sha512-OT4UnSvreitm4MDGiN+QOGMtWws38SwSpKLfQX9zrjMrIt/dQ83Y+VrThsxzSEnl6qP3u7l/NJIQrdu+zyBS/A==
diff --git a/requirements/libraries.txt b/requirements/libraries.txt
@@ -45,5 +45,4 @@ wagtailmedia==0.6.0
 # These packages are installed from GitHub.
 https://github.com/cfpb/owning-a-home-api/releases/download/0.17.1/owning_a_home_api-0.17.1-py3-none-any.whl
 https://github.com/cfpb/ccdb5-api/releases/download/1.6.3/ccdb5_api-1.6.3-py3-none-any.whl
-https://github.com/cfpb/ccdb5-ui/releases/download/2.4.4/ccdb5_ui-2.4.4-py3-none-any.whl
 https://github.com/cfpb/curriculum-review-tool/releases/download/2.1.4/crtool-2.1.4-py3-none-any.whl