Refactor dashboards (#1288)

Author: goldpbear

jest.config.js

@@ -1,17 +1,13 @@
 module.exports = {
-  projects: [
-    {
-      displayName: "mapseed-platform-test",
-      testURL: "http://localhost/",
-      moduleNameMapper: {
-        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
-          "<rootDir>/__mocks__/file-mock.js",
-        "\\.(css|less|scss)$": "<rootDir>/__mocks__/style-mock.js",
-        "^config$": "<rootDir>/__mocks__/config-mock.js",
-      },
-      setupFiles: ["<rootDir>/jest-setup.js"],
-      snapshotSerializers: ["enzyme-to-json/serializer"],
-      testMatch: ["**/*.test.js"],
-    },
-  ],
+  displayName: "mapseed-platform-test",
+  testURL: "http://localhost/",
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/file-mock.js",
+    "\\.(css|less|scss)$": "<rootDir>/__mocks__/style-mock.js",
+    "^config$": "<rootDir>/__mocks__/config-mock.js",
+  },
+  setupFiles: ["<rootDir>/jest-setup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  testMatch: ["**/*.test.js"],
 };

package-lock.json

@@ -28,7 +28,7 @@
     "build-deploy": "npm run build && npm run deploy",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "test": "npm run eslint && npm run prettier && npm run type-check",
+    "test": "npm run eslint && ./node_modules/.bin/jest && npm run prettier && npm run type-check",
     "eslint": "eslint src scripts --ext .js,.ts,.tsx",
     "eslint:fix": "eslint --fix src scripts --ext .js,.ts,.tsx",
     "test:watch": "jest --watch --verbose --config ./jest.watch.config.js",
@@ -56,6 +56,7 @@
     "@turf/helpers": "^6.1.4",
     "@types/d3-geo": "^1.11.1",
     "@types/geojson": "^7946.0.7",
+    "@types/moment-timezone": "^0.5.12",
     "@types/mapbox-gl": "^0.51.11",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.8.13",
@@ -93,6 +94,7 @@
     "react": "^16.8.6",
     "react-datetime": "~2.14.0",
     "react-dom": "~16.8.6",
+    "react-draggable": "^3.3.0",
     "react-i18next": "~7.5.1",
     "react-jss": "^8.6.1",
     "react-map-gl": "^5.0.7",

package.json

@@ -530,15 +530,13 @@ class App extends React.Component<Props, State> {
           <Route
             exact
             path="/dashboard"
-            render={() => {
+            render={props => {
               return (
                 <React.Suspense fallback={<Fallback />}>
                   <SiteHeader {...headerProps} />
                   <DashboardTemplate
-                    datasetDownloadConfig={
-                      this.props.appConfig.dataset_download
-                    }
                     apiRoot={this.props.appConfig.api_root}
+                    {...props.match}
                   />
                 </React.Suspense>
               );

src/base/static/components/app.tsx

@@ -10,7 +10,12 @@ import { TwitterIcon, FacebookIcon } from "./icons";
 import { FontAwesomeIcon } from "./imagery";
 import { SmallText } from "./typography";
 
-import { CHARCOAL, OFF_WHITE, getReadableColor } from "../../utils/color";
+import {
+  CHARCOAL,
+  OFF_WHITE,
+  getReadableColor,
+  lighten,
+} from "../../utils/color";
 import { LegacyIcon } from "./feedback";
 
 import "./buttons.scss";
@@ -197,6 +202,15 @@ const Button = styled(props => {
     styles.border = "3px solid rgba(0, 0, 0, 0.05)";
   } else if (props.variant === "outlined") {
     styles.border = `3px solid ${props.theme.brand.primary}`;
+  } else if (props.variant === "badge") {
+    styles.backgroundColor = props.color;
+    styles.height = "32px";
+    styles.display = "flex";
+    styles.alignItems = "center";
+    styles.paddingLeft = "16px";
+    styles.paddingRight = "16px";
+    styles.borderRadius = "16px";
+    styles["&:hover"].backgroundColor = lighten(props.color, 10);
   }
 
   if (props.color === "primary") {

src/base/static/components/atoms/buttons.js

@@ -21,6 +21,7 @@ const FontAwesomeIcon = styled(props => (
     fontFamily: "Font Awesome 5 Free",
     fontSize: props.fontSize,
     color: props.color,
+    textShadow: props.textShadow,
 
     "&:hover": {
       color: props.hoverColor,
@@ -42,6 +43,7 @@ FontAwesomeIcon.defaultProps = {
   content: "fa fa-globe",
   color: "#000",
   hoverColor: "#555",
+  textShadow: "initial",
 };
 
 const SiteLogo = styled(props => {

src/base/static/components/atoms/imagery.js

@@ -120,6 +120,27 @@ CheckboxInput.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
+const RadioInput = props => {
+  return (
+    <input
+      type="radio"
+      id={props.id}
+      name={props.name}
+      value={props.value}
+      onChange={props.onChange}
+      checked={props.checked}
+    />
+  );
+};
+
+RadioInput.propTypes = {
+  checked: PropTypes.bool.isRequired,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
 const NumberInput = props => {
   return (
     <input
@@ -194,6 +215,7 @@ RangeInput.propTypes = {
 
 export {
   CheckboxInput,
+  RadioInput,
   DatetimeInput,
   NumberInput,
   TextInput,

src/base/static/components/atoms/input.js

@@ -2,6 +2,20 @@ import PropTypes from "prop-types";
 import styled from "@emotion/styled";
 import { RegularTitle } from "./typography";
 
+const Badge = styled("span")(props => ({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: props.color,
+  borderRadius: "16px",
+  padding: "0 12px 0 12px",
+  height: "32px",
+  boxSizing: "border-box",
+
+  "&:hover": {
+    backgroundColor: props.hoverColor,
+  },
+}));
+
 const HorizontalRule = styled("hr")(props => {
   const styles = {
     marginTop: "12px",
@@ -93,6 +107,7 @@ const modalStyles = {
 };
 
 export {
+  Badge,
   HorizontalRule,
   ModalWrapper,
   ModalHeading,

src/base/static/components/atoms/layout.js

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import styled from "@emotion/styled";
 import moment from "moment";
 import { Link } from "react-router-dom";
+import { darken } from "@material-ui/core/styles/colorManipulator";
 
 import "./typography.scss";
 
@@ -211,6 +212,28 @@ const MicroText = styled("span")(props => {
   return textHandler(props, styles);
 });
 
+const DashboardText = styled("p")(props => ({
+  margin: 0,
+  padding: 0,
+  textAlign: props.textAlign,
+  fontFamily: props.weight === "bold" ? "PTSansBold" : "PTSans",
+  fontSize: props.fontSize,
+  color: props.color,
+  textTransform: props.textTransform,
+  marginTop: "4px",
+  marginBottom: "4px",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+}));
+
+DashboardText.defaultProps = {
+  color: "#222",
+  textAlign: "center",
+  weight: "regular",
+  textTransform: "none",
+  fontSize: "1rem",
+};
+
 const ExternalLink = styled("a")({
   textDecoration: "none",
   wordBreak: "break-all",
@@ -249,6 +272,22 @@ Time.propTypes = {
   time: PropTypes.string.isRequired,
 };
 
+// TODO: Dynamic badge border radius and padding to match content.
+const Badge = styled("span")(props => ({
+  backgroundColor: props.color,
+  color: darken(props.color, 0.8),
+  padding: "2px 12px 2px 12px",
+  borderRadius: "14px",
+}));
+
+Badge.defaultProps = {
+  color: "#bbb",
+};
+
+Badge.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
 export {
   ExternalLink,
   InternalLink,
@@ -271,5 +310,7 @@ export {
   RegularText,
   SmallText,
   MicroText,
+  DashboardText,
   Time,
+  Badge,
 };