Disable segment create button for invalid segment key

flipt-io · May 22, 2020 · 3205d63 · 3205d63
1 parent 1a5d2bf
commit 3205d63
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/ui/__tests__/e2e/createSegment.test.js b/ui/__tests__/e2e/createSegment.test.js
@@ -1,4 +1,5 @@
 const qawolf = require("qawolf");
+const expect = require("expect-playwright");
 
 let browser;
 let page;
@@ -25,3 +26,13 @@ test("createSegment", async () => {
   await page.type("[placeholder='Segment description']", "Users that are willing to try out advanced functionality");
   await page.click("[data-testid='create-segment']");
 });
+
+test('createSegmentDisallowSpecialChars', async () => {
+  await page.goto("localhost:8080");
+  await page.click("[data-testid='segments']");
+  await page.click("[data-testid='new-segment']");
+  await page.type("[placeholder='Segment name']", "My segment with colons");
+  await page.type("[placeholder='Segment key']", "colons:are:not:allowed");
+  await page.type("[placeholder='Segment description']", "This should not be saved");
+  await expect(page).toHaveText("Only letters, numbers, hypens and underscores allowed");
+});
diff --git a/ui/src/components/Segments/NewSegment.vue b/ui/src/components/Segments/NewSegment.vue
@@ -85,6 +85,7 @@ export default {
   mixins: [notify, autoKeys, utils],
   data() {
     return {
+      isValid: false,
       segment: {
         matchType: "ALL_MATCH_TYPE"
       }
@@ -93,7 +94,9 @@ export default {
   computed: {
     canCreateSegment() {
       return (
-        this.isPresent(this.segment.name) && this.isPresent(this.segment.key)
+        this.isPresent(this.segment.name) &&
+        this.isPresent(this.segment.key) &&
+        this.isValid
       );
     },
     matchTypeText() {
@@ -107,6 +110,7 @@ export default {
   methods: {
     formatKey() {
       this.segment.key = this.formatStringAsKey(this.segment.key);
+      this.isValid = this.segment.key.match("^[-_,A-Za-z0-9]+$");
     },
     setKeyIfSameAsName() {
       // Remove the character that was just added before comparing