({
)}
{!renderCount &&
!disableCount &&
- (isMultiColumnFilter || displayCount()) ? (
+ (isMultiColumnFilter || displayCount() || show0Count) ? (
({
>
{TableContainerUtils.generateResultsCountText(
resultsTitle,
- displayCount()
+ displayCount(),
+ show0Count
)}
{resultsHtml}
diff --git a/frontend/components/TableContainer/TableContainerUtils.ts b/frontend/components/TableContainer/utilities/TableContainerUtils.ts
similarity index 90%
rename from frontend/components/TableContainer/TableContainerUtils.ts
rename to frontend/components/TableContainer/utilities/TableContainerUtils.ts
index 4f883b678b..e825324eda 100644
--- a/frontend/components/TableContainer/TableContainerUtils.ts
+++ b/frontend/components/TableContainer/utilities/TableContainerUtils.ts
@@ -2,9 +2,10 @@ const DEFAULT_RESULTS_NAME = "results";
const generateResultsCountText = (
name: string = DEFAULT_RESULTS_NAME,
- resultsCount: number
+ resultsCount: number,
+ show0Count = false
): string => {
- if (resultsCount === 0) return `No ${name}`;
+ if (resultsCount === 0 && !show0Count) return `No ${name}`;
// If there is 1 result and the last 3 letters in the result
// name are "ies," we remove the "ies" and add "y"
// to make the name singular
diff --git a/frontend/components/TableContainer/utilities/config_utils.ts b/frontend/components/TableContainer/utilities/config_utils.ts
new file mode 100644
index 0000000000..7acf97737d
--- /dev/null
+++ b/frontend/components/TableContainer/utilities/config_utils.ts
@@ -0,0 +1,50 @@
+// from https://stackoverflow.com/a/68213902/15458245
+
+import { HeaderProps, Row } from "react-table";
+
+interface GetConditionalSelectHeaderCheckboxProps {
+ /** react-table header props */
+ headerProps: React.PropsWithChildren>;
+ checkIfRowIsSelectable: (row: Row) => boolean;
+}
+
+export const getConditionalSelectHeaderCheckboxProps = ({
+ headerProps,
+ checkIfRowIsSelectable,
+}: GetConditionalSelectHeaderCheckboxProps) => {
+ // Define if the checkbox should show as checked or indeterminate
+ const checkIfAllSelectableRowsSelected = (rows: Row[]) =>
+ rows.filter(checkIfRowIsSelectable).every((row) => row.isSelected);
+ const allSelectableRowsSelected = checkIfAllSelectableRowsSelected(
+ headerProps.rows
+ );
+ const indeterminate =
+ !allSelectableRowsSelected &&
+ headerProps.rows.some((row) => row.isSelected);
+
+ const onChange = () => {
+ if (checkIfAllSelectableRowsSelected(headerProps.rows)) {
+ headerProps.rows.forEach((row) => {
+ headerProps.toggleRowSelected(row.id, false);
+ });
+ } else {
+ // Otherwise select every selectable row on the page
+ headerProps.page.forEach((row) => {
+ const rowChecked = checkIfRowIsSelectable(row);
+ headerProps.toggleRowSelected(row.id, rowChecked);
+ });
+ }
+ };
+
+ // Usual checkbox props
+ const checkboxProps = headerProps.getToggleAllRowsSelectedProps();
+
+ return {
+ ...checkboxProps,
+ value: allSelectableRowsSelected,
+ indeterminate,
+ onChange,
+ };
+};
+
+export default { getConditionalSelectHeaderCheckboxProps };
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tsx b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
index 83ddcb43be..721e911a34 100644
--- a/frontend/components/forms/fields/Checkbox/Checkbox.tsx
+++ b/frontend/components/forms/fields/Checkbox/Checkbox.tsx
@@ -22,6 +22,7 @@ export interface ICheckboxProps {
tooltipContent?: React.ReactNode;
isLeftLabel?: boolean;
helpText?: React.ReactNode;
+ smallTick?: boolean;
}
const Checkbox = (props: ICheckboxProps) => {
@@ -39,6 +40,7 @@ const Checkbox = (props: ICheckboxProps) => {
tooltipContent,
isLeftLabel,
helpText,
+ smallTick = false,
} = props;
const handleChange = () => {
@@ -59,6 +61,7 @@ const Checkbox = (props: ICheckboxProps) => {
const checkBoxTickClass = classnames(`${baseClass}__tick`, {
[`${baseClass}__tick--disabled`]: disabled,
[`${baseClass}__tick--indeterminate`]: indeterminate,
+ [`${baseClass}__tick--small`]: smallTick,
});
const checkBoxLabelClass = classnames(checkBoxClass, {
diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss
index 5c7da05188..88892a9fa6 100644
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@@ -60,7 +60,7 @@
&__tick {
@include size(20px);
- @include position(absolute, 0 null null 0);
+ position: absolute;
display: inline-block;
cursor: pointer;
@@ -88,6 +88,14 @@
cursor: default;
}
+ &--small {
+ @include size(16px);
+
+ &::after {
+ @include size(16px);
+ }
+ }
+
&--indeterminate {
&::after {
background-color: $core-vibrant-blue;
diff --git a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/DropdownOptionTooltipWrapper.tsx b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/DropdownOptionTooltipWrapper.tsx
index 8fc4da9dc5..5acdd89f26 100644
--- a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/DropdownOptionTooltipWrapper.tsx
+++ b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/DropdownOptionTooltipWrapper.tsx
@@ -56,7 +56,6 @@ const DropdownOptionTooltipWrapper = ({
clickable={clickable}
offset={offset}
positionStrategy="fixed"
- classNameArrow="tooltip-arrow"
>
{tipContent}
diff --git a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
index c6f03b9cb7..c617631615 100644
--- a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
@@ -17,21 +17,5 @@
text-align: center;
}
- // arrow styles directly from react-tooltip-5 css
- .tooltip-arrow {
- width: 8px;
- height: 8px;
- }
- [class*="react-tooltip__place-top"] > .styles-module_arrow__K0L3T {
- transform: rotate(45deg);
- }
- [class*="react-tooltip__place-right"] > .styles-module_arrow__K0L3T {
- transform: rotate(135deg);
- }
- [class*="react-tooltip__place-bottom"] > .styles-module_arrow__K0L3T {
- transform: rotate(225deg);
- }
- [class*="react-tooltip__place-left"] > .styles-module_arrow__K0L3T {
- transform: rotate(315deg);
- }
+ @include tooltip5-arrow-styles;
}
diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx
index 72969c256b..f05b097599 100644
--- a/frontend/components/forms/fields/InputField/InputField.jsx
+++ b/frontend/components/forms/fields/InputField/InputField.jsx
@@ -120,6 +120,10 @@ class InputField extends Component {
[`${baseClass}__textarea`]: type === "textarea",
});
+ const inputWrapperClasses = classnames(inputWrapperClass, {
+ [`input-field--disabled`]: disabled,
+ });
+
const formFieldProps = pick(this.props, [
"helpText",
"label",
@@ -144,7 +148,7 @@ class InputField extends Component {