diff --git a/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.module.scss b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.module.scss
new file mode 100644
index 000000000000..e0f3aa935a80
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.module.scss
@@ -0,0 +1,36 @@
+@import "src/core/index.module";
+
+.crl-hover-text {
+ font-size: 12px;
+
+ &__dashed-underline {
+ color: inherit;
+ border-bottom-width: 1px;
+ border-bottom-style: dashed;
+ border-bottom-color: inherit;
+ cursor: default;
+ }
+
+ &__link-text {
+ color: inherit;
+ font-size: inherit;
+ }
+}
+
+.bool-setting-icon {
+
+ &__enabled {
+ fill: $colors--success;
+ margin-right: 8px;
+ height: 8px;
+ width: 8px;
+ }
+
+ &__disabled {
+ fill: $colors--disabled;
+ margin-right: 8px;
+ height: 8px;
+ width: 8px;
+ }
+}
+
diff --git a/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
new file mode 100644
index 000000000000..6edf739f617a
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
@@ -0,0 +1,43 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import * as React from "react";
+import { CircleFilled } from "src/icon";
+import { Tooltip } from "antd";
+import classNames from "classnames/bind";
+import styles from "./booleanSetting.module.scss";
+
+const cx = classNames.bind(styles);
+
+export interface BooleanSettingProps {
+ text: string;
+ enabled: boolean;
+ tooltipText: JSX.Element;
+}
+
+export function BooleanSetting(props: BooleanSettingProps) {
+ const { text, enabled, tooltipText } = props;
+ const label = enabled ? "enabled" : "disabled";
+ const boolClass = enabled
+ ? "bool-setting-icon__enabled"
+ : "bool-setting-icon__disabled";
+ return (
+
+
+
+ {text} - {label}
+
+
+ );
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/settings/index.ts b/pkg/ui/workspaces/cluster-ui/src/settings/index.ts
new file mode 100644
index 000000000000..7cbedc8da889
--- /dev/null
+++ b/pkg/ui/workspaces/cluster-ui/src/settings/index.ts
@@ -0,0 +1,11 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+export * from "./booleanSetting";
diff --git a/pkg/ui/workspaces/cluster-ui/src/summaryCard/index.tsx b/pkg/ui/workspaces/cluster-ui/src/summaryCard/index.tsx
index ac396f426944..0ee386e18416 100644
--- a/pkg/ui/workspaces/cluster-ui/src/summaryCard/index.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/summaryCard/index.tsx
@@ -11,6 +11,9 @@
import React from "react";
import classnames from "classnames/bind";
import styles from "./summaryCard.module.scss";
+import booleanSettingStyles from "../settings/booleanSetting.module.scss";
+import { CircleFilled } from "src/icon";
+import { Tooltip } from "antd";
interface ISummaryCardProps {
children: React.ReactNode;
@@ -18,6 +21,7 @@ interface ISummaryCardProps {
}
const cx = classnames.bind(styles);
+const booleanSettingCx = classnames.bind(booleanSettingStyles);
// tslint:disable-next-line: variable-name
export const SummaryCard: React.FC = ({
@@ -31,6 +35,10 @@ interface ISummaryCardItemProps {
className?: string;
}
+interface ISummaryCardItemBoolSettingProps extends ISummaryCardItemProps {
+ toolTipText: JSX.Element;
+}
+
export const SummaryCardItem: React.FC = ({
label,
value,
@@ -41,3 +49,31 @@ export const SummaryCardItem: React.FC = ({
{value}
);
+
+export const SummaryCardItemBoolSetting: React.FC