Add validations for topic name

Author: jreyesr

packages/webviz-core/src/panels/Teleop/index.js

@@ -7,6 +7,7 @@
 //  You may not use this file except in compliance with the License.
 import React, { useState, useReducer } from "react";
 import { hot } from "react-hot-loader/root";
+import styled from "styled-components";
 
 import helpContent from "./index.help.md";
 import { PanelToolbarInput, PanelToolbarLabel } from "webviz-core/shared/panelToolbarStyles";
@@ -35,6 +36,14 @@ type Props = {
   datatypes: RosDatatypes,
 };
 
+const SErrorText = styled.div`
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  color: ${colors.red};
+`;
+
 function Teleop(props: Props) {
   const { config, saveConfig, capabilities } = props;
   const { topicName } = config;
@@ -49,6 +58,10 @@ function Teleop(props: Props) {
     " ": false,
   });
 
+  const isValidTopic = (t) => {
+    return t.startsWith("/") && t.length >= 3;
+  };
+
   const composeTwist = (key) => {
     const COMMANDS = {
       // Map x, y, z, th here
@@ -81,12 +94,12 @@ function Teleop(props: Props) {
   const handleKey = (event) => {
     const newPressing = pressing;
     newPressing[event.key] = event.type === "keydown";
-    if (publisher.current) {
+    if (publisher.current && isValidTopic(topicName)) {
       if (event.type === "keydown") {
         publisher.current.publish(composeTwist(event.key));
       }
     } else {
-      console.error("Publisher not set!");
+      console.error("Publisher not set or topic name invalid");
     }
     setPressing(newPressing);
 
@@ -111,8 +124,28 @@ function Teleop(props: Props) {
 
   const buttonColor = "#00A871";
 
-  const canPublish = capabilities.includes(PlayerCapabilities.advertise) && topicName;
-
+  const canPublish = capabilities.includes(PlayerCapabilities.advertise) && isValidTopic(topicName);
+
+  const renderError = () => {
+    if (topicName.length === 0) {
+      return (
+        <>
+          <SErrorText>Topic name can&apos;t be empty!</SErrorText>
+        </>
+      );
+    } else if (!isValidTopic(topicName)) {
+      return (
+        <>
+          {
+            <SErrorText>
+              Topic name &quot;{topicName}&quot; is invalid (must be at least 2 characters long and start with /)
+            </SErrorText>
+          }
+        </>
+      );
+    }
+    return <></>;
+  };
   const renderMenuContent = () => {
     return (
       <>
@@ -179,6 +212,9 @@ function Teleop(props: Props) {
           Stop
         </Button>
       </Flex>
+      <Flex row style={{ flex: "0 0 auto", justifyContent: "center", paddingTop: "5px", paddingBottom: "5px" }}>
+        {renderError()}
+      </Flex>
     </Flex>
   );
 }

packages/webviz-core/src/panels/Teleop/index.stories.js

@@ -23,8 +23,8 @@ const getFixture = (allowPublish) => {
   };
 };
 
-const publishConfig = () => ({
-  topicName: "/cmd_vel",
+const publishConfig = (topic = "/cmd_vel") => ({
+  topicName: topic,
 });
 
 storiesOf("<Teleop>", module)
@@ -44,6 +44,24 @@ storiesOf("<Teleop>", module)
       </PanelSetup>
     );
   })
+  .add("example with invalid topic name", () => {
+    const allowPublish = true;
+    // Will attempt to use topic name /a, which is too short
+    return (
+      <PanelSetup fixture={getFixture(allowPublish)}>
+        <Teleop config={publishConfig("/a")} />
+      </PanelSetup>
+    );
+  })
+  .add("example with empty topic name", () => {
+    const allowPublish = true;
+    // Will attempt to use the empty topic
+    return (
+      <PanelSetup fixture={getFixture(allowPublish)}>
+        <Teleop config={publishConfig("")} />
+      </PanelSetup>
+    );
+  })
   .add("Example with datatype that no longer exists", () => {
     return (
       <PanelSetup fixture={{ topics: [], datatypes: {}, frame: {}, capabilities: [] }}>