Skip to content

Commit

Permalink
Settings Feature (#84)
Browse files Browse the repository at this point in the history
* Settings: Scaffolding (#59)

* Restructure settings files, rename, extract styles

* Refactor settings page and set up existing components in new structure

* Styling adjustment

* Change text to Your Account

* Settings: Metric Configuration (1/n) (#64)

* Initial work on metric config refactor in settings

* Continue iterating on refactor up to the breakdown page

* Remove routing to old metrics page - remove from menu

* Styling adjustment

* Fix key warning

Co-authored-by: Mahmoud <[email protected]>

Co-authored-by: Mahmoud <[email protected]>

Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66)

* Initial work on metric config refactor in settings

* Continue iterating on refactor up to the breakdown page

* Styling adjustment

* Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks

Restyle metric details up to breakdown dimensions

New breakdown copy

Refactor breakdowns with toggles

* Refactor disaggregations to use checkboxes and remove toggle switch

* Add definitions panel, add icon

* Style clean up - comments

* Clean up

* Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization

Co-authored-by: Mahmoud <[email protected]>

Settings: Metric Configuration: Definitions (3/n) (#83)

* Initial work on MetricDefinitions component

* Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes

* Adjust styles for scrolling

* Clean up

* Style and comment clean up

* Fix type

* Use undefined vs empty string

* Fix key warning

* Settings: Metric Configuration: Navigation (Table of Contents) (4/n)  (#85)

* Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change

* Clean up

* Add comments

Co-authored-by: Mahmoud <[email protected]>

Co-authored-by: Mahmoud <[email protected]>

Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91)

* Major clean up - separate components into their own files

* Fix dimension bug

* Fix switch agency bug

* Minor clean up

* Merge types with existing types and update all connected components

* Clean up

* Handle cases when settings array is empty or non-existent

* Handle cases when settings array is empty or non-existent

* Styling adjustments per prev feedback

* Recreate MetricsView Component for Data Visualization (#101)

* Recreate old MetricsView component
Update route and add to menu
Update styling
Remove unnecessary code - minor refactor
Clean up

* Fix styling issue

* Add spacing between header and data viz

* Add border top to data viz dropdown

* Update tooltip and link to direct users to Settings to change metric config

Co-authored-by: Mahmoud <[email protected]>

Co-authored-by: Mahmoud <[email protected]>

Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108)

* [Summary] Remove mocks and implement definition saving functionality and UI update functionality

* Revert to default values functionality

* Fix revert to default for metric setting

* Clean up comment

* PR feedback: reverse the conditionals

* Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110)

* Remove tabs in metric list when agency has only one system

* Change casing to capitalized case on Monthly Annual badges

* Reduce spacing of Settings menu

* Scroll gap adjustment

* Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112)

* Add arrow vector, add logic for persisting on click, update hover and active states, clean up

* Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113)

* Add hover feature to display the default settings when user hovers over the revert button

* Update to Choose instead of Revert per design

* Clean up

* Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n)  (#115)

* When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation

* Styling bug fixes

* Implement responsiveness per design (#117)

Co-authored-by: Mahmoud <[email protected]>

* Rebase adjustments - updating imports, types and other react upgrade related adjustments

* Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (6/n) (#121)

* Fix overflow scroll bars

* Adjust overall spacing and font size, fix squished arrow in metric box

* Adjust Context and update copy for items without tech definition

Co-authored-by: Mahmoud <[email protected]>

Co-authored-by: Mahmoud <[email protected]>
  • Loading branch information
mxosman and Mahmoud authored Oct 27, 2022
1 parent e419e3c commit 0804d1a
Show file tree
Hide file tree
Showing 33 changed files with 2,736 additions and 11,375 deletions.
1 change: 1 addition & 0 deletions common/components/DataViz/DatapointsView.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const DatapointsViewControlsContainer = styled.div`
display: flex;
flex-direction: row;
border-bottom: 1px solid ${palette.highlight.grey9};
border-top: 1px solid ${palette.highlight.grey9};
`;

const DatapointsViewDropdown = styled(Dropdown)`
Expand Down
15 changes: 14 additions & 1 deletion common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,15 @@ export type MetricDisaggregationDimensionsWithErrors =
error?: string;
};

export type MetricConfigurationSettingsOptions = "Yes" | "No" | "N/A";

export type MetricConfigurationSettings = {
key: string;
label: string;
included: MetricConfigurationSettingsOptions;
default: MetricConfigurationSettingsOptions;
};

export interface Metric {
key: string;
system: AgencySystems;
Expand All @@ -95,6 +104,8 @@ export interface Metric {
contexts: MetricContext[];
disaggregations: MetricDisaggregations[];
enabled?: boolean;
settings?: MetricConfigurationSettings[];
frequency?: ReportFrequency;
}

export interface MetricDefinition {
Expand All @@ -107,7 +118,7 @@ export interface MetricContext {
display_name: string | null | undefined;
reporting_note: string | null | undefined;
required: boolean;
type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE";
type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE" | "BOOLEAN";
value: string | number | boolean | null | undefined;
multiple_choice_options: string[];
}
Expand All @@ -127,6 +138,8 @@ export interface MetricDisaggregationDimensions {
value: string | number | boolean | null | undefined;
reporting_note: string;
enabled?: boolean;
settings?: MetricConfigurationSettings[];
display_name?: string;
}

export interface CreateReportFormValuesType extends Record<string, unknown> {
Expand Down
8 changes: 4 additions & 4 deletions publisher/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ import { trackNavigation } from "./analytics";
import { DataUpload } from "./components/DataUpload";
import { PageWrapper } from "./components/Forms";
import Header from "./components/Header";
import { MetricsView } from "./components/MetricsView";
import { MetricsView } from "./components/MetricConfiguration/MetricsView";
import CreateReports from "./components/Reports/CreateReport";
import ReportDataEntry from "./components/Reports/ReportDataEntry";
import ReviewMetrics from "./components/ReviewMetrics/ReviewMetrics";
import AccountSettings from "./pages/AccountSettings";
import Reports from "./pages/Reports";
import Settings from "./pages/Settings";

const App: React.FC = (): ReactElement => {
const location = useLocation();
Expand All @@ -43,10 +43,10 @@ const App: React.FC = (): ReactElement => {

<Routes>
<Route path="/" element={<Reports />} />
<Route path="/data" element={<MetricsView />} />
<Route path="/reports/create" element={<CreateReports />} />
<Route path="/reports/:id" element={<ReportDataEntry />} />
<Route path="/settings" element={<AccountSettings />} />
<Route path="/metrics" element={<MetricsView />} />
<Route path="/settings" element={<Settings />} />
<Route path="/upload" element={<DataUpload />} />
<Route path="/review-metrics" element={<ReviewMetrics />} />
</Routes>
Expand Down
6 changes: 3 additions & 3 deletions publisher/src/components/Auth/AuthWall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { Loading } from "../Loading";
import UnauthorizedPage from "./UnauthorizedPage";
import VerificationPage from "./VerificationPage";

const AuthWall: React.FC<React.PropsWithChildren> = ({
children,
}): React.ReactElement | null => {
const AuthWall: React.FC<
React.PropsWithChildren<{ children?: React.ReactNode }>
> = ({ children }): React.ReactElement | null => {
const { authStore } = useStore();

useEffect(
Expand Down
9 changes: 6 additions & 3 deletions publisher/src/components/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,21 @@ export type BadgeProps = {
color: BadgeColors;
disabled?: boolean;
loading?: boolean;
noMargin?: boolean;
};

export const BadgeElement = styled.div<{
color?: BadgeColors;
disabled?: boolean;
noMargin?: boolean;
}>`
height: 24px;
display: flex;
justify-content: center;
align-items: center;
background: ${({ color, disabled }) => {
if (color === "GREY" || disabled) {
return palette.highlight.grey9;
return palette.highlight.grey8;
}
if (color === "RED") {
return palette.solid.red;
Expand All @@ -55,21 +57,22 @@ export const BadgeElement = styled.div<{
}};
color: ${palette.solid.white};
padding: 4px 8px;
margin-left: 10px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
text-transform: capitalize;
${({ noMargin }) => !noMargin && `margin-left: 10px;`};
`;

export const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({
color,
disabled,
loading,
noMargin,
children,
}) => {
return (
<BadgeElement color={color} disabled={disabled}>
<BadgeElement color={color} disabled={disabled} noMargin={noMargin}>
{children}
{loading && <MiniLoader />}
</BadgeElement>
Expand Down
14 changes: 5 additions & 9 deletions publisher/src/components/DataUpload/DataUpload.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -517,21 +517,16 @@ export const ConfirmationPageContainer = styled.div`
align-items: center;
`;

export const UploadedFilesContainer = styled.div`
max-height: 50vh;
overflow-y: scroll;
`;
export const UploadedFilesContainer = styled.div``;

export const UploadedFilesWrapper = styled.div`
margin-top: 50px;
position: relative;
overflow-y: scroll;
`;

export const UploadedFilesTable = styled(Table)`
padding: unset;
max-height: 40vh;
overflow-y: scroll;
padding-bottom: 50px;
padding-bottom: 100px;
`;

export const ExtendedTabbedBar = styled(TabbedBar)`
Expand Down Expand Up @@ -629,5 +624,6 @@ export const CheckIcon = styled.img`

export const ExtendedOpacityGradient = styled(OpacityGradient)`
height: 50px;
position: absolute;
position: fixed;
bottom: 0;
`;
54 changes: 33 additions & 21 deletions publisher/src/components/DataUpload/UploadedFiles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { useStore } from "../../stores";
import { removeSnakeCase } from "../../utils";
import downloadIcon from "../assets/download-icon.png";
import { Badge, BadgeColorMapping, BadgeColors } from "../Badge";
import { Title, TitleWrapper } from "../Forms";
import { Loader } from "../Loading";
import {
ActionButton,
Expand All @@ -33,13 +34,15 @@ import {
ExtendedCell,
ExtendedLabelCell,
ExtendedLabelRow,
ExtendedOpacityGradient,
ExtendedRow,
UploadedFile,
UploadedFilesContainer,
UploadedFilesError,
UploadedFilesLoading,
UploadedFilesTable,
UploadedFileStatus,
UploadedFilesWrapper,
} from ".";

export const UploadedFileRow: React.FC<{
Expand Down Expand Up @@ -315,26 +318,35 @@ export const UploadedFiles: React.FC = observer(() => {
}

return (
<UploadedFilesContainer>
<ExtendedLabelRow>
{dataUploadColumnTitles.map((title) => (
<ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
))}
</ExtendedLabelRow>
<UploadedFilesTable>
{uploadedFiles.map((fileDetails) => {
const fileRowDetails = getFileRowDetails(fileDetails);

return (
<UploadedFileRow
key={fileRowDetails.key}
fileRowDetails={fileRowDetails}
deleteUploadedFile={deleteUploadedFile}
updateUploadedFileStatus={updateUploadedFileStatus}
/>
);
})}
</UploadedFilesTable>
</UploadedFilesContainer>
<UploadedFilesWrapper>
<TitleWrapper>
<Title>Uploaded Files</Title>
</TitleWrapper>

<UploadedFilesContainer>
<ExtendedLabelRow>
{dataUploadColumnTitles.map((title) => (
<ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
))}
</ExtendedLabelRow>

<UploadedFilesTable>
{uploadedFiles.map((fileDetails) => {
const fileRowDetails = getFileRowDetails(fileDetails);

return (
<UploadedFileRow
key={fileRowDetails.key}
fileRowDetails={fileRowDetails}
deleteUploadedFile={deleteUploadedFile}
updateUploadedFileStatus={updateUploadedFileStatus}
/>
);
})}
</UploadedFilesTable>
</UploadedFilesContainer>

<ExtendedOpacityGradient />
</UploadedFilesWrapper>
);
});
3 changes: 1 addition & 2 deletions publisher/src/components/Forms/BinaryRadioButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,8 @@ export const RadioButtonLabel = styled.label<{
display: flex;
justify-content: center;
align-items: center;
background: ${palette.highlight.grey1};
padding: 16px 24px;
border: 1px solid ${palette.highlight.grey3};
border: 1px solid ${palette.highlight.grey4};
border-radius: 2px;
transition: 0.2s ease;
Expand Down
4 changes: 2 additions & 2 deletions publisher/src/components/Forms/NotReportedIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,8 @@ export const NotReportedIcon: React.FC<{
This has been disabled by an admin because the data is unavailable.{" "}
If you have the data for this, consider changing the configuration
in the{" "}
<MetricsViewLink onClick={() => navigate("/metrics")}>
Metrics View
<MetricsViewLink onClick={() => navigate("/settings")}>
Settings
</MetricsViewLink>
.
</NotReportedIconTooltip>
Expand Down
22 changes: 11 additions & 11 deletions publisher/src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ enum MenuItems {
LearnMore = "LEARN MORE",
Settings = "SETTINGS",
Agencies = "AGENCIES",
Metrics = "METRICS",
Data = "DATA",
}

const Menu = () => {
Expand Down Expand Up @@ -77,8 +77,8 @@ const Menu = () => {
setActiveMenuItem(MenuItems.CreateReport);
} else if (location.pathname === "/settings") {
setActiveMenuItem(MenuItems.Settings);
} else if (location.pathname === "/metrics") {
setActiveMenuItem(MenuItems.Metrics);
} else if (location.pathname === "/data") {
setActiveMenuItem(MenuItems.Data);
} else {
setActiveMenuItem(undefined);
}
Expand All @@ -92,14 +92,6 @@ const Menu = () => {
`Welcome, ${userStore.nameOrEmail} at ${userStore.currentAgency.name}`}
</WelcomeUser>

{/* Metrics View */}
<MenuItem
onClick={() => navigate("/metrics")}
active={activeMenuItem === MenuItems.Metrics}
>
Metrics
</MenuItem>

{/* Reports */}
<MenuItem
onClick={() => navigate("/")}
Expand All @@ -108,6 +100,14 @@ const Menu = () => {
Reports
</MenuItem>

{/* Data (Visualizations) */}
<MenuItem
onClick={() => navigate("/data")}
active={activeMenuItem === MenuItems.Data}
>
Data
</MenuItem>

{/* Learn More */}
<MenuItem active={activeMenuItem === MenuItems.LearnMore}>
<a
Expand Down
Loading

0 comments on commit 0804d1a

Please sign in to comment.