);
+
+ const button = await screen.getByRole('button', {
+ name: /Copy Url/i
+ });
+
+ await act(async () => {
+ fireEvent.click(button);
+ });
+
+ const msg = await screen.getByText(/Copied/i);
+
+ expect(msg).toBeInTheDocument();
+ });
+ });
+})
diff --git a/src/components/modules/instructions.js b/src/components/modules/instructions.js
new file mode 100644
index 0000000..bc5b6d4
--- /dev/null
+++ b/src/components/modules/instructions.js
@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react'; // eslint-disable-line
+import * as LINKS from '../../data/links';
+
+const Instructions = (props) => {
+ return (
+
+
+
+
+ This site is in Beta . Help us improve it by emailing site-scanning@gsa.gov
+
+
+
Site Scanning Query Builder
+ How it Works
+
+
+ Set the filters you want
+
+
+ Copy the generated URL
+
+
+ Use this URL in our Google Sheets or Microsoft Excel template to pull the data into a spreadsheet!
+
+
+
+ );
+};
+
+Instructions.propTypes = {};
+
+export default Instructions;
diff --git a/src/components/modules/query-builder.css b/src/components/modules/query-builder.css
new file mode 100644
index 0000000..8a07490
--- /dev/null
+++ b/src/components/modules/query-builder.css
@@ -0,0 +1,31 @@
+.main {
+ display: flex;
+ flex-direction: column-reverse;
+}
+
+.left {
+ overflow: auto;
+ background-color: #ddd;
+ border-right: #ddd 1px solid;
+}
+
+.right {
+ background-color: white;
+ flex: 1;
+ padding: 1rem;
+}
+
+@media all and (min-width: 1024px) {
+ .main {
+ flex-direction: row;
+ }
+ .left {
+ position: fixed;
+ height: 100vh;
+ width: 30%;
+ }
+ .right {
+ padding: 1rem 4rem;
+ margin-left: 30%;
+ }
+}
diff --git a/src/components/modules/query-builder.js b/src/components/modules/query-builder.js
new file mode 100644
index 0000000..f9b0305
--- /dev/null
+++ b/src/components/modules/query-builder.js
@@ -0,0 +1,27 @@
+import React from 'react'; // eslint-disable-line
+import { Provider } from 'react-redux';
+import store from '../../redux/index';
+import AvailableFields from './available-fields';
+import SelectedFields from './selected-fields';
+import BuilderActions from './builder-actions';
+import Instructions from './instructions';
+import './query-builder.css';
+
+const QueryBuilder = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default QueryBuilder;
diff --git a/src/components/modules/selected-fields.js b/src/components/modules/selected-fields.js
new file mode 100644
index 0000000..0b8d749
--- /dev/null
+++ b/src/components/modules/selected-fields.js
@@ -0,0 +1,71 @@
+import React from 'react'; // eslint-disable-line
+import PropTypes from 'prop-types';
+import * as propTypes from '../../prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { groupBy, sortBy } from 'lodash';
+import { unselectField } from '../../redux/ducks/selectedFields';
+import FIELD_CATEGORY_ORDER from '../../data/field-category-order';
+import SelectedFieldGroup from '../selected-field-group';
+
+const SelectedFields = (props) => {
+ const groups = groupBy(Object.values(props.selectedFields), 'category');
+ const sortedGroupKeys = sortBy(Object.keys(groups), key => FIELD_CATEGORY_ORDER[key]);
+ const clearAll = () => {
+ Object.values(props.selectedFields).forEach(field => {
+ props.actions.unselectField(field);
+ });
+ }
+ return (
+
+
Your Selections
+ { !Object.keys(props.selectedFields).length &&
+
You have nothing selected from available filters.
+ }
+ { sortedGroupKeys.map(key => (
+
+ )) }
+ { !!Object.keys(props.selectedFields).length &&
+
+ Clear All
+
+ }
+
-
-
- {currentPage === 1 ? (
- Prev
- ) : (
- {
- e.preventDefault();
- handlePageNav(currentPage - 1);
- }}
- >
- Prev
-
- )}
-
-
-
- {pageLinks.map((link, i) => (
- {link}
- ))}
-
-
-
- {currentPage === numPages ? (
- Next
- ) : (
- {
- e.preventDefault();
- handlePageNav(currentPage + 1);
- }}
- >
- Next
-
- )}
-
-
-
-
- );
-};
-
-const PaginationLink = ({ isCurrent, pageNum, handlePageNav, className }) => {
- return isCurrent ? (
-
- {pageNum}
-
- ) : (
- {
- e.preventDefault();
- handlePageNav(pageNum);
- }}
- aria-current={isCurrent}
- aria-label={`Page ${pageNum}`}
- className={className}
- data-testid={`page-${pageNum}`}
- >
- {pageNum}
-
- );
-};
-
-export default Pagination;
diff --git a/src/components/report-filters.js b/src/components/report-filters.js
deleted file mode 100644
index 471679c..0000000
--- a/src/components/report-filters.js
+++ /dev/null
@@ -1,436 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import axios from 'axios';
-import { API_BASE_URL } from '../constants';
-import { DispatchQueryContext } from './report-query-provider';
-
-const ReportFilters = ({ reportType }) => {
- const dictionary = {
- security: 'pshtt',
- design: 'uswds2',
- criticalComponents: 'third_parties',
- analytics: 'dap',
- performance: 'lighthouse',
- accessibility: 'lighthouse',
- };
- const [loading, setLoading] = useState(false);
- const [agencies, setAgencies] = useState([]);
- const [scanDates, setScanDates] = useState([]);
-
- const scanType = dictionary[reportType] || reportType;
-
- const dispatchQuery = useContext(DispatchQueryContext);
-
- const fetchList = (reportType, list) => {
- return axios.get(`${API_BASE_URL}lists/${reportType}/${list}`);
- };
-
- const handleFilterChange = filter => {
- const filterName = Object.keys(filter)[0];
- if ((filter[filterName] == '" "') | (filter[filterName] == '')) {
- dispatchQuery({
- type: `REMOVE_FILTERS`,
- filtersToRemove: [filterName],
- });
- } else {
- dispatchQuery({
- type: `APPLY_FILTER`,
- newFilter: { filters: filter },
- });
- }
- };
-
- useEffect(() => {
- const fetchData = async () => {
- const agencies = await fetchList(scanType, 'agencies');
- const dates = await axios.get(`${API_BASE_URL}lists/dates/`);
- setAgencies(agencies.data);
- setScanDates(dates.data);
- setLoading(false);
- };
-
- fetchData();
- }, []);
-
- return loading ? (
- Loading…
- ) : (
-
- Agency
-
-
- handleFilterChange({ [e.target.name]: `"${e.target.value}"` })
- }
- >
-
- - Select -
-
- {agencies.length == 0
- ? null
- : agencies.map(a => (
-
- {a}
-
- ))}
-
-
- );
-};
-
-const DomainFilter = ({ handleFilterChange }) => {
- return (
- <>
-
- Domain
-
-
- Scan Date
-
-
- dispatchQuery({
- type: 'CHANGE_SCAN_DATE',
- scanDate: e.target.value,
- })
- }
- >
- {scanDates.map(date => (
-
- {date}
-
- ))}
-
-
- );
-};
-
-const UswdsFilters = ({ handleFilterChange }) => {
- const checkboxFilters = [
- {
- property: 'data.publicsansfont_detected',
- label: 'Public Sans Font',
- },
- {
- property: 'data.merriweatherfont_detected',
- label: 'Merriweather Font',
- },
- {
- property: 'data.sourcesansfont_detected',
- label: 'Source Sans Font',
- },
- {
- property: 'data.flag_detected',
- label: 'Flag',
- },
- {
- property: 'data.flagincss_detected',
- label: 'Flag in CSS',
- },
- {
- property: 'data.tables',
- label: 'Tables',
- },
- {
- property: 'data.usa_classes_detected',
- label: 'USA Classes',
- },
- {
- property: 'data.usa_detected',
- label: 'USA',
- },
- {
- property: 'data.uswds_detected',
- label: 'USWDS',
- },
- {
- property: 'data.uswdsincss_detected',
- label: 'USWDS in CSS',
- },
- ];
- return (
- <>
-
- USWDS Features
-
- {checkboxFilters.map(f => (
-
-
-
- );
-};
-
-const UswdsVersionFilter = ({ handleFilterChange }) => {
- const versions = [
- '- Select -',
- 'v2.3.1',
- 'v2.0.3',
- 'v1.1.0',
- 'v1.4.1',
- 'v1.6.3',
- 'v2.2.1',
- 'v0.14.0',
- ];
-
- return (
- <>
-
- USWDS Version
-
-
- handleFilterChange({ 'data.uswdsversion': e.target.value })
- }
- >
- {versions.map(v => {
- const version = v == '- Select -' ? '' : v;
- return (
-
- {v}
-
- );
- })}
-
-
- );
-};
-
-const NumericFilterCheckbox = ({ handleFilterChange, label, property }) => {
- return (
-
-
- {label}
-
-
- );
-};
-
-const SecurityFilters = ({ handleFilterChange }) => {
- return (
- <>
-
- {label}
-
- handleFilterChange({ [property]: e.target.value })}
- >
- - Select -
- {presentText || `Present`}
- {absentText || `Not Present`}
-
-
- );
-};
diff --git a/src/components/report-query-provider.js b/src/components/report-query-provider.js
deleted file mode 100644
index d3d07ae..0000000
--- a/src/components/report-query-provider.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useReducer, createContext } from 'react';
-import { merge } from 'lodash';
-
-export const QueryContext = createContext();
-export const DispatchQueryContext = createContext();
-
-const ReportQueryProvider = ({ children }) => {
- const removeFilters = (obj, filtersToRemove) => {
- const copy = { ...obj };
- filtersToRemove.map(f => delete copy.filters[f]);
- return copy;
- };
-
- const queryReducer = (state, action) => {
- switch (action.type) {
- case 'CHANGE_PAGE':
- return { ...state, page: action.page };
- case 'APPLY_FILTER':
- return { ...merge(state, action.newFilter) };
- case 'REMOVE_FILTERS':
- return removeFilters({ ...state }, [...action.filtersToRemove]);
- case 'CHANGE_SCAN_DATE':
- return { ...state, scanDate: action.scanDate };
- default:
- return state;
- }
- };
-
- const [query, dispatchQuery] = useReducer(queryReducer, { page: 1 });
-
- return (
-
-
- {children}
-
-
- );
-};
-
-export default ReportQueryProvider;
diff --git a/src/components/report.js b/src/components/report.js
deleted file mode 100644
index ecf0a12..0000000
--- a/src/components/report.js
+++ /dev/null
@@ -1,312 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState, useEffect, useContext, useRef } from 'react';
-import ReportFilters from './report-filters';
-import { API_BASE_URL } from '../constants';
-import axios from 'axios';
-import { v1 as uuidv1 } from 'uuid';
-import { QueryContext, DispatchQueryContext } from './report-query-provider';
-import Pagination from './pagination';
-import Alert from './uswds/alert';
-
-const Report = ({ reportType, columns, endpoint }) => {
- const [reportData, setReportData] = useState([]);
- const [recordCount, setRecordCount] = useState(0);
- const [errors, setErrors] = useState();
- const [loading, setLoading] = useState(true);
- const query = useContext(QueryContext);
- const dispatchQuery = useContext(DispatchQueryContext);
-
- const isInitialLoad = useRef(true);
-
- const strFromQuery = queryObj => {
- let str = `page=${queryObj.page}`;
- if (queryObj.filters) {
- Object.keys(queryObj.filters).map(k => {
- str += `&${k}=${queryObj.filters[k]}`;
- });
- str = str.replace(/ /g, '+');
- }
- return str;
- };
-
- const queryString = strFromQuery(query);
- const queryBaseUrl = query.scanDate
- ? `${API_BASE_URL}date/${query.scanDate}/`
- : API_BASE_URL;
-
- const fetchReportData = async () => {
- let result;
- result = await axios.get(`${queryBaseUrl}${endpoint}/?${queryString}`);
-
- if (typeof result.data == 'object') {
- setErrors(null);
- setRecordCount(result.data.count);
- setReportData(result.data.results);
- setReportData(result.data.results);
- } else {
- setErrors({ ...errors, apiError: `no data` });
- setRecordCount(0);
- setReportData([]);
- }
- };
-
- const handlePageChange = ({ page }) => {
- dispatchQuery({ type: 'CHANGE_PAGE', page: page });
- };
-
- useEffect(() => {
- setLoading(true);
- fetchReportData();
- }, [queryString, query.scanDate]);
-
- useEffect(() => {
- if (!isInitialLoad.current) {
- setLoading(false);
- } else {
- isInitialLoad.current = false;
- }
- }, [reportData]);
-
- return (
- <>
- {errors && (
-
- There was an error loading data. Please try refreshing the page. If
- the error persists, please let us know .
-
- )}
- {!loading && !errors && recordCount == 0 && (
-
-
-
-
-
- );
-};
-
-Report.propTypes = {
- reportType: PropTypes.string,
- columns: PropTypes.arrayOf(PropTypes.object),
- endpoint: PropTypes.string,
-};
-
-export default Report;
-const CsvLink = ({ queryUrl }) => {
- const csvUrl = queryUrl.replace(/page=\d+(&)?/, '');
- return Download these results as a CSV ;
-};
-
-const RecordCount = ({ recordCount }) => {
- return {recordCount} Results ;
-};
-
-const ReportTable = ({ children }) => (
-
-);
-
-ReportTable.propTypes = {
- children: PropTypes.oneOfType([
- PropTypes.element,
- PropTypes.arrayOf(PropTypes.element),
- ]),
-};
-
-const ReportTableHead = ({ columns }) => {
- return (
-
-
- {columns.map(c => (
-
- {c.title}
-
- ))}
-
-
- );
-};
-
-ReportTableHead.propTypes = {
- columns: PropTypes.arrayOf(PropTypes.object),
-};
-
-const ReportTableBody = ({ columns, records, isLoading }) => {
- return isLoading ? (
-
-
-
-
-
-
- ) : (
-
- {records.map(r => (
-
- );
-};
-
-ReportTableBody.propTypes = {
- columns: PropTypes.arrayOf(PropTypes.object),
- records: PropTypes.arrayOf(PropTypes.object),
- isLoading: PropTypes.bool,
-};
-
-const ReportTableRow = ({ columns, record }) => {
- const invalidRecord = record.data.invalid;
-
- return invalidRecord ? (
-
- {record.domain}
-
- ) : (
-
- {columns.map((c, i) => (
-
- );
-};
-
-ReportTableRow.propTypes = {
- columns: PropTypes.arrayOf(PropTypes.object),
- record: PropTypes.object,
-};
-
-const ReportTableCell = ({ value, isFirst, isUrl }) => {
- const parseValue = value => {
- if (isUrl) return {value} ;
- if (typeof value == 'boolean') return String(value);
- if (typeof value == 'object') return {value}
- ) : (
- {value}
- );
-};
-
-ReportTableCell.propTypes = {
- value: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.bool,
- PropTypes.object,
- ]),
- isFirst: PropTypes.bool,
-};
-
-const ReportTableCellInvalid = ({ width }) => {
- return (
-
- Spotlight was unable to prepare a report for this domain
-
- );
-};
-
-ReportTableCellInvalid.propTypes = {
- columns: PropTypes.arrayOf(PropTypes.object),
- record: PropTypes.object,
-};
-
-const ObjectList = ({ object }) => {
- const isArray = Array.isArray(object);
- return object === null ? (
- ''
- ) : (
-
- {Object.keys(object).map(k => (
-
- {!isArray && {k}: }
- {object[k]}
-
- ))}
-
- );
-};
-
-ObjectList.propTypes = {
- record: PropTypes.object,
-};
-
-const Spinner = () => {
- return (
-
-
-
-
-
-
- Loading
-
-
+ props.onClickField(field)}
+ title={`Remove ${field.title} filter`}
+ >
+
+ { field.title }{ field.value && `:`}{ field.value && {field.value} }
+
+ ));
+}
+
+SelectedFieldGroup.propTypes = {
+ groupName: PropTypes.string.isRequired,
+ fields: PropTypes.arrayOf(propTypes.SelectedFieldPropTypes).isRequired,
+}
+
+export default SelectedFieldGroup;
diff --git a/src/components/uswds/accordion-item.js b/src/components/uswds/accordion-item.js
new file mode 100644
index 0000000..7803c91
--- /dev/null
+++ b/src/components/uswds/accordion-item.js
@@ -0,0 +1,53 @@
+import React, { Fragment } from 'react'; // eslint-disable-line
+import PropTypes from 'prop-types';
+
+export const AccordionItem = (props) => {
+ const {
+ heading,
+ id,
+ content,
+ expanded,
+ handleToggle,
+ customStyles,
+ } = props
+
+ return (
+
+
+
+ {heading}
+
+
+
+ {content}
+
+
+ )
+}
+
+AccordionItem.propTypes = {
+ content: PropTypes.object,
+ expanded: PropTypes.bool,
+ handleToggle: PropTypes.func.isRequired,
+ heading: PropTypes.string,
+ id: PropTypes.string,
+ customStyles: PropTypes.shape({
+ heading: PropTypes.object,
+ content: PropTypes.object,
+ }),
+};
+
+export default AccordionItem;
diff --git a/src/components/uswds/accordion.js b/src/components/uswds/accordion.js
new file mode 100644
index 0000000..8720298
--- /dev/null
+++ b/src/components/uswds/accordion.js
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react'; // eslint-disable-line
+import PropTypes from 'prop-types';
+import AccordionItem from './accordion-item';
+
+const Accordion = (props) => {
+ const { items, customStyles } = props;
+
+ const [openItems, setOpenState] = useState(
+ items.filter((i) => !!i.expanded).map((i) => i.id)
+ )
+
+ const toggleItem = itemId => {
+ const newOpenItems = [...openItems]
+ const itemIndex = openItems.indexOf(itemId)
+
+ if (itemIndex > -1) {
+ newOpenItems.splice(itemIndex, 1)
+ } else {
+ newOpenItems.push(itemId)
+ }
+
+ setOpenState(newOpenItems)
+ }
+
+ useEffect(()=>{
+ props.defaultExpandedId && toggleItem(props.defaultExpandedId)
+ },[])
+
+ return (
+
+ { items.map((item, i) => (
+
-1 }
+ handleToggle={ () => toggleItem(item.id) }
+ customStyles={customStyles}
+ />
+ )) }
+
+
+ { props.label}
+
+
+ );
+};
+
+Checkbox.propTypes = {
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ checked: PropTypes.bool.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default Checkbox;
diff --git a/src/components/uswds/dropdown.js b/src/components/uswds/dropdown.js
new file mode 100644
index 0000000..ca28c83
--- /dev/null
+++ b/src/components/uswds/dropdown.js
@@ -0,0 +1,39 @@
+import React from 'react'; // eslint-disable-line
+import PropTypes from 'prop-types';
+
+const Dropdown = (props) => {
+ return (
+
+ - Select -
+ { props.options.map((option) => (
+
+ { option.label }
+
+ ))}
+
+ );
+};
+
+Dropdown.propTypes = {
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.string,
+ options: PropTypes.arrayOf(PropTypes.shape({
+ label: PropTypes.string,
+ value: PropTypes.any,
+ })),
+ ariaLabel: PropTypes.string,
+};
+
+export default Dropdown;
diff --git a/src/components/uswds/text-input.js b/src/components/uswds/text-input.js
new file mode 100644
index 0000000..ce23d60
--- /dev/null
+++ b/src/components/uswds/text-input.js
@@ -0,0 +1,27 @@
+import React from 'react'; // eslint-disable-line
+import PropTypes from 'prop-types';
+
+const TextInput = (props) => {
+ return (
+
- NOT FOUND
- You just hit a route that doesn't exist... the sadness.
+
+
+
404
+
Your page cannot be found.
+
+
);
diff --git a/src/pages/about.js b/src/pages/about.js
deleted file mode 100644
index e1c7d68..0000000
--- a/src/pages/about.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-const About = () => (
-
- About Spotlight
-
- Spotlight is a set of report pages that present data about federal government websites. It is powered by the Site Scanning program and is
- available through the support of General Service
- Administration's 10x program .
-
-
- What is the Site Scanning program?
-
- The vision of this project is to create a way for TTS to offer a low-cost, automated scanning solution so federal stakeholders can determine the best practices government websites are following and identify ways to improve website performance for the public and public servants. We envision an on-demand service that not only reduces the legwork that scanning has historically entailed, but also enriches the data for analyses available. Performance would be measured on a variety of key dimensions like mobile-friendliness, load times, responsiveness. Not only could stakeholders access this critical data, they'd also be able to copy the scan engine and build off of it for their own, customized uses. Our primary focus is on an open, automated, inexpensive, and fast scanning solution. You can learn more about the scans, data, and how the it all works at the program's {' '}
-
- documentation repository on GitHub
-
- .
-
-
- Access the Data
-
- You can access all of the Site Scanning program's data via the{' '}
- API
-
-
-);
-export default About;
diff --git a/src/pages/accessibility.js b/src/pages/accessibility.js
deleted file mode 100644
index 1ad863c..0000000
--- a/src/pages/accessibility.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- {
- title: `Text Size`,
- accessor: obj => obj.data[`font-size`]?.displayValue,
- },
- {
- title: `Tap Target Size`,
- accessor: obj => obj.data[`tap-targets`]?.displayValue,
- },
- {
- title: `Images Have Alt Text`,
- accessor: obj => obj.data[`image-alt`]?.score,
- },
- {
- title: `Text Has Sufficient Color Contrast`,
- accessor: obj => obj.data[`color-contrast`]?.score,
- },
-];
-
-export default () => (
-
- Accessibility scan results
-
-
-
-);
diff --git a/src/pages/analytics.js b/src/pages/analytics.js
deleted file mode 100644
index b552ebe..0000000
--- a/src/pages/analytics.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- { title: `DAP Detected`, accessor: obj => obj.data.dap_detected },
- { title: `DAP Parameters`, accessor: obj => obj.data.dap_parameters },
-];
-
-export default () => (
-
- Analytics scan results
- This report page displays data that has been gathered by the Digital Analytics Program scan .
-
-
-
-);
diff --git a/src/pages/api-data b/src/pages/api-data
deleted file mode 100644
index fdd47e6..0000000
--- a/src/pages/api-data
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-const api-data = () => (
-
- Spotlight API Data
-
-
-);
-export default api-data;
diff --git a/src/pages/contact-us.js b/src/pages/contact-us.js
deleted file mode 100644
index 77c0f75..0000000
--- a/src/pages/contact-us.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-
-const ContactUs = () => (
-
- Contact us
-
-
- To learn more about the Site Scanning program and the methodology for each scan, the project's documentation hub is a good place to start.
-
-
- For general questions and comments about how the program works or its scan
- results, please email the team or file an issue in the project repository .
-
-
-
-
-);
-
-export default ContactUs;
diff --git a/src/pages/critical-components.js b/src/pages/critical-components.js
deleted file mode 100644
index ae393e6..0000000
--- a/src/pages/critical-components.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- { title: `External Domains`, accessor: obj => obj.data.external_domains },
-];
-
-export default () => (
-
- Third-Party Links
-
-
-
-);
diff --git a/src/pages/design.js b/src/pages/design.js
deleted file mode 100644
index 3ca1863..0000000
--- a/src/pages/design.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import Layout from '../components/layout';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, isUrl: true, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- {
- title: `USWDS Version`,
- accessor: obj => obj.data.uswdsversion,
- },
- {
- title: `Flag Detected`,
- accessor: obj => obj.data.flag_detected,
- },
- {
- title: `Flag in CSS`,
- accessor: obj => obj.data.flagincss_detected,
- },
- {
- title: `Merriweather Font Detected`,
- accessor: obj => obj.data.merriweatherfont_detected,
- },
- {
- title: `Public Sans Font Detected`,
- accessor: obj => obj.data.publicsansfont_detected,
- },
- {
- title: `Source Sans Font Detected`,
- accessor: obj => obj.data.sourcesansfont_detected,
- },
- {
- title: `Tables`,
- accessor: obj => obj.data.tables,
- },
- {
- title: `USA Classes Detected`,
- accessor: obj => obj.data.usa_classes_detected,
- },
- {
- title: `USA Detected`,
- accessor: obj => obj.data.usa_detected,
- },
- {
- title: `USWDS Detected`,
- accessor: obj => obj.data.uswds_detected,
- },
- {
- title: `USWDS In CSS Detected`,
- accessor: obj => obj.data.uswdsincss_detected,
- },
-];
-
-export default () => (
-
- Design
-
- This report displays scan results for whether USWDS is implemented on a
- domain and, if so, which version.
-
-
-
-
-
-);
diff --git a/src/pages/index.js b/src/pages/index.js
index 38339c8..2240802 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,58 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
-
-const IndexPage = () => {
- const num_domains = 35952;
- return (
-
- Spotlight is a set of report pages that present data about federal government websites. That means that rather than going into the weeds into any
- one particular area, you can use this data to highlight the critical
- features that most reflect overall excellence on websites:
-
-
-
- Why Spotlight?
-
-
- Scans run automatically, allowing results whenever you want
-
- Daily scan results deliver the latest data to you
-
- Scan results are in the cloud, open to the public, and exportable for
- easy government-wide collaboration
-
-
- Using the API, feed scan results directly into your government system
-
-
- How Spotlight works
-
- Select a category OR enter a URL.
- Filter and sort your results as needed.
- Export or bookmark your results to share or reference later.
- Analyze and take action where it matters most.
-
-
- );
-};
-
-const Hero = () => (
-
-
- Spotlight highlights the features contributing to any federal website's
- success, for free.
-
-
-);
+import QueryBuilder from '../components/modules/query-builder';
+
+const IndexPage = () => (
+
+
+)
export default IndexPage;
diff --git a/src/pages/performance.js b/src/pages/performance.js
deleted file mode 100644
index 590a9d5..0000000
--- a/src/pages/performance.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- {
- title: `Page Load Time (s)`,
- accessor: obj => obj.data['speed-index']?.displayValue,
- },
- {
- title: `Total Page Weight (bytes)`,
- accessor: obj => obj.data['total-byte-weight']?.numericValue,
- },
- {
- title: `Unminified JavaScript`,
- accessor: obj => obj.data['unminified-javascript']?.displayValue,
- },
- {
- title: `Unminified CSS`,
- accessor: obj => obj.data['unminified-css']?.displayValue,
- },
- {
- title: `Uncompressed Text`,
- accessor: obj => obj.data['uses-text-compression']?.displayValue,
- },
- {
- title: `Viewport Meta Tag Present`,
- accessor: obj => obj.data.viewport?.explanation,
- defaultValue: 'Present',
- },
-];
-
-export default () => (
-
- Performance scan results
-
-
-
-);
diff --git a/src/pages/security.js b/src/pages/security.js
deleted file mode 100644
index a25b9e6..0000000
--- a/src/pages/security.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import SEO from '../components/seo';
-import Report from '../components/report';
-import Layout from '../components/layout';
-import ReportQueryProvider from '../components/report-query-provider';
-
-const columns = [
- { title: `Domain`, accessor: obj => obj.domain },
- { title: `Agency`, accessor: obj => obj.agency },
- { title: `Supports HSTS`, accessor: obj => obj.data.HSTS },
- { title: `Supports HTTPS`, accessor: obj => obj.data['HTTPS Live'] },
- { title: `Headers`, accessor: obj => obj.data.endpoints.https.headers },
-];
-export default () => (
-
- Security
-
- This report contains scan results pertaining to CISA requirements and 21st
- Century IDEA act security requirements
-
-
-
-
-);
diff --git a/src/pages/url-results.js b/src/pages/url-results.js
deleted file mode 100644
index 49f253b..0000000
--- a/src/pages/url-results.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-
-const SecondPage = () => (
-
- Site Scanner scan results for analytics
-
-);
-
-export default SecondPage;
diff --git a/src/prop-types.js b/src/prop-types.js
new file mode 100644
index 0000000..f8d9b02
--- /dev/null
+++ b/src/prop-types.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+export const AvailableFieldPropTypes = PropTypes.shape({
+ category: PropTypes.string.isRequired,
+ attribute: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ order: PropTypes.number,
+ query_type: PropTypes.oneOf(['equals', 'boolean']),
+ input: PropTypes.oneOf(['text', 'select']),
+ input_options: PropTypes.arrayOf(PropTypes.shape({
+ label: PropTypes.string.isRequired,
+ value: PropTypes.any.isRequired,
+ })),
+ live: PropTypes.boolean,
+});
+
+export const AvailableFieldsPropTypes = PropTypes.arrayOf(AvailableFieldPropTypes);
+
+export const SelectedFieldPropTypes = PropTypes.shape({
+ category: PropTypes.string.isRequired,
+ attribute: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ value: PropTypes.any.isRequired,
+});
+
+export const SelectedFieldsPropTypes = PropTypes.objectOf(SelectedFieldPropTypes);
+
diff --git a/src/redux/ducks/selectedFields.js b/src/redux/ducks/selectedFields.js
new file mode 100644
index 0000000..e361afa
--- /dev/null
+++ b/src/redux/ducks/selectedFields.js
@@ -0,0 +1,50 @@
+import { omit } from 'lodash';
+import { parseFieldParams } from '../../utils';
+// Actions
+export const SELECT_FIELD = 'SELECT_FIELD';
+export const UNSELECT_FIELD = 'UNSELECT_FIELD';
+export const SET_FIELD_VALUE = 'SET_FIELD_VALUE';
+
+// Action Creators
+export const selectField = (payload) => ({
+ type: SELECT_FIELD,
+ payload,
+});
+
+export const unselectField = (payload) => ({
+ type: UNSELECT_FIELD,
+ payload,
+});
+
+export const setFieldValue = (payload) => ({
+ type: SET_FIELD_VALUE,
+ payload,
+});
+
+// Reducer
+export const emptyState = {}
+export const initialState = typeof window !== `undefined` && window.location.search.length ? parseFieldParams(window.location.search) : emptyState;
+
+export default (state = initialState, action) => {
+ switch (action.type) {
+ case SELECT_FIELD:
+ return {
+ [action.payload.attribute]: action.payload,
+ ...state,
+ }
+ case UNSELECT_FIELD:
+ return {
+ ...omit(state, [action.payload.attribute])
+ }
+ case SET_FIELD_VALUE:
+ return {
+ ...state,
+ [action.payload.attribute]: {
+ ...state[action.payload.attribute],
+ ...action.payload,
+ }
+ }
+ default:
+ return state
+ }
+};
diff --git a/src/redux/ducks/selectedFields.test.js b/src/redux/ducks/selectedFields.test.js
new file mode 100644
index 0000000..349286e
--- /dev/null
+++ b/src/redux/ducks/selectedFields.test.js
@@ -0,0 +1,48 @@
+import selectedFieldsReducer, * as ducks from './selectedFields';
+
+describe('selectedFields Reducer', () => {
+ test('adds a selected field to state', function() {
+ const payload = {
+ category: 'Website',
+ attribute: 'target_url',
+ title: 'Target URL'
+ };
+ const action = ducks.selectField(payload);
+ const result = selectedFieldsReducer(ducks.initialState, action);
+ expect(result.target_url).toBe(payload);
+ });
+ test('removes a selected field from state', function() {
+ const payload = {
+ category: 'Website',
+ attribute: 'target_url',
+ title: 'Target URL'
+ };
+ const action = ducks.unselectField(payload);
+ const state = {
+ ...ducks.initialState,
+ target_url: payload,
+ another_field: { foo: 'bar' }
+ }
+ const result = selectedFieldsReducer(state, action)
+ expect(result.target_url).toBe(undefined);
+ });
+ test('updates specific field value', function() {
+ const payload = {
+ attribute: 'target_url',
+ value: 'example.com',
+ }
+ const action = ducks.setFieldValue(payload);
+ const state = {
+ ...ducks.initialState,
+ target_url: {
+ category: 'Website',
+ }
+ }
+ const result = selectedFieldsReducer(state, action)
+ expect(result.target_url).toEqual({
+ category: 'Website',
+ attribute: 'target_url',
+ value: 'example.com',
+ });
+ })
+});
diff --git a/src/redux/index.js b/src/redux/index.js
new file mode 100644
index 0000000..7dd255a
--- /dev/null
+++ b/src/redux/index.js
@@ -0,0 +1,29 @@
+import {
+ createStore, combineReducers, applyMiddleware, compose,
+} from 'redux';
+import selectedFields from './ducks/selectedFields';
+import urlMiddleware from './middleware/url';
+
+// Reducers
+export const rootReducer = combineReducers({
+ selectedFields,
+});
+
+// Enhancers
+let composeEnhancers = compose;
+if (process.env.NODE_ENV === 'development' &&
+ typeof window !== 'undefined' &&
+ typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined') {
+ composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
+}
+
+// Middleware
+const middleware = [
+ urlMiddleware,
+]
+
+const store = createStore(rootReducer, composeEnhancers(
+ applyMiddleware(...middleware),
+));
+
+export default store;
diff --git a/src/redux/middleware/url.js b/src/redux/middleware/url.js
new file mode 100644
index 0000000..399b775
--- /dev/null
+++ b/src/redux/middleware/url.js
@@ -0,0 +1,23 @@
+import * as selectedFields from '../ducks/selectedFields';
+import * as utils from '../../utils';
+
+const urlMiddleware = store => next => action => {
+ let result = next(action);
+
+ switch (action.type) {
+ case selectedFields.SELECT_FIELD:
+ case selectedFields.SET_FIELD_VALUE:
+ case selectedFields.UNSELECT_FIELD:
+ const paramString = utils.buildQueryParams(
+ utils.deepPluck(store.getState().selectedFields, 'value')
+ );
+ typeof window !== 'undefined' &&
+ window.history.replaceState(null, "", `?${paramString}`);
+ break;
+ default:
+ break;
+ }
+ return result;
+}
+
+export default urlMiddleware;
diff --git a/src/test-utils.js b/src/test-utils.js
new file mode 100644
index 0000000..6549c10
--- /dev/null
+++ b/src/test-utils.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render as rtlRender } from '@testing-library/react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { rootReducer } from './redux/index';
+
+/***
+Version of React Testing Library's render function that provides a Redux store
+If your component requires Redux for itself or any of its children, use this.
+***/
+function render(
+ ui,
+ {
+ initialState,
+ store = createStore(rootReducer, initialState),
+ ...renderOptions
+ } = {}
+) {
+ function Wrapper({ children }) {
+ return {children}
+ }
+ return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
+}
+
+// re-export everything
+export * from '@testing-library/react'
+// override render method
+export { render }
diff --git a/src/utils.js b/src/utils.js
index 309e617..d5e23ce 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,3 +1,7 @@
+import 'url-search-params-polyfill';
+import FIELD_OPTIONS from './data/fields';
+import * as API from './data/api';
+
export const flattenObject = (obj, prefix = '') =>
Object.keys(obj).reduce((acc, k) => {
const pre = prefix.length ? prefix + '.' : '';
@@ -14,3 +18,38 @@ export const addOptionAll = optionsArr => {
export const customFilterOptions = (filterList, filterName) =>
filterList.filter(el => Object.keys(el).includes(filterName))[0];
+
+export const deepPluck = (obj, keyName) => {
+ return Object.keys(obj).reduce((acc, key)=> {
+ acc[key] = obj[key][keyName];
+ return acc;
+ }, {});
+}
+
+export const buildQueryParams = (obj) => {
+ let query = new URLSearchParams();
+ Object.keys(obj).forEach(key => (
+ query.append(key, obj[key])
+ ));
+ return query.toString();
+}
+
+export const parseFieldParams = (string) => {
+ const obj = {};
+ const searchParams = new URLSearchParams(string);
+ for(var pair of searchParams.entries()) {
+ obj[pair[0]] = {
+ ...FIELD_OPTIONS[pair[0]] || {},
+ value: pair[1],
+ }
+ }
+ return obj;
+}
+
+export const buildApiUrl = (obj) => (
+ `${API.API_DOMAIN}${API.API_PATH}?api_key=${API.API_KEY}&${buildQueryParams(obj)}`
+)
+
+export const buildQueryUrl = (obj) => (
+ `${window.location.href.replace(window.location.search, "")}?${buildQueryParams(obj)}`
+)
diff --git a/src/utils.test.js b/src/utils.test.js
new file mode 100644
index 0000000..2df78f3
--- /dev/null
+++ b/src/utils.test.js
@@ -0,0 +1,68 @@
+import * as utils from './utils';
+import * as API from './data/api';
+
+describe('deepPluck', function() {
+ const obj = {
+ key_one: { foo: 'one', bar: 'two' },
+ key_two: { foo: 'three', bar: 'four' },
+ }
+ const result = utils.deepPluck(obj, 'bar');
+ it('returns a flat object keyed by argument', () => {
+ expect(result).toHaveProperty('key_one', 'two');
+ expect(result).toHaveProperty('key_two', 'four');
+ });
+});
+describe('buildQueryParams', function() {
+ const query = {
+ fields: ['foo', 'bar'],
+ filter_one: 'baz',
+ }
+ const result = utils.buildQueryParams(query);
+ it('builds param with array', () => {
+ expect(result).toMatch(/fields=foo%2Cbar/);
+ });
+ it('builds param with single selection', () => {
+ expect(result).toMatch(/filter_one=baz/);
+ });
+ it('builds complete query string', () => {
+ expect(result).toEqual('fields=foo%2Cbar&filter_one=baz');
+ });
+});
+describe('parseFieldParams', function() {
+ it('returns an object keyed by param value', () => {
+ const string = '?target_url=foo&uswds_favicon_detected=bar';
+ const result = utils.parseFieldParams(string);
+ expect(result.target_url).toBeDefined();
+ expect(result.uswds_favicon_detected).toBeDefined();
+ });
+ it('returns an object of objects, each with a value', () => {
+ const string = '?target_url=foo&uswds_favicon_detected=bar';
+ const result = utils.parseFieldParams(string);
+ expect(result.target_url.value).toEqual("foo");
+ expect(result.uswds_favicon_detected.value).toEqual("bar");
+ });
+ it('returns an empty object when no param values are present', () => {
+ const string = '';
+ const result = utils.parseFieldParams(string, 'fields');
+ expect(result).toEqual({});
+ })
+});
+describe('buildApiUrl', function() {
+ const filters = {
+ filter_one: 'foo',
+ filter_two: 'bar',
+ }
+ const result = utils.buildApiUrl(filters);
+ it('starts with api domain', () => {
+ expect(result).toMatch(new RegExp('^' + API.API_DOMAIN, 'i'));
+ });
+ it('includes api path', () => {
+ expect(result).toMatch(new RegExp(API.API_PATH));
+ });
+ it('includes api key', () => {
+ expect(result).toMatch(new RegExp(API.API_KEY));
+ });
+ it('ends with params', () => {
+ expect(result).toMatch(/\&filter_one=foo&filter_two=bar$/i,);
+ });
+});