fix: Hide single stat optional ticks (#16778)

ui/src/timeMachine/components/view_options/Affixes.tsx

@@ -22,6 +22,7 @@ interface Props {
   tickPrefix: string
   suffix: string
   tickSuffix: string
+  type: string
   onUpdatePrefix: (prefix: string) => void
   onUpdateTickPrefix: (tickPrefix: string) => void
   onUpdateSuffix: (suffix: string) => void
@@ -30,7 +31,7 @@ interface Props {
 
 class Affixes extends PureComponent<Props> {
   public render() {
-    const {prefix, tickPrefix, suffix, tickSuffix} = this.props
+    const {prefix, suffix} = this.props
 
     return (
       <>
@@ -54,44 +55,58 @@ class Affixes extends PureComponent<Props> {
             />
           </Form.Element>
         </Grid.Column>
-        <Grid.Column widthXS={Columns.Six}>
-          <FlexBox
-            alignItems={AlignItems.Center}
-            margin={ComponentSize.Small}
-            className="view-options--checkbox"
-          >
-            <Toggle
-              id="prefixoptional"
-              testID="tickprefix-input"
-              type={InputToggleType.Checkbox}
-              value={tickPrefix}
-              onChange={this.handleUpdateTickPrefix}
-              size={ComponentSize.ExtraSmall}
-            />
-            <InputLabel active={!!tickPrefix}>Optional Prefix</InputLabel>
-          </FlexBox>
-        </Grid.Column>
-        <Grid.Column widthXS={Columns.Six}>
-          <FlexBox
-            alignItems={AlignItems.Center}
-            margin={ComponentSize.Small}
-            className="view-options--checkbox"
-          >
-            <Toggle
-              id="suffixoptional"
-              testID="ticksuffix-input"
-              type={InputToggleType.Checkbox}
-              value={tickSuffix}
-              onChange={this.handleUpdateTickSuffix}
-              size={ComponentSize.ExtraSmall}
-            />
-            <InputLabel active={!!tickSuffix}>Optional Suffix</InputLabel>
-          </FlexBox>
-        </Grid.Column>
+        {this.optionalTicks}
       </>
     )
   }
 
+  private get optionalTicks(): JSX.Element {
+    const {type, tickPrefix, tickSuffix} = this.props
+
+    if (type === 'single-stat') {
+      return null
+    } else {
+      return (
+        <>
+          <Grid.Column widthXS={Columns.Six}>
+            <FlexBox
+              alignItems={AlignItems.Center}
+              margin={ComponentSize.Small}
+              className="view-options--checkbox"
+            >
+              <Toggle
+                id="prefixoptional"
+                testID="tickprefix-input"
+                type={InputToggleType.Checkbox}
+                value={tickPrefix}
+                onChange={this.handleUpdateTickPrefix}
+                size={ComponentSize.ExtraSmall}
+              />
+              <InputLabel active={!!tickPrefix}>Optional Prefix</InputLabel>
+            </FlexBox>
+          </Grid.Column>
+          <Grid.Column widthXS={Columns.Six}>
+            <FlexBox
+              alignItems={AlignItems.Center}
+              margin={ComponentSize.Small}
+              className="view-options--checkbox"
+            >
+              <Toggle
+                id="suffixoptional"
+                testID="ticksuffix-input"
+                type={InputToggleType.Checkbox}
+                value={tickSuffix}
+                onChange={this.handleUpdateTickSuffix}
+                size={ComponentSize.ExtraSmall}
+              />
+              <InputLabel active={!!tickSuffix}>Optional Suffix</InputLabel>
+            </FlexBox>
+          </Grid.Column>
+        </>
+      )
+    }
+  }
+
   private handleUpdatePrefix = (e: ChangeEvent<HTMLInputElement>): void => {
     const {onUpdatePrefix} = this.props
     const prefix = e.target.value

ui/src/timeMachine/components/view_options/GaugeOptions.tsx

@@ -67,6 +67,7 @@ class GaugeOptions extends PureComponent<Props> {
           prefix={prefix}
           tickPrefix={tickPrefix}
           suffix={suffix}
+          type="gauge"
           tickSuffix={tickSuffix}
           onUpdatePrefix={onUpdatePrefix}
           onUpdateTickPrefix={onUpdateTickPrefix}

ui/src/timeMachine/components/view_options/SingleStatOptions.tsx

@@ -76,6 +76,7 @@ const SingleStatOptions: SFC<Props> = props => {
         prefix={prefix}
         tickPrefix={tickPrefix}
         suffix={suffix}
+        type="single-stat"
         tickSuffix={tickSuffix}
         onUpdatePrefix={onSetPrefix}
         onUpdateTickPrefix={onSetTickPrefix}