Merge branch 'v2' into feat/config-viewer

package.json

@@ -46,6 +46,7 @@
     "react-select": "^5.2.2",
     "react-syntax-highlighter": "^15.4.4",
     "react-table": "^7.7.0",
+    "react-tooltip": "^4.2.21",
     "recharts": "^2.1.6",
     "remark-gfm": "^2.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",

src/App.js

@@ -8,7 +8,7 @@ import { VscGraph, VscJson } from "react-icons/vsc";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { getUser } from "./api/auth";
-import SidebarLayout from "./components/Layout/sidebar";
+import { SidebarLayout } from "./components/Layout";
 import { Loading } from "./components/Loading";
 import { TraceView } from "./components/Traces";
 import { AuthContext } from "./context";

src/api/axios.js

@@ -1,5 +1,7 @@
 import axios from "axios";
 
+import { toastError } from "../components/Toast/toast";
+
 export const IncidentCommander = axios.create({
   baseURL: "/db",
   headers: {
@@ -9,6 +11,15 @@ export const IncidentCommander = axios.create({
   }
 });
 
+
+IncidentCommander.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    toastError(error.response.data.message);
+    return Promise.reject(error);
+  }
+);
+
 export const ConfigDB = axios.create({
   baseURL: "/config/db",
   headers: {

src/api/services/hypothesis.js

@@ -6,7 +6,11 @@ import { IncidentCommander } from "../axios";
 import { resolve } from "../resolve";
 
 export const getAllHypothesisByIncident = async (incidentId) =>
-  resolve(IncidentCommander.get(`/hypothesis?incident_id=eq.${incidentId}`));
+  resolve(
+    IncidentCommander.get(
+      `/hypothesis?incident_id=eq.${incidentId}&order=created_at.asc`
+    )
+  );
 
 export const getHypothesis = async (id) =>
   resolve(IncidentCommander.get(`/hypothesis?id=eq.${id}`));
@@ -21,19 +25,15 @@ export const createHypothesis = async (
     status: hypothesisStatuses[2].value
   }
 ) =>
-  resolve(
-    IncidentCommander.post(`/hypothesis`, {
-      id,
-      created_by: user.id,
-      incident_id: incidentId,
-      ...params
-    })
-  );
+  IncidentCommander.post(`/hypothesis`, {
+    id,
+    created_by: user.id,
+    incident_id: incidentId,
+    ...params
+  });
 
 export const updateHypothesis = async (id, params) => {
-  return resolve(
-    IncidentCommander.patch(`/hypothesis?id=eq.${id}`, { ...params })
-  );
+  IncidentCommander.patch(`/hypothesis?id=eq.${id}`, { ...params });
 };
 
 export const deleteHypothesis = async (id) =>

src/components/Avatar/index.js

@@ -5,14 +5,16 @@ import { BsFillPersonFill } from "react-icons/all";
 import clsx from "clsx";
 
 export const Avatar = ({
+  user,
   size,
-  srcList,
   unload,
   alt,
   containerProps,
-  imageProps,
-  fallbackInitials
+  imageProps
 }) => {
+  const srcList = user?.avatar;
+  const fallbackInitials = user?.name || "?";
+
   const { src, isLoading } = useImage({
     srcList: Array.isArray(srcList) ? srcList : [srcList],
     useSuspense: false
@@ -71,23 +73,18 @@ export const Avatar = ({
 
 Avatar.propTypes = {
   size: PropTypes.string,
-  srcList: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string)
-  ]),
+  user: PropTypes.shape({}),
   unload: PropTypes.node,
   alt: PropTypes.string,
   containerProps: PropTypes.shape({}),
-  imageProps: PropTypes.shape({}),
-  fallbackInitials: PropTypes.string
+  imageProps: PropTypes.shape({})
 };
 
 Avatar.defaultProps = {
   size: "md",
   unload: undefined,
-  srcList: "",
+  user: null,
   alt: "",
   containerProps: {},
   imageProps: {},
-  fallbackInitials: ""
 };

src/components/Canary/data.js

@@ -12,5 +12,5 @@ export function GetName(check) {
   if (isEmpty(title)) {
     title = check.endpoint;
   }
-  return title;
+  return title || "";
 }

src/components/Comment/comment-input.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { Mention, MentionsInput } from "react-mentions";
+import PropTypes from "prop-types";
+import { Icon } from "../Icon";
+
+const mentionsStyle = {
+  control: {
+    fontSize: 14
+  },
+
+  "&multiLine": {
+    control: {
+      minHeight: 80
+    },
+    highlighter: {
+      padding: 9,
+      paddingTop: 11
+    },
+    input: {
+      padding: 9,
+      borderRadius: "0.375rem",
+      borderColor: "rgb(229 231 235)"
+    }
+  },
+
+  suggestions: {
+    list: {
+      backgroundColor: "white",
+      border: "1px solid rgba(0,0,0,0.15)",
+      fontSize: 14
+    },
+    item: {
+      padding: 5,
+      borderBottom: "1px solid rgba(0,0,0,0.15)",
+      "&focused": {
+        backgroundColor: "#cee4e5"
+      }
+    }
+  }
+};
+
+const Suggestion = ({ display, icon }) => (
+  <div className="flex items-center">
+    {icon && <Icon name={icon} size="xl" />}
+    <p className="pl-2">{display}</p>
+  </div>
+);
+
+export const CommentInput = ({ data, value, onChange, markup, trigger }) => (
+  <MentionsInput
+    value={value}
+    onChange={(e) => onChange(e.target.value)}
+    a11ySuggestionsListLabel="Suggested mentions"
+    style={mentionsStyle}
+    allowSpaceInQuery
+    allowSuggestionsAboveCursor
+  >
+    <Mention
+      markup={markup}
+      trigger={trigger}
+      data={data}
+      renderSuggestion={Suggestion}
+      className="bg-blue-200 rounded"
+    />
+  </MentionsInput>
+);
+
+CommentInput.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      display: PropTypes.string,
+      icon: PropTypes.string
+    })
+  ).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  trigger: PropTypes.string,
+  markup: PropTypes.string
+};
+
+CommentInput.defaultProps = {
+  trigger: "@",
+  markup: "@[__display__](user:__id__)"
+};

src/components/Comment/comment-text.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CommentText = ({ text, onClickTag }) => {
+  // markup @[__display__](user:__id__)
+  const tags = text.match(/@\[.*?\]\(user:.*?\)/gi) || [];
+  const otherText = text.split(/@\[.*?\]\(user:.*?\)/gi);
+  return tags.reduce(
+    (display, myTag, index) => {
+      const tagDisplay = myTag.match(/\[.*?\]/gi)[0].slice(1, -1);
+      const tagData = myTag.match(/\(user:.*?\)/gi)[0].slice(6, -1);
+      return [
+        ...display,
+        <button
+          type="button"
+          key={tagData}
+          onClick={() => onClickTag("user", tagData)}
+          className="bg-blue-200 rounded"
+        >
+          {tagDisplay}
+        </button>,
+        otherText[index + 1]
+      ];
+    },
+    [otherText[0]]
+  );
+};
+
+CommentText.propTypes = {
+  text: PropTypes.string.isRequired,
+  onClickTag: PropTypes.func.isRequired
+};

src/components/Comment/index.js

@@ -0,0 +1,4 @@
+import { CommentInput } from "./comment-input";
+import { CommentText } from "./comment-text";
+
+export { CommentInput, CommentText };