fix(ui): updated duplicate check error message (#17404)

CHANGELOG.md

@@ -14,6 +14,7 @@
 1. [17363](https://github.com/influxdata/influxdb/pull/17363): Fixed telegraf configuration bugs where system buckets were appearing in the buckets dropdown
 1. [17391](https://github.com/influxdata/influxdb/pull/17391): Fixed threshold check bug where checks could not be created when a field had a space in the name
 1. [17384](https://github.com/influxdata/influxdb/pull/17384): Reuse slices built by iterator to reduce allocations
+1. [17404](https://github.com/influxdata/influxdb/pull/17404): Updated duplicate check error message to be more explicit and actionable
 
 ### UI Improvements
 

ui/src/checks/actions/thunks.ts

@@ -152,6 +152,13 @@ export const createCheckFromTimeMachine = () => async (
     const check = builderToPostCheck(state)
     const resp = await api.postCheck({data: check})
     if (resp.status !== 201) {
+      if (resp.data.code.includes('conflict')) {
+        throw new Error(
+          `A check named ${
+            check.name
+          } already exists. Please rename the check before saving`
+        )
+      }
       throw new Error(resp.data.message)
     }
 

ui/src/dataLoaders/components/verifyStep/TelegrafInstructions.tsx

@@ -22,6 +22,7 @@ class TelegrafInstructions extends PureComponent<Props> {
     const configScript = `telegraf --config ${
       this.origin
     }/api/v2/telegrafs/${configID || ''}`
+    const exportToken = `export INFLUX_TOKEN=${token || '<INFLUX_TOKEN>'}`
     return (
       <div data-testid="setup-instructions" className="telegraf-instructions">
         <h6>1. Install the Latest Telegraf</h6>
@@ -49,7 +50,7 @@ class TelegrafInstructions extends PureComponent<Props> {
             able to see it again!
           </Alert>
         )}
-        <TokenCodeSnippet token={token} configID={configID} label="CLI" />
+        <TokenCodeSnippet token={exportToken} configID={configID} label="CLI" />
         <h6>3. Start Telegraf</h6>
         <p>
           Finally, you can run the following command to start the Telegraf agent

ui/src/shared/components/TokenCodeSnippet.tsx

@@ -51,9 +51,7 @@ const TokenCodeSnippet: FC<Props & DispatchProps> = ({
         className="code-snippet--scroll"
       >
         <div className="code-snippet--text">
-          <pre>
+          <pre>{token}</pre>
-            export INFLUX_TOKEN=<i>{token || '<INFLUX_TOKEN>'}</i>
-          </pre>
         </div>
       </FancyScrollbar>
       <div className="code-snippet--footer">