Skip to content

Commit d015957

Browse files
earth-walkerearth-walker
authored
Merge pull request #365 from CodeForPhilly/builder-frontend-tooltip-implementation
First pass at implementing tooltips in the screener builder Merging with the intention to get some tooltips into the screener builder now and continue the discussion about where to best place some of them.
2 parents 1d0518e + ee2dbb9 commit d015957

File tree

6 files changed

+186
-63
lines changed

6 files changed

+186
-63
lines changed

‎builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import eligibilityCheckResource from "./eligibilityCheckResource";
77

88
import type { EligibilityCheck } from "@/types";
99
import ConfirmationModal from "@/components/shared/ConfirmationModal";
10+
import Tooltip from "@/components/shared/Tooltip";
1011

1112
const EligibilityChecksList = () => {
1213
const { checks, actions, actionInProgress, initialLoadStatus } =
@@ -16,7 +17,7 @@ const EligibilityChecksList = () => {
1617
const [addingNewCheck, setAddingNewCheck] = createSignal<boolean>(false);
1718

1819
const [checkIdToRemove, setCheckIdToRemove] = createSignal<null | string>(
19-
null
20+
null,
2021
);
2122

2223
const navigateToCheck = (check: EligibilityCheck) => {
@@ -28,7 +29,21 @@ const EligibilityChecksList = () => {
2829
<Show when={initialLoadStatus.loading() || actionInProgress()}>
2930
<Loading />
3031
</Show>
31-
<div class="text-xl font-bold mb-2">Eligibility Checks</div>
32+
<div class="flex flex-row gap-2 items-baseline">
33+
<div class="text-xl font-bold mb-2">Eligibility Checks</div>
34+
<Tooltip>
35+
<p>
36+
If the public checks do not cover a requirement specific to your use
37+
case, BDT allows you to build your own reusable custom eligibility
38+
checks.
39+
</p>
40+
<p>
41+
<a href="https://bdt-docs.web.app/custom-checks/" target="_blank">
42+
Read about custom eligibility checks in the docs
43+
</a>
44+
</p>
45+
</Tooltip>
46+
</div>
3247
<div class="text-md mb-3">
3348
Manage your custom eligibility checks here. Click on a check to view or
3449
edit its details.

‎builder-frontend/src/components/homeScreen/eligibilityCheckList/eligibilityCheckDetail/ParametersConfiguration.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ParameterModal from "./modals/ParameterModal";
44

55
import ConfirmationModal from "@/components/shared/ConfirmationModal";
66
import type { EligibilityCheck, ParameterDefinition } from "@/types";
7+
import Tooltip from "@/components/shared/Tooltip";
78

89
const ParametersConfiguration = ({
910
eligibilityCheck,
@@ -15,7 +16,7 @@ const ParametersConfiguration = ({
1516
addParameter: (parameter: ParameterDefinition) => Promise<void>;
1617
editParameter: (
1718
parameterIndex: number,
18-
parameter: ParameterDefinition
19+
parameter: ParameterDefinition,
1920
) => Promise<void>;
2021
removeParameter: (parameterIndex: number) => Promise<void>;
2122
}) => {
@@ -34,8 +35,24 @@ const ParametersConfiguration = ({
3435

3536
return (
3637
<div class="p-12">
37-
<div class="text-3xl font-bold tracking-wide mb-2">
38-
{eligibilityCheck().name}
38+
<div class="flex flex-row gap-2 items-baseline">
39+
<div class="text-3xl font-bold tracking-wide mb-2">
40+
{eligibilityCheck().name}
41+
</div>
42+
<Tooltip>
43+
<p>
44+
When you open a custom check, you are taken to the Custom Check
45+
Editor.
46+
</p>
47+
<p>
48+
<a
49+
href="https://bdt-docs.web.app/custom-checks/#4-the-custom-check-editor"
50+
target="_blank"
51+
>
52+
Read about the custom check editor in the docs
53+
</a>
54+
</p>
55+
</Tooltip>
3956
</div>
4057
<p class="text-xl mb-4">{eligibilityCheck().description}</p>
4158
<div class="p-2">

‎builder-frontend/src/components/project/Publish.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createSignal } from "solid-js";
22
import { useParams } from "@solidjs/router";
33
import { publishScreener } from "../../api/screener";
4+
import Tooltip from "../shared/Tooltip";
45

56
export default function Publish({ project, refetchProject }) {
67
const [isLoading, setIsLoading] = createSignal(false);
@@ -72,14 +73,30 @@ export default function Publish({ project, refetchProject }) {
7273
</div>
7374
</div>
7475
<div class="mt-4 flex flex-col gap-2">
75-
<button
76-
id="publish-screener-button"
77-
onClick={handlePublish}
78-
class="w-80 bg-gray-800 font-bold text-gray-50 rounded px-4 py-2 hover:bg-gray-700 disabled:opacity-50"
79-
disabled={isLoading()}
80-
>
81-
Publish Screener
82-
</button>
76+
<div class="flex flex-row gap-2 items-center">
77+
<button
78+
id="publish-screener-button"
79+
onClick={handlePublish}
80+
class="w-80 bg-gray-800 font-bold text-gray-50 rounded px-4 py-2 hover:bg-gray-700 disabled:opacity-50"
81+
disabled={isLoading()}
82+
>
83+
Publish Screener
84+
</button>
85+
<Tooltip>
86+
<p>
87+
The Publish tab is where you deploy your screener to a publicly
88+
accessible URL that you can share with end users.
89+
</p>
90+
<p>
91+
<a
92+
href="https://bdt-docs.web.app/user-guide/#7-publishing-your-screener"
93+
target="_blank"
94+
>
95+
Read about publishing your screener in the docs
96+
</a>
97+
</p>
98+
</Tooltip>
99+
</div>
83100
{lastPublishDate() ? (
84101
<div>Publish current working version to your public screener</div>
85102
) : (

‎builder-frontend/src/components/project/manageBenefits/benefitList/BenefitList.tsx‎

Lines changed: 72 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,58 @@ import screenerBenefitResource from "./screenerBenefitsResource";
88
import Loading from "../../../Loading";
99

1010
import type { BenefitDetail } from "@/types";
11+
import Tooltip from "@/components/shared/Tooltip";
1112

12-
const BenefitList = (
13-
{ screenerId, setBenefitIdToConfigure }:
14-
{ screenerId: Accessor<string>; setBenefitIdToConfigure: Setter<null | string> }
15-
) => {
16-
const { screenerBenefits, actions, actionInProgress, initialLoadStatus } = screenerBenefitResource(screenerId);
13+
const BenefitList = ({
14+
screenerId,
15+
setBenefitIdToConfigure,
16+
}: {
17+
screenerId: Accessor<string>;
18+
setBenefitIdToConfigure: Setter<null | string>;
19+
}) => {
20+
const { screenerBenefits, actions, actionInProgress, initialLoadStatus } =
21+
screenerBenefitResource(screenerId);
1722

1823
const [addingNewBenefit, setAddingNewBenefit] = createSignal<boolean>(false);
19-
const [selectExistingBenefitModal, setSelectExistingBenefitModal] = createSignal<boolean>(false);
20-
const [benefitIdToRemove, setBenefitIdToRemove] = createSignal<null | string>(null);
24+
const [selectExistingBenefitModal, setSelectExistingBenefitModal] =
25+
createSignal<boolean>(false);
26+
const [benefitIdToRemove, setBenefitIdToRemove] = createSignal<null | string>(
27+
null,
28+
);
2129

2230
return (
2331
<div class="p-5">
24-
<div id="manage-benefits-title" class="text-3xl font-bold mb-2 tracking-wide">
25-
Manage Benefits
32+
<div class="flex flex-row gap-2 items-baseline">
33+
<div
34+
id="manage-benefits-title"
35+
class="text-3xl font-bold mb-2 tracking-wide"
36+
>
37+
Manage Benefits
38+
</div>
39+
<Tooltip>
40+
<p>
41+
The Manage Benefits tab is where you define the eligibility logic
42+
used by your screener.
43+
</p>
44+
<p>
45+
<a
46+
href="https://bdt-docs.web.app/user-guide/#3-defining-eligibility-logic-manage-benefits"
47+
target="_blank"
48+
>
49+
Read about defining elegibility logic in the docs
50+
</a>
51+
</p>
52+
</Tooltip>
2653
</div>
2754
<div class="text-lg mb-3">
28-
Define and organize the benefits available in your screener.
29-
Each benefit can have associated eligibility checks.
55+
Define and organize the benefits available in your screener. Each
56+
benefit can have associated eligibility checks.
3057
</div>
3158
<div
3259
class="btn-default btn-blue mb-3 mr-1"
33-
onClick={() => {setAddingNewBenefit(true)}}
60+
onClick={() => {
61+
setAddingNewBenefit(true);
62+
}}
3463
>
3564
Create new benefit
3665
</div>
@@ -46,9 +75,14 @@ const BenefitList = (
4675
grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
4776
>
4877
<Show when={initialLoadStatus.loading() || actionInProgress()}>
49-
<Loading/>
78+
<Loading />
5079
</Show>
51-
<Show when={!initialLoadStatus.loading() && (screenerBenefits() === null || screenerBenefits().length === 0)}>
80+
<Show
81+
when={
82+
!initialLoadStatus.loading() &&
83+
(screenerBenefits() === null || screenerBenefits().length === 0)
84+
}
85+
>
5286
<div class="w-full flex text-gray-600 font-bold">
5387
No benefits found. Please add a new benefit.
5488
</div>
@@ -65,41 +99,40 @@ const BenefitList = (
6599
}}
66100
</For>
67101
</div>
68-
{
69-
addingNewBenefit() &&
102+
{addingNewBenefit() && (
70103
<AddNewBenefitModal
71104
closeModal={() => setAddingNewBenefit(false)}
72105
addNewBenefit={actions.addNewBenefit}
73106
/>
74-
}
107+
)}
75108
{/* {
76109
selectExistingBenefitModal() &&
77110
<SelectExistingBenefitModal
78111
closeModal={() => setSelectExistingBenefitModal(false)}
79112
copyPublicBenefit={actions.copyPublicBenefit}
80113
/>
81114
} */}
82-
{
83-
benefitIdToRemove() !== null &&
115+
{benefitIdToRemove() !== null && (
84116
<ConfirmationModal
85117
confirmationTitle="Remove Benefit"
86118
confirmationText="Are you sure you want to remove this benefit? This action cannot be undone."
87-
callback={() => actions.removeBenefit(benefitIdToRemove()) }
88-
closeModal={() => setBenefitIdToRemove(null) }
119+
callback={() => actions.removeBenefit(benefitIdToRemove())}
120+
closeModal={() => setBenefitIdToRemove(null)}
89121
/>
90-
}
122+
)}
91123
</div>
92-
)
124+
);
93125
};
94126

95-
const BenefitCard = (
96-
{ benefit, setBenefitIdToConfigure, setBenefitIdToRemove }:
97-
{
98-
benefit: BenefitDetail,
99-
setBenefitIdToConfigure: Setter<string>,
100-
setBenefitIdToRemove: Setter<string>
101-
}
102-
) => {
127+
const BenefitCard = ({
128+
benefit,
129+
setBenefitIdToConfigure,
130+
setBenefitIdToRemove,
131+
}: {
132+
benefit: BenefitDetail;
133+
setBenefitIdToConfigure: Setter<string>;
134+
setBenefitIdToRemove: Setter<string>;
135+
}) => {
103136
return (
104137
<div class="w-full flex">
105138
<div
@@ -111,9 +144,7 @@ const BenefitCard = (
111144
id={"benefit-card-details-" + benefit.id}
112145
class="p-4 border-bottom border-gray-300 flex-1"
113146
>
114-
<div class="text-2xl mb-2 font-bold">
115-
{benefit.name}
116-
</div>
147+
<div class="text-2xl mb-2 font-bold">{benefit.name}</div>
117148
<div>
118149
<span class="font-bold">Description:</span> {benefit.description}
119150
</div>
@@ -124,20 +155,24 @@ const BenefitCard = (
124155
>
125156
<div
126157
class="btn-default btn-gray"
127-
onClick={() => { setBenefitIdToConfigure(benefit.id); } }
158+
onClick={() => {
159+
setBenefitIdToConfigure(benefit.id);
160+
}}
128161
>
129162
Edit
130163
</div>
131164
<div
132165
class="btn-default btn-red"
133-
onClick={() => { setBenefitIdToRemove(benefit.id); } }
166+
onClick={() => {
167+
setBenefitIdToRemove(benefit.id);
168+
}}
134169
>
135170
Remove
136171
</div>
137172
</div>
138173
</div>
139174
</div>
140175
);
141-
}
176+
};
142177

143178
export default BenefitList;

‎builder-frontend/src/components/project/manageBenefits/configureBenefit/ConfigureBenefit.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { fetchPublicChecks, fetchUserDefinedChecks } from "@/api/check";
99

1010
import type { EligibilityCheckListMode } from "./EligibilityCheckListView";
1111
import type { EligibilityCheck, ParameterValues } from "@/types";
12+
import Tooltip from "@/components/shared/Tooltip";
1213

1314
const ConfigureBenefit = ({
1415
screenerId,
@@ -26,7 +27,7 @@ const ConfigureBenefit = ({
2627
createSignal<EligibilityCheckListMode>("public");
2728
const [publicChecks] = createResource<EligibilityCheck[]>(fetchPublicChecks);
2829
const [userDefinedChecks] = createResource<EligibilityCheck[]>(() =>
29-
fetchUserDefinedChecks(false)
30+
fetchUserDefinedChecks(false),
3031
);
3132

3233
const onRemoveEligibilityCheck = (checkId: string) => {
@@ -42,9 +43,25 @@ const ConfigureBenefit = ({
4243
<Show when={benefit().id !== undefined && !initialLoadStatus.loading()}>
4344
<div class="p-5">
4445
<div class="flex mb-4">
45-
<div class="text-3xl font-bold tracking-wide">
46-
Configure Benefit:{" "}
47-
{benefit() ? benefit().name : "No Benefit Found"}
46+
<div class="flex flex-row gap-2 items-baseline">
47+
<div class="text-3xl font-bold tracking-wide">
48+
Configure Benefit:{" "}
49+
{benefit() ? benefit().name : "No Benefit Found"}
50+
</div>
51+
<Tooltip>
52+
<p>
53+
The Configure Benefit page is where you define the rules that
54+
determine whether a user qualifies for a specific benefit.
55+
</p>
56+
<p>
57+
<a
58+
href="https://bdt-docs.web.app/user-guide/#4-configuring-a-benefit"
59+
target="_blank"
60+
>
61+
Read about configuring a benefit in the docs
62+
</a>
63+
</p>
64+
</Tooltip>
4865
</div>
4966
<div class="ml-auto">
5067
<div
@@ -92,11 +109,11 @@ const ConfigureBenefit = ({
92109
onRemoveEligibilityCheck(checkConfig.checkId)
93110
}
94111
updateCheckConfigParams={(
95-
newCheckData: ParameterValues
112+
newCheckData: ParameterValues,
96113
) => {
97114
actions.updateCheckConfigParams(
98115
checkConfig.checkId,
99-
newCheckData
116+
newCheckData,
100117
);
101118
}}
102119
/>

0 commit comments

Comments
 (0)