[TTAHUB-3402] Hook up QA widgets to BE

.circleci/config.yml

@@ -560,7 +560,7 @@ parameters:
  type: string
  dev_git_branch: # change to feature branch to test deployment
  description: "Name of github branch that will deploy to dev"
- default: "al-ttahub-3316-3317-overview-widgets"
+ default: "al-ttahub-3402-connect-be-overview"
  type: string
  sandbox_git_branch: # change to feature branch to test deployment
  default: "kw-fix-duplicate-programs"

frontend/src/Routes.js

@@ -41,6 +41,9 @@ import SessionForm from './pages/SessionForm';
 import ViewTrainingReport from './pages/ViewTrainingReport';
 import QADashboard from './pages/QADashboard';
 import SomethingWentWrong from './components/SomethingWentWrong';
+import RecipientsWithNoTta from './pages/QADashboard/RecipientsWithNoTta';
+import RecipientsWithClassScoresAndGoals from './pages/QADashboard/RecipientsWithClassScoresAndGoals';
+import RecipientsWithOhsStandardFeiGoal from './pages/QADashboard/RecipientsWithOhsStandardFeiGoal';
 
 export default function Routes({
  alert,
@@ -157,6 +160,33 @@ export default function Routes({
  </AppWrapper>
  )}
  />
+ <Route
+ exact
+ path="/dashboards/qa-dashboard/recipients-with-no-tta"
+ render={() => (
+ <AppWrapper authenticated logout={logout}>
+ <RecipientsWithNoTta />
+ </AppWrapper>
+ )}
+ />
+ <Route
+ exact
+ path="/dashboards/qa-dashboard/recipients-with-ohs-standard-fei-goal"
+ render={() => (
+ <AppWrapper authenticated logout={logout}>
+ <RecipientsWithOhsStandardFeiGoal />
+ </AppWrapper>
+ )}
+ />
+ <Route
+ exact
+ path="/dashboards/qa-dashboard/recipients-with-class-scores-and-goals"
+ render={() => (
+ <AppWrapper authenticated logout={logout}>
+ <RecipientsWithClassScoresAndGoals />
+ </AppWrapper>
+ )}
+ />
  <Route
  exact
  path="/training-reports/:status(not-started|in-progress|complete|suspended)"

frontend/src/components/Menu.js

@@ -152,7 +152,7 @@ function Menu({
  <ul className="usa-list usa-list--unstyled" role="menu">
  {menuItems.map((item) => (
  <li key={item.label} role="menuitem">
- <Button type="button" id={item.id || false} onClick={() => { updateShown(false); item.onClick(); }} unstyled className="smart-hub--menu-button smart-hub--button__no-margin">
+ <Button type="button" id={item.id || undefined} onClick={() => { updateShown(false); item.onClick(); }} unstyled className="smart-hub--menu-button smart-hub--button__no-margin">
  <div className="padding-2 padding-right-3">
  {item.label}
  </div>

frontend/src/fetchers/__tests__/ssdi.js

@@ -1,8 +1,8 @@
 import fetchMock from 'fetch-mock';
 import join from 'url-join';
-import { getSelfServiceData } from '../ssdi';
+import { getSelfServiceData, containsFiltersThatAreNotApplicable } from '../ssdi';
 
-const ssdiUrl = join('/', 'api', 'ssdi');
+const ssdiUrl = join('/', 'api', 'ssdi', 'api', 'dashboards', 'qa');
 
 beforeEach(() => {
  fetchMock.restore();
@@ -11,7 +11,7 @@ beforeEach(() => {
 describe('SSDI fetcher', () => {
  it('should fetch data for qa-dashboard', async () => {
  const mockData = [{ data: 'Expected' }];
- const url = join(ssdiUrl, 'qa-dashboard', '?region.in[]=14');
+ const url = join(ssdiUrl, 'dashboard.sql', '?region.in[]=14');
  fetchMock.getOnce(url, mockData);
  const res = await getSelfServiceData('qa-dashboard', [{
  id: '9ac8381c-2507-4b4a-a30c-6f1f87a00901',
@@ -24,10 +24,10 @@ describe('SSDI fetcher', () => {
  });
  it('recipients-with-ohs-standard-goal', async () => {
  const mockData = [{ data: 'Expected' }];
- const url = join(ssdiUrl, 'recipients-with-ohs-standard-goal', '?region.in[]=14');
+ const url = join(ssdiUrl, 'fei.sql', '?region.in[]=14');
  fetchMock.getOnce(url, mockData);
 
- const res = await getSelfServiceData('recipients-with-ohs-standard-goal', [
+ const res = await getSelfServiceData('recipients-with-ohs-standard-fei-goal', [
  {
  id: '9ac8381c-2507-4b4a-a30c-6f1f87a00901',
  topic: 'region',
@@ -46,7 +46,7 @@ describe('SSDI fetcher', () => {
  });
  it('recipients-with-no-tta', async () => {
  const mockData = [{ data: 'Expected' }];
- const url = join(ssdiUrl, 'recipients-with-no-tta', '?region.in[]=14');
+ const url = join(ssdiUrl, 'no-tta.sql', '?region.in[]=14');
  fetchMock.getOnce(url, mockData);
 
  const res = await getSelfServiceData('recipients-with-no-tta', [
@@ -82,4 +82,40 @@ describe('SSDI fetcher', () => {
  },
  ])).rejects.toThrow('Invalid filter name');
  });
+
+ it('containsFiltersThatAreNotApplicable returns false if all filters are allowed', () => {
+ const filters = [
+ {
+ id: '9ac8381c-2507-4b4a-a30c-6f1f87a00901',
+ topic: 'region',
+ condition: 'is',
+ query: '14',
+ },
+ {
+ id: '9ac8381c-2507-4b4a-a30c-6f1f8723401',
+ topic: 'pickles',
+ condition: 'are',
+ query: 'spicy',
+ },
+ ];
+ expect(containsFiltersThatAreNotApplicable('recipients-with-no-tta', filters)).toBe(true);
+ });
+
+ it('containsFiltersThatAreNotApplicable returns true if any filter is not allowed', () => {
+ const filters = [
+ {
+ id: '9ac8381c-2507-4b4a-a30c-6f1f87a00901',
+ topic: 'region',
+ condition: 'is',
+ query: '14',
+ },
+ {
+ id: '9ac8381c-2507-4b4a-a30c-6f1f8723401',
+ topic: 'stateCode',
+ condition: 'is',
+ query: 'ct',
+ },
+ ];
+ expect(containsFiltersThatAreNotApplicable('recipients-with-class-scores-and-goals', filters)).toBe(false);
+ });
 });

frontend/src/fetchers/ssdi.js

@@ -5,22 +5,58 @@ import { QA_DASHBOARD_FILTER_CONFIG } from '../pages/QADashboard/constants';
 
 const ssdiUrl = join('/', 'api', 'ssdi');
 
+const urlsForQuery = {
+ 'recipients-with-no-tta': join(ssdiUrl, 'api', 'dashboards', 'qa', 'no-tta.sql'),
+ 'recipients-with-ohs-standard-fei-goal': join(ssdiUrl, 'api', 'dashboards', 'qa', 'fei.sql'),
+ 'recipients-with-class-scores-and-goals': join(ssdiUrl, 'api', 'dashboards', 'qa', 'class.sql'),
+ 'qa-dashboard': join(ssdiUrl, 'api', 'dashboards', 'qa', 'dashboard.sql'),
+};
+
 const allowedTopicsForQuery = {
  'recipients-with-no-tta': [
+ 'recipient',
+ 'grantNumber',
+ 'programType',
+ 'stateCode',
  'region',
  'startDate',
  'endDate',
+ 'dataSetSelection',
+ ],
+ 'recipients-with-ohs-standard-fei-goal': [
+ 'recipient',
  'grantNumber',
+ 'programType',
  'stateCode',
- ],
- 'recipients-with-ohs-standard-goal': [
  'region',
- 'startDate',
- 'endDate',
+ 'group',
+ 'createDate',
+ 'reason',
+ ],
+ 'recipients-with-class-scores-and-goals': [
+ 'recipient',
  'grantNumber',
+ 'programType',
  'stateCode',
+ 'region',
+ 'domainEmotionalSupport',
+ 'domainClassroomOrganization',
+ 'domainInstructionalSupport',
+ 'createDate',
  ],
- 'qa-dashboard': [...QA_DASHBOARD_FILTER_CONFIG.map((filter) => filter.id), 'region'],
+ 'qa-dashboard': [...QA_DASHBOARD_FILTER_CONFIG.map((filter) => filter),
+ 'region',
+ 'reportId',
+ ],
+};
+
+export const containsFiltersThatAreNotApplicable = (filterName, filters) => {
+ if (!allowedTopicsForQuery[filterName]) {
+ throw new Error('Invalid filter name');
+ }
+
+ const config = allowedTopicsForQuery[filterName];
+ return filters.some((filter) => !config.includes(filter.topic));
 };
 
 export const getSelfServiceDataQueryString = (filterName, filters) => {
@@ -36,14 +72,14 @@ export const getSelfServiceDataQueryString = (filterName, filters) => {
 
 const getSelfServiceUrl = (filterName, filters) => {
  const queryString = getSelfServiceDataQueryString(filterName, filters);
- const baseUrl = join(ssdiUrl, filterName);
+ const baseUrl = join(urlsForQuery[filterName]);
  return `${baseUrl}?${queryString}`;
 };
 
-export const getSelfServiceData = async (filterName, filters) => {
+export const getSelfServiceData = async (filterName, filters, dataSetSelection = []) => {
  const url = getSelfServiceUrl(filterName, filters);
-
- const response = await get(url);
+ const urlToUse = url + dataSetSelection.map((s) => `&dataSetSelection[]=${s}`).join('');
+ const response = await get(urlToUse);
  if (!response.ok) {
  throw new Error('Error fetching self service data');
  }

frontend/src/hooks/useWidgetExport.js

@@ -7,6 +7,7 @@ export default function useWidgetExport(
  checkboxes,
  exportHeading,
  exportName,
+ exportDataName = null, // Specify the data to export.
 ) {
  const exportRows = useCallback((exportType) => {
  let url = null;
@@ -33,7 +34,8 @@ export default function useWidgetExport(
 
  // create a csv file of all the rows.
  const csvRows = dataToExport.map((row) => {
- const rowValues = row.data.map((d) => d.value);
+ const dataToUse = !row.data && exportDataName ? row[exportDataName] : row.data;
+ const rowValues = dataToUse.map((d) => d.value);
  // If the heading has a comma, wrap it in quotes.
  const rowHeadingToUse = row.heading.includes(',') ? `"${row.heading}"` : row.heading;
  return `${rowHeadingToUse},${rowValues.join(',')}`;
@@ -59,7 +61,7 @@ export default function useWidgetExport(
  } finally {
  window.URL.revokeObjectURL(url);
  }
- }, [checkboxes, data, exportHeading, exportName, headers]);
+ }, [checkboxes, data, exportHeading, exportName, headers, exportDataName]);
 
  return {
  exportRows,

frontend/src/hooks/useWidgetPaging.js

@@ -28,6 +28,7 @@ export default function useWidgetPaging(
  stringColumns = [],
  dateColumns = [],
  exportName,
+ exportDataName = null,
 ) {
  const {
  sortConfig,
@@ -50,6 +51,7 @@ export default function useWidgetPaging(
  checkBoxes,
  exportHeading,
  exportName,
+ exportDataName,
  );
 
  const { activePage } = sortConfig;
@@ -82,8 +84,8 @@ export default function useWidgetPaging(
  }
  }, [loading, perPageNumber, setSortConfig, sortConfig]);
 
- const sort = useCallback((sortBy) => {
- requestSort(sortBy);
+ const sort = useCallback((sortBy, direction) => {
+ requestSort(sortBy, direction);
  setOffset(0);
  }, [requestSort]);
 
@@ -98,5 +100,6 @@ export default function useWidgetPaging(
  requestSort: sort,
  exportRows,
  sortConfig,
+ setSortConfig,
  };
 }

frontend/src/hooks/useWidgetSorting.js

@@ -22,10 +22,14 @@ export default function useWidgetSorting(
 ) {
  const [sortConfig, setSortConfig] = useSessionSort(defaultSortConfig, localStorageKey);
 
- const requestSort = useCallback((sortBy) => {
+ const requestSort = useCallback((sortBy, passedDirection = null) => {
  // Get sort direction.
  let direction = 'asc';
- if (
+ // If we have a passed direction this means that we are sorting via a dropdown and not arrow.
+ if (passedDirection) {
+ // If the direction is passed, use it.
+ direction = passedDirection;
+ } else if (
  sortConfig
  && sortConfig.sortBy === sortBy
  && sortConfig.direction === 'asc'
@@ -42,20 +46,23 @@ export default function useWidgetSorting(
 
  // default is "value", otherwise use the key from the lookup
  const sortingBy = sorts[sortBy] || 'value';
-
  let valuesToSort;
  switch (sortingBy) {
  case 'string':
  valuesToSort = dataToUse.map((t) => ({
  ...t,
- sortBy: t.heading,
+ sortBy: !t.heading
+ ? t[sortBy].toString().toLowerCase() // If we don't have heading data, use the value.
+ : t.heading.toString().toLowerCase(),
  }));
  break;
  case 'date':
  valuesToSort = dataToUse.map((t) => (
  {
  ...t,
- sortBy: new Date(t.data.find((tp) => (tp.sortKey || tp.title) === sortBy).value),
+ sortBy: !t.data
+ ? new Date(t[sortBy]) // If we don't have data, use the value.
+ : new Date(t.data.find((tp) => (tp.sortKey || tp.title) === sortBy).value),
  }));
  break;
  case 'key':
@@ -69,7 +76,9 @@ export default function useWidgetSorting(
  valuesToSort = dataToUse.map((t) => (
  {
  ...t,
- sortBy: parseValue(t.data.find((tp) => (tp.sortKey || tp.title) === sortBy).value),
+ sortBy: !t.data
+ ? parseValue(t[sortBy]) // If we don't have data, use the value.
+ : parseValue(t.data.find((tp) => (tp.sortKey || tp.title) === sortBy).value),
  }));
  break;
  }

frontend/src/pages/QADashboard/Components/GoalCard.js

@@ -6,6 +6,8 @@ import DataRow from '../../../components/DataRow';
 
 function GoalCard({
  goal,
+ recipientId,
+ regionId,
  expanded,
 }) {
  return (
@@ -15,7 +17,7 @@ function GoalCard({
  <DataRow
  label="Goal number"
  value={(
- <Link to="recipient-tta-records/376/region/1/goals?id[]=83697">
+ <Link to={`/recipient-tta-records/${recipientId}/region/${regionId}/goals?id[]=${goal.id}`}>
  {goal.goalNumber}
  </Link>
  )}
@@ -48,5 +50,7 @@ export const goalPropTypes = PropTypes.shape({
 GoalCard.propTypes = {
  goal: goalPropTypes.isRequired,
  expanded: PropTypes.bool.isRequired,
+ recipientId: PropTypes.string.isRequired,
+ regionId: PropTypes.string.isRequired,
 };
 export default GoalCard;