add tags to tests

common/src/enums.ts

@@ -89,3 +89,11 @@ export enum DataSection {
   RESPONSE_HEADER = "resHeaders",
   RESPONSE_BODY = "resBody",
 }
+
+export enum TestTags {
+  BROKEN_OBJECT_LEVEL_AUTHORIZATION = "Broken Object Level Authorization",
+  BROKEN_USER_AUTHENTICATION = "Broken User Authentication",
+  BROKEN_FUNCTION_LEVEL_AUTHORIZATION = "Broken Function Level Authorization",
+  MASS_ASSIGNMENT = "Mass Assignment",
+  SECURITY_MISCONFIGURATION = "Security Misconfiguration",
+}

frontend/src/components/TestEditor/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from "react";
 import { ApiEndpointDetailed } from "@common/types";
+import { TestTags } from "@common/enums";
 import { Request, Test } from "@common/testing/types";
 import {
   Button,
@@ -15,9 +16,9 @@ import { HiPencil } from "@react-icons/all-files/hi/HiPencil";
 import TestEditorHeader from "./header";
 import RequestList from "./requestsList";
 import RequestEditor from "./requestEditor";
-import { makeNewEmptyRequest, sendRequest } from "./requestUtils";
-import { AxiosError } from "axios";
+import { makeNewEmptyRequest } from "./requestUtils";
 import { runTest, saveTest } from "api/tests";
+import { TagList } from "components/utils/TagList";
 
 interface TestEditorProps {
   endpoint: ApiEndpointDetailed;
@@ -191,18 +192,25 @@ const TestEditor: React.FC<TestEditorProps> = React.memo(
         <VStack alignItems="flex-start" px="6" pt="4" w="full">
           <TestEditorHeader endpoint={endpoint} />
           <HStack justifyContent="space-between" w="full" pb="4">
-            <HStack alignItems="center">
-              <HiPencil size="22" />
-              <Editable
-                value={test.name}
-                onChange={(name) => updateTest((e) => ({ ...e, name }))}
-                fontSize="2xl"
-                fontWeight="semibold"
-              >
-                <EditablePreview />
-                <EditableInput />
-              </Editable>
-            </HStack>
+            <VStack alignItems="flex-start" spacing="0">
+              <HStack alignItems="center">
+                <HiPencil size="22" />
+                <Editable
+                  value={test.name}
+                  onChange={(name) => updateTest((e) => ({ ...e, name }))}
+                  fontSize="2xl"
+                  fontWeight="semibold"
+                >
+                  <EditablePreview />
+                  <EditableInput />
+                </Editable>
+              </HStack>
+              <TagList
+                allTags={Object.values(TestTags)}
+                tags={test.tags}
+                updateTags={(tags) => updateTest((e) => ({ ...e, tags }))}
+              />
+            </VStack>
             <HStack>
               <Button
                 colorScheme="blue"

frontend/src/components/utils/TagList.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Select } from "chakra-react-select";
+import { HStack, Tag, Button, Box } from "@chakra-ui/react";
+import { FiPlus } from "@react-icons/all-files/fi/FiPlus";
+import { HiPencil } from "@react-icons/all-files/hi/HiPencil";
+
+interface TagListProps {
+  allTags: string[];
+  tags: string[];
+  updateTags: (e: string[]) => void;
+}
+
+export const TagList: React.FC<TagListProps> = React.memo(
+  ({ allTags, tags, updateTags }) => {
+    const [editing, setEditing] = useState(false);
+    console.log(editing);
+    if (editing) {
+      console.log("hello!");
+      return (
+        <HStack>
+          <Box w="lg">
+            <Select
+              value={tags.map((e) => ({
+                label: e,
+                value: e,
+              }))}
+              isMulti={true}
+              size="sm"
+              options={allTags.map((e) => ({
+                label: e,
+                value: e,
+              }))}
+              placeholder="Select tags..."
+              instanceId="endpoint-test-edit-tag-selector"
+              onChange={(e) => updateTags(e.map((t) => t.label))}
+            />
+          </Box>
+          <Button
+            colorScheme="blue"
+            rounded="sm"
+            size="sm"
+            onClick={() => setEditing(false)}
+          >
+            Save
+          </Button>
+        </HStack>
+      );
+    }
+    return (
+      <HStack>
+        {tags.map((e, i) => (
+          <Tag key={i}>{e}</Tag>
+        ))}
+        <Button
+          variant="link"
+          leftIcon={tags.length > 0 ? <HiPencil /> : <FiPlus />}
+          onClick={() => setEditing(true)}
+          color="gray.500"
+        >
+          {tags.length > 0 ? "Edit" : "Add Tags"}
+        </Button>
+      </HStack>
+    );
+  }
+);