diff --git a/.circleci/config.yml b/.circleci/config.yml index 733ec28069..0674170b83 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -30,9 +30,10 @@ jobs: - env - run: name: Run yarn test + no_output_timeout: 20m command: | cd ${CIRCLE_WORKING_DIRECTORY}/frontend/ - CI=true yarn test -w 3 --silent + CI=true yarn test -w 1 --silent CI=true GENERATE_SOURCEMAP=false yarn build backend-code-check-PEP8: @@ -133,7 +134,6 @@ jobs: --output text) - run: name: Make Database Backup - no_output_timeout: 15m command: | aws rds wait db-instance-available \ --db-instance-identifier ${RDS_ID} @@ -211,7 +211,6 @@ jobs: /tmp/tasking-manager.cfn.json > "$tmpfile" && mv "$tmpfile" $CIRCLE_WORKING_DIRECTORY/cfn-config-<< parameters.stack_name >>.json - run: name: Deploy to << parameters.stack_name >> - no_output_timeout: 15m command: | export NODE_PATH=/usr/local/share/.config/yarn/global/node_modules/ validate-template $CIRCLE_WORKING_DIRECTORY/scripts/aws/cloudformation/tasking-manager.template.js diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss index 21dd10646e..afee4e75ca 100644 --- a/frontend/src/assets/styles/_extra.scss +++ b/frontend/src/assets/styles/_extra.scss @@ -611,8 +611,8 @@ a[href="https://www.mapbox.com/map-feedback/"] color: rgba($blue-dark, 0.9); } -.gap-0\.625 { - gap: 0.75rem; +.gap-0\.5 { + gap: 0.5rem; } .gap-0\.75 { diff --git a/frontend/src/components/partnerMapswipeStats/contributionsGrid.js b/frontend/src/components/partnerMapswipeStats/contributionsGrid.js index 691231e83e..18b5313d95 100644 --- a/frontend/src/components/partnerMapswipeStats/contributionsGrid.js +++ b/frontend/src/components/partnerMapswipeStats/contributionsGrid.js @@ -1,11 +1,13 @@ import CalendarHeatmap from 'react-calendar-heatmap'; import { Tooltip } from 'react-tooltip'; import { FormattedMessage, useIntl } from 'react-intl'; +import { format } from 'date-fns'; import PropTypes from 'prop-types'; import messages from './messages'; const LEGEND_INDEXES = [30, 50, 70, 100]; + const Legend = () => { const legendFontStyle = 'ph2 f7 blue-grey ttc'; @@ -25,27 +27,13 @@ const Legend = () => { ); }; -export const ContributionsGrid = ({ contributionsByDate = [] }) => { +export const ContributionsGrid = ({ contributionsByDate = [], startDate, endDate }) => { const gridData = contributionsByDate.map((contribution) => ({ date: contribution.taskDate, count: contribution.totalcontributions, })); const intl = useIntl(); - const getDate = (isEndDate = false) => { - const today = new Date(); - const currentYear = today.getFullYear(); - - const formatDate = (date) => { - const offset = date.getTimezoneOffset(); - return new Date(date.getTime() - offset * 60 * 1000); - }; - - return !isEndDate - ? formatDate(new Date(currentYear - 1, 11, 31)) - : formatDate(new Date(currentYear, 11, 31)); - }; - const countValues = gridData.map((contribution) => contribution.count); const maxValue = Math.max(...countValues); @@ -69,16 +57,19 @@ export const ContributionsGrid = ({ contributionsByDate = [] }) => { } }; + const endDateYear = endDate.split('-')[0]; + const formattedEndDate = format(new Date(endDateYear, 11, 31), 'yyyy-MM-dd'); + return (
-

+

{ if (!value) return 'fill-tan'; @@ -114,4 +105,6 @@ ContributionsGrid.propTypes = { totalcontributions: PropTypes.number, }), ), + startDate: PropTypes.instanceOf(Date), + endDate: PropTypes.instanceOf(Date), }; diff --git a/frontend/src/components/partnerMapswipeStats/dateFilter.js b/frontend/src/components/partnerMapswipeStats/dateFilter.js new file mode 100644 index 0000000000..0eda552f81 --- /dev/null +++ b/frontend/src/components/partnerMapswipeStats/dateFilter.js @@ -0,0 +1,91 @@ +import { useEffect } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { format, parse } from 'date-fns'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; + +import { CalendarIcon } from '../svgIcons'; +import messages from './messages'; + +const today = new Date(); +const currentYear = today.getFullYear(); +const dateFormat = 'yyyy-MM-dd'; + +const initialState = { + fromDate: format(new Date(currentYear, 0, 1), dateFormat), + toDate: format(today, dateFormat), +}; + +export const DateFilter = ({ isLoading, filters, setFilters }) => { + // set initial date filter state + useEffect(() => { + setFilters((prev) => ({ + ...prev, + ...initialState, + })); + }, [setFilters]); + + const handleDateSelect = (key, selectedDate) => { + let { fromDate, toDate } = filters; + const selectedDateValue = new Date(selectedDate).valueOf(); + const toDateValue = new Date(toDate).valueOf(); + const fromDateValue = new Date(fromDate).valueOf(); + // adjust from and to date based on greater/lesser value + if (key === 'fromDate' && selectedDateValue > toDateValue) { + fromDate = toDate; + toDate = selectedDate; + } else if (key === 'toDate' && selectedDateValue < fromDateValue) { + toDate = fromDate; + fromDate = selectedDate; + } else if (key === 'toDate') { + toDate = selectedDate; + } else { + fromDate = selectedDate; + } + // set filters state + setFilters((prev) => ({ + ...prev, + fromDate, + toDate, + })); + }; + + if (isLoading) return <>; + + return ( +
+
+
+ + { + handleDateSelect('fromDate', format(date, dateFormat)); + }} + dateFormat={dateFormat} + className="w4 pv2 ph1 ba b--grey-light" + showYearDropdown + scrollableYearDropdown + /> + + to + + + { + handleDateSelect('toDate', format(date, dateFormat)); + }} + dateFormat={dateFormat} + className="w4 pv2 ph1 ba b--grey-light" + showYearDropdown + scrollableYearDropdown + /> +
+ + + +
+
+ ); +}; diff --git a/frontend/src/components/partnerMapswipeStats/messages.js b/frontend/src/components/partnerMapswipeStats/messages.js index 8f5a3d4a98..c9b06e5ae5 100644 --- a/frontend/src/components/partnerMapswipeStats/messages.js +++ b/frontend/src/components/partnerMapswipeStats/messages.js @@ -56,6 +56,14 @@ export default defineMessages({ id: 'management.partners.stats.mapswipe.groupMembers.error', defaultMessage: 'Something went wrong!', }, + groupStatsboard: { + id: 'management.partners.stats.mapswipe.groupStatsboard', + defaultMessage: 'Group Statsboard', + }, + dateFilterSubText: { + id: 'management.partners.stats.mapswipe.dateFilterSubText', + defaultMessage: 'All dates are calculated in UTC', + }, contributions: { id: 'management.partners.stats.mapswipe.contributions', defaultMessage: 'Contributions', diff --git a/frontend/src/components/partnerMapswipeStats/overview.js b/frontend/src/components/partnerMapswipeStats/overview.js index eb88287fa6..153781569d 100644 --- a/frontend/src/components/partnerMapswipeStats/overview.js +++ b/frontend/src/components/partnerMapswipeStats/overview.js @@ -59,7 +59,7 @@ export const getShortNumber = (value) => {   - {shortNumberValue.substr(-1)} + {shortNumberValue.substr(-1)} ); }; diff --git a/frontend/src/views/partnersMapswipeStats.js b/frontend/src/views/partnersMapswipeStats.js index b3b097b804..948d166764 100644 --- a/frontend/src/views/partnersMapswipeStats.js +++ b/frontend/src/views/partnersMapswipeStats.js @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { FormattedMessage } from 'react-intl'; import { useParams } from 'react-router-dom'; import ReactPlaceholder from 'react-placeholder'; @@ -9,6 +10,7 @@ import { getShortNumber, formatSecondsToTwoUnits, } from '../components/partnerMapswipeStats/overview'; +import { DateFilter } from '../components/partnerMapswipeStats/dateFilter'; import { GroupMembers } from '../components/partnerMapswipeStats/groupMembers'; import { ContributionsGrid } from '../components/partnerMapswipeStats/contributionsGrid'; import { ContributionsHeatmap } from '../components/partnerMapswipeStats/contributionsHeatmap'; @@ -19,6 +21,7 @@ import { SwipesByProjectType } from '../components/partnerMapswipeStats/swipesBy import { SwipesByOrganization } from '../components/partnerMapswipeStats/swipesByOrganization'; import messages from './messages'; import { fetchLocalJSONAPI } from '../network/genericJSONRequest'; + import './partnersMapswipeStats.scss'; const PagePlaceholder = () => ( @@ -57,23 +60,18 @@ const InfoBanner = () => { export const PartnersMapswipeStats = () => { const { id: partnerPermalink } = useParams(); + const [filters, setFilters] = useState({}); // state for date filter const { isLoading, isError, data, isRefetching } = useQuery({ - queryKey: ['partners-mapswipe-filtered-statistics', partnerPermalink], + queryKey: [ + 'partners-mapswipe-filtered-statistics', + partnerPermalink, + filters.fromDate, + filters.toDate, + ], queryFn: async () => { - const today = new Date(); - const currentYear = today.getFullYear(); - - const formatDate = (date) => { - const offset = date.getTimezoneOffset(); - const adjustedDate = new Date(date.getTime() - offset * 60 * 1000); - return adjustedDate.toISOString().split('T')[0]; - }; - - const fromDate = formatDate(new Date(currentYear, 0, 1)); - const endDate = formatDate(today); - + const { fromDate, toDate } = filters; const response = await fetchLocalJSONAPI( - `partners/${partnerPermalink}/filtered-statistics/?fromDate=${fromDate}&toDate=${endDate}`, + `partners/${partnerPermalink}/filtered-statistics/?fromDate=${fromDate}&toDate=${toDate}`, ); return response; }, @@ -105,6 +103,8 @@ export const PartnersMapswipeStats = () => { + + } ready={!isLoading && !isRefetching}> {!isLoading && isError ? (
@@ -118,7 +118,11 @@ export const PartnersMapswipeStats = () => { ) : ( <>
- +
diff --git a/frontend/src/views/teams.js b/frontend/src/views/teams.js index 32a1b56b4e..d3f73c6364 100644 --- a/frontend/src/views/teams.js +++ b/frontend/src/views/teams.js @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; -import { Link, useNavigate, useParams } from 'react-router-dom'; +import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { Form } from 'react-final-form'; import { @@ -421,18 +421,30 @@ export function EditTeam(props) { export function TeamDetail() { const { id } = useParams(); useSetTitleTag(`Team #${id}`); + const location = useLocation(); + const navigate = useNavigate(); const userDetails = useSelector((state) => state.auth.userDetails); const token = useSelector((state) => state.auth.token); const [error, loading, team] = useFetch(`teams/${id}/`); // eslint-disable-next-line const [projectsError, projectsLoading, projects] = useFetch( - `projects/?teamId=${id}&omitMapResults=true&projectStatuses=PUBLISHED,DRAFT,ARCHIVED`, + `projects/?teamId=${id}&omitMapResults=true&projectStatuses=PUBLISHED`, id, ); const [isMember, setIsMember] = useState(false); const [managers, setManagers] = useState([]); const [members, setMembers] = useState([]); + useEffect(() => { + if (!token) { + navigate('/login', { + state: { + from: location.pathname, + }, + }); + } + }, [location.pathname, navigate, token]); + useEffect(() => { if (team && team.members) { setManagers(filterActiveManagers(team.members));