From 9af4219b32815823492a9a4c11ce71f7f6669a8a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Oct 2022 11:24:36 +0200
Subject: [PATCH 1/9] change(ui) - network url copy text

---
 .../components/shared/CopyText/CopyText.tsx   | 33 +++++++++++++++++++
 .../app/components/shared/CopyText/index.ts   |  1 +
 .../FetchDetailsModal/FetchDetailsModal.js    | 17 +++++++---
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 frontend/app/components/shared/CopyText/CopyText.tsx
 create mode 100644 frontend/app/components/shared/CopyText/index.ts

diff --git a/frontend/app/components/shared/CopyText/CopyText.tsx b/frontend/app/components/shared/CopyText/CopyText.tsx
new file mode 100644
index 000000000..6d505b58b
--- /dev/null
+++ b/frontend/app/components/shared/CopyText/CopyText.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Tooltip } from 'react-tippy';
+import copy from 'copy-to-clipboard';
+
+interface Props {
+  label?: string;
+  afterLabel?: string;
+  children: any;
+  content: string;
+}
+function CopyText(props: Props) {
+  const { children, label = 'Click to copy', afterLabel = 'Copied', content = '' } = props;
+  const [isCopied, setIsCopied] = useState(false);
+  const onClick = () => {
+    copy(content);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 5000);
+  };
+  return (
+    // @ts-ignore
+    <Tooltip
+      delay={0}
+      arrow
+      animation="fade"
+      hideOnClick={false}
+      title={isCopied ? afterLabel : label}
+    >
+      <span onClick={onClick}>{children}</span>
+    </Tooltip>
+  );
+}
+
+export default CopyText;
diff --git a/frontend/app/components/shared/CopyText/index.ts b/frontend/app/components/shared/CopyText/index.ts
new file mode 100644
index 000000000..3444d5f22
--- /dev/null
+++ b/frontend/app/components/shared/CopyText/index.ts
@@ -0,0 +1 @@
+export { default } from './CopyText';
diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
index 43c9203af..1f7b21a1d 100644
--- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
+++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
@@ -6,6 +6,7 @@ import Headers from './components/Headers';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { TYPES } from 'Types/session/resource';
 import { formatBytes } from 'App/utils';
+import CopyText from 'Shared/CopyText';
 
 const HEADERS = 'HEADERS';
 const REQUEST = 'REQUEST';
@@ -147,8 +148,8 @@ export default class FetchDetailsModal extends React.PureComponent {
         <h5 className="mb-2 text-2xl">Network Request</h5>
         <div className="flex items-center py-1">
           <div className="font-medium">Name</div>
-          <div className="rounded-lg bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip">
-            {resource.name}
+          <div className="rounded-lg bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip cursor-pointer">
+            <CopyText content={resource.url}>{resource.name}</CopyText>
           </div>
         </div>
 
@@ -207,14 +208,22 @@ export default class FetchDetailsModal extends React.PureComponent {
             <ul className="list-disc ml-5">
               <li>
                 Integrate{' '}
-                <a href="https://docs.openreplay.com/plugins/fetch" className="link" target="_blank">
+                <a
+                  href="https://docs.openreplay.com/plugins/fetch"
+                  className="link"
+                  target="_blank"
+                >
                   Fetch plugin
                 </a>{' '}
                 to capture fetch payloads.
               </li>
               <li>
                 Find a detailed{' '}
-                <a href="https://www.youtube.com/watch?v=YFCKstPZzZg" className="link" target="_blank">
+                <a
+                  href="https://www.youtube.com/watch?v=YFCKstPZzZg"
+                  className="link"
+                  target="_blank"
+                >
                   video tutorial
                 </a>{' '}
                 to understand practical example of how to use fetch plugin.

From deb20f4e3427acab7dcc0647d067a6a6341b8541 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 28 Oct 2022 12:33:00 +0200
Subject: [PATCH 2/9] fix(ui): fix screen state

---
 .../MessageDistributor/StatedScreen/Screen/BaseScreen.ts       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
index 08a36c610..d86284851 100644
--- a/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
+++ b/frontend/app/player/MessageDistributor/StatedScreen/Screen/BaseScreen.ts
@@ -79,7 +79,8 @@ export default abstract class BaseScreen {
 
   attach(parentElement: HTMLElement) {
     if (this.parentElement) {
-      throw new Error("BaseScreen: Trying to attach an attached screen.");
+      this.parentElement = undefined
+      console.error("BaseScreen: Trying to attach an attached screen.");
     }
 
     parentElement.appendChild(this.screen);

From c68bbf68b4becf588cdd6e9ee2f8419ad8d3f958 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Oct 2022 15:27:02 +0200
Subject: [PATCH 3/9] change(ui) - removed logs and comment

---
 frontend/app/components/Session_/GraphQL/GraphQL.js         | 6 ------
 .../SessionListContainer/components/Notes/NoteItem.tsx      | 5 +----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/app/components/Session_/GraphQL/GraphQL.js b/frontend/app/components/Session_/GraphQL/GraphQL.js
index a5420584f..8c601dba1 100644
--- a/frontend/app/components/Session_/GraphQL/GraphQL.js
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.js
@@ -81,12 +81,6 @@ export default class GraphQL extends React.PureComponent {
     const { list } = nextProps;
     if (nextProps.time) {
       const filtered = GraphQL.filterList(list, prevState.filter);
-      console.log({
-        list,
-        filtered,
-        time: nextProps.time,
-      });
-
       let i = 0;
       filtered.forEach((item, index) => {
         if (item.time <= nextProps.time) {
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index 17efa2747..33108c0fe 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -42,10 +42,7 @@ function NoteItem(props: Props) {
   const safeStrMessage =
     props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message;
   return (
-    <div
-      className="flex items-center p-2 border-b"
-      // style={{ background: '#FFFEF5' }}
-    >
+    <div className="flex items-center p-2 border-b">
       <Link
         style={{ width: '90%' }}
         to={

From 397f7defc509e31371f151797d35f6f90845b64d Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Fri, 28 Oct 2022 15:38:57 +0200
Subject: [PATCH 4/9] fix(ui): fix circullar diff, fix couple warnings

---
 .../Player/Controls/components/CreateNote.tsx |  2 +-
 .../components/Session_/Storage/DiffRow.tsx   | 19 +++++++++++++++++--
 .../app/components/ui/Checkbox/Checkbox.tsx   |  2 +-
 frontend/app/components/ui/SVG.tsx            |  6 +++---
 frontend/app/components/ui/Toggler/Toggler.js |  2 +-
 frontend/app/player/store/store.js            |  3 ++-
 frontend/scripts/icons.ts                     |  7 ++++---
 7 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index af95e5eea..2fe7075f1 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -162,7 +162,7 @@ function CreateNote({
         <h3 className="text-xl ml-2 mr-4 font-semibold">Add Note</h3>
         <div className="flex items-center cursor-pointer" onClick={() => setUseTs(!useTimestamp)}>
           <Checkbox checked={useTimestamp} />
-          <span className="ml-1">{`at ${duration}`}</span>
+          <span className="ml-1"> {`at ${duration}`} </span>
         </div>
 
         <div className="ml-auto cursor-pointer" onClick={closeTooltip}>
diff --git a/frontend/app/components/Session_/Storage/DiffRow.tsx b/frontend/app/components/Session_/Storage/DiffRow.tsx
index 4dbd39345..f34be1b40 100644
--- a/frontend/app/components/Session_/Storage/DiffRow.tsx
+++ b/frontend/app/components/Session_/Storage/DiffRow.tsx
@@ -7,10 +7,25 @@ interface Props {
   diff: Record<string, any>;
 }
 
+const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  // @ts-ignore
+  return (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
 function DiffRow({ diff, path }: Props) {
   const [shorten, setShorten] = React.useState(true);
-  const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs);
-  const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs);
+
+  const oldValue = diff.item ? JSON.stringify(diff.item.lhs, getCircularReplacer()) : JSON.stringify(diff.lhs, getCircularReplacer());
+  const newValue = diff.item ? JSON.stringify(diff.item.rhs, getCircularReplacer()) : JSON.stringify(diff.rhs, getCircularReplacer());
 
   const pathStr = path.length > 15 && shorten ? path.slice(0, 5) + '...' + path.slice(10) : path;
   return (
diff --git a/frontend/app/components/ui/Checkbox/Checkbox.tsx b/frontend/app/components/ui/Checkbox/Checkbox.tsx
index ec401557c..e4c91d726 100644
--- a/frontend/app/components/ui/Checkbox/Checkbox.tsx
+++ b/frontend/app/components/ui/Checkbox/Checkbox.tsx
@@ -10,7 +10,7 @@ export default (props: Props) => {
     const { className = '', label = '', ...rest } = props;
     return (
         <label className={cn('flex items-center cursor-pointer', className)}>
-            <input type="checkbox" {...rest} />
+            <input type="checkbox"  onChange={() => null} {...rest} />
             {label && <span className="ml-2 select-none mb-0">{label}</span>}
         </label>
     );
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 09cf18796..1d3387c8f 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -133,7 +133,7 @@ const SVG = (props: Props) => {
     case 'copy': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m433.941 65.941-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"/></svg>;
     case 'credit-card-front': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z"/><path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z"/></svg>;
     case 'cubes': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/><path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>;
-    case 'dashboard-icn': return <svg viewBox="0 0 276 241" width={ `${ width }px` } height={ `${ height }px` } ><g filter="url(#a)"><rect x="6" y="4" width="264" height="229" rx="6" fill="#fff"/></g><g opacity=".7"><rect x="141" y="14" width="119" height="101" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="141.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".3"><rect x="16" y="14" width="119" height="101" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="16.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".46"><rect x="16" y="122" width="244" height="99" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="16.5" y="122.5" width="243" height="98" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><rect opacity=".2" x="149" y="85" width="15" height="20" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="178" y="54" width="15" height="51" rx="2" fill="#3EAAAF"/><rect opacity=".6" x="207" y="62" width="15" height="43" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="236" y="45" width="15" height="60" rx="2" fill="#3EAAAF"/><path opacity=".6" d="M109 62a32.997 32.997 0 0 1-56.334 23.335l9.16-9.162A20.044 20.044 0 0 0 96.045 62H109Z" fill="#3EAAAF"/><path opacity=".2" d="M51.09 83.645a33.002 33.002 0 0 1-6.892-30.457l12.582 3.486a19.945 19.945 0 0 0 4.165 18.408l-9.855 8.563Z" fill="#3EAAAF"/><path opacity=".4" d="M44.652 51.688a33 33 0 0 1 64.32 8.95l-12.948.535a20.04 20.04 0 0 0-39.061-5.435l-12.31-4.05Z" fill="#3EAAAF"/><path d="M150.176 79.433a1 1 0 0 0 1.648 1.134l-1.648-1.134ZM247 29l-11.457 1.437 6.972 9.204L247 29Zm-35.954 23.046-.552.834.552-.834Zm5.777-.185-.604-.797.604.797Zm-36.606-14.317-.823-.567.823.567Zm6.877-1.336-.551.834.551-.834Zm-35.27 44.359 29.217-42.457-1.647-1.133-29.218 42.456 1.648 1.134Zm34.719-43.525 23.951 15.838 1.103-1.668-23.951-15.839-1.103 1.669Zm30.884 15.616 23.003-17.426-1.208-1.594-23.003 17.426 1.208 1.594Zm-6.933.222a6 6 0 0 0 6.933-.222l-1.208-1.594a4 4 0 0 1-4.622.148l-1.103 1.668Zm-29.453-14.77a4 4 0 0 1 5.502-1.068l1.103-1.669a6 6 0 0 0-8.252 1.604l1.647 1.133Z" fill="#3EAAAF"/><rect opacity=".2" x="60" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".3" x="72" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".6" x="84" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><path clipRule="evenodd" d="M17 187.928c0-1.01 1.326-1.383 1.853-.522l1.777 2.906c3.63 5.938 11.092 17.813 18.352 19 7.26 1.188 14.721-8.312 21.981-20.187C68.425 177.25 75.685 163 82.945 163c7.462 0 14.722 14.25 21.982 21.375 7.461 7.125 14.721 7.125 21.981 2.375 7.462-4.75 14.722-14.25 22.184-14.25 7.26 0 14.52 9.5 21.981 16.625 7.26 7.125 14.52 11.875 21.982 8.313 7.26-3.563 14.52-15.438 21.982-14.25 7.26 1.187 14.721 15.437 21.981 16.624 7.26 1.188 14.722-10.687 18.352-16.624l1.777-2.907c.527-.861 1.853-.488 1.853.522V217a3 3 0 0 1-3 3H20a3 3 0 0 1-3-3v-29.072Z" fill="url(#b)"/><path d="M258 180.5c-7 11-17.882 29.121-29 14-12.5-17-21.333-11.5-24.5-8-16.5 21.5-30.5 10.5-43-6-10-13.2-19.833-7.833-23.5-3.5-22.5 28-35.5 3.5-48.5-11.5C79 154 67 179 59 194c-8 13.5-21 29.5-41-6.5" stroke="#3EAAAF" stroke-width="2" stroke-linecap="round"/><circle cx="42" cy="206" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="117" cy="187" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="212" cy="183" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><defs><linearGradient id="b" x1="138" y1="163" x2="138.49" y2="224" gradientUnits="userSpaceOnUse"><stop stop-color="#86C6C9"/><stop offset="1" stop-color="#F6F6F6"/></linearGradient><filter id="a" x="0" y="0" width="276" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="3"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_59_3139"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_59_3139" result="shape"/></filter></defs></svg>;
+    case 'dashboard-icn': return <svg viewBox="0 0 276 241" width={ `${ width }px` } height={ `${ height }px` } ><g filter="url(#a)"><rect x="6" y="4" width="264" height="229" rx="6" fill="#fff"/></g><g opacity=".7"><rect x="141" y="14" width="119" height="101" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="141.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".3"><rect x="16" y="14" width="119" height="101" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="16.5" y="14.5" width="118" height="100" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><g opacity=".46"><rect x="16" y="122" width="244" height="99" rx="4.244" fill="#000" fill-opacity=".08"/><rect x="16.5" y="122.5" width="243" height="98" rx="3.744" stroke="#000" stroke-opacity=".12"/></g><rect opacity=".2" x="149" y="85" width="15" height="20" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="178" y="54" width="15" height="51" rx="2" fill="#3EAAAF"/><rect opacity=".6" x="207" y="62" width="15" height="43" rx="2" fill="#3EAAAF"/><rect opacity=".4" x="236" y="45" width="15" height="60" rx="2" fill="#3EAAAF"/><path opacity=".6" d="M109 62a32.997 32.997 0 0 1-56.334 23.335l9.16-9.162A20.044 20.044 0 0 0 96.045 62H109Z" fill="#3EAAAF"/><path opacity=".2" d="M51.09 83.645a33.002 33.002 0 0 1-6.892-30.457l12.582 3.486a19.945 19.945 0 0 0 4.165 18.408l-9.855 8.563Z" fill="#3EAAAF"/><path opacity=".4" d="M44.652 51.688a33 33 0 0 1 64.32 8.95l-12.948.535a20.04 20.04 0 0 0-39.061-5.435l-12.31-4.05Z" fill="#3EAAAF"/><path d="M150.176 79.433a1 1 0 0 0 1.648 1.134l-1.648-1.134ZM247 29l-11.457 1.437 6.972 9.204L247 29Zm-35.954 23.046-.552.834.552-.834Zm5.777-.185-.604-.797.604.797Zm-36.606-14.317-.823-.567.823.567Zm6.877-1.336-.551.834.551-.834Zm-35.27 44.359 29.217-42.457-1.647-1.133-29.218 42.456 1.648 1.134Zm34.719-43.525 23.951 15.838 1.103-1.668-23.951-15.839-1.103 1.669Zm30.884 15.616 23.003-17.426-1.208-1.594-23.003 17.426 1.208 1.594Zm-6.933.222a6 6 0 0 0 6.933-.222l-1.208-1.594a4 4 0 0 1-4.622.148l-1.103 1.668Zm-29.453-14.77a4 4 0 0 1 5.502-1.068l1.103-1.669a6 6 0 0 0-8.252 1.604l1.647 1.133Z" fill="#3EAAAF"/><rect opacity=".2" x="60" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".3" x="72" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><rect opacity=".6" x="84" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/><path clipRule="evenodd" d="M17 187.928c0-1.01 1.326-1.383 1.853-.522l1.777 2.906c3.63 5.938 11.092 17.813 18.352 19 7.26 1.188 14.721-8.312 21.981-20.187C68.425 177.25 75.685 163 82.945 163c7.462 0 14.722 14.25 21.982 21.375 7.461 7.125 14.721 7.125 21.981 2.375 7.462-4.75 14.722-14.25 22.184-14.25 7.26 0 14.52 9.5 21.981 16.625 7.26 7.125 14.52 11.875 21.982 8.313 7.26-3.563 14.52-15.438 21.982-14.25 7.26 1.187 14.721 15.437 21.981 16.624 7.26 1.188 14.722-10.687 18.352-16.624l1.777-2.907c.527-.861 1.853-.488 1.853.522V217a3 3 0 0 1-3 3H20a3 3 0 0 1-3-3v-29.072Z" fill="url(#b)"/><path d="M258 180.5c-7 11-17.882 29.121-29 14-12.5-17-21.333-11.5-24.5-8-16.5 21.5-30.5 10.5-43-6-10-13.2-19.833-7.833-23.5-3.5-22.5 28-35.5 3.5-48.5-11.5C79 154 67 179 59 194c-8 13.5-21 29.5-41-6.5" stroke="#3EAAAF" stroke-width="2" stroke-linecap="round"/><circle cx="42" cy="206" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="117" cy="187" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><circle cx="212" cy="183" r="7" fill="#fff" stroke="#3EAAAF" stroke-width="2"/><defs><linearGradient id="b" x1="138" y1="163" x2="138.49" y2="224" gradientUnits="userSpaceOnUse"><stop stopColor="#86C6C9"/><stop offset="1" stopColor="#F6F6F6"/></linearGradient><filter id="a" x="0" y="0" width="276" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="3"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_59_3139"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_59_3139" result="shape"/></filter></defs></svg>;
     case 'desktop': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/></svg>;
     case 'device': return <svg viewBox="0 0 1000 1000"  width={ `${ width }px` } height={ `${ height }px` } ><path d="M702.5 826.7H598V722.1h107.8v-68.6H78.6V157h816.7v277.7h55.5c3.3 0 9.8 0 13.1 3.3V134.1c0-26.1-19.6-45.7-45.7-45.7H55.7C29.6 88.4 10 108 10 134.1v542.3c0 26.1 19.6 45.7 45.7 45.7h323.4v104.5H255c-22.9 0-42.5 19.6-42.5 42.5s19.6 42.5 42.5 42.5h460.6c-6.5-9.8-9.8-19.6-9.8-29.4v-55.5h-3.3z"/><path d="M960.6 457.5H767.9c-16.3 0-29.4 13.1-29.4 29.4v392c0 16.3 13.1 29.4 29.4 29.4h192.7c16.3 0 29.4-13.1 29.4-29.4v-392c0-13-13.1-29.4-29.4-29.4zm-98 434.5c-6.5 0-13.1-6.5-13.1-13.1s6.5-13.1 13.1-13.1c6.5 0 13.1 6.5 13.1 13.1s-6.6 13.1-13.1 13.1zm107.8-42.5H754.8V522.9h215.6v326.6z"/></svg>;
     case 'diagram-3': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/></svg>;
@@ -266,8 +266,8 @@ const SVG = (props: Props) => {
     case 'integrations/elasticsearch': return <svg viewBox="0 0 256 256" preserveAspectRatio="xMinYMin meet" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="m100.085 110.364 57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="m40.536 71.918 39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="m175.724 165.317 43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>;
     case 'integrations/github': return <svg viewBox="0 0 496 512" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>;
     case 'integrations/graphql': return <svg viewBox="0 0 120 120" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><rect fill="#fff" height="120" rx="6.01" width="120"/><path d="m66.84 29.17 16.44 9.5a7 7 0 0 1 1.62-1.28A7.13 7.13 0 1 1 92 49.74a7 7 0 0 1-1.9.76v19a7.13 7.13 0 1 1-5.25 13.11 6.85 6.85 0 0 1-1.76-1.43l-16.32 9.44a7.26 7.26 0 0 1 .36 2.25 7.13 7.13 0 1 1-14-2l-16.42-9.51a7 7 0 0 1-1.59 1.25 7.13 7.13 0 1 1-5.25-13.11v-19a7 7 0 0 1-1.9-.76 7.13 7.13 0 1 1 7.13-12.35 7 7 0 0 1 1.61 1.27l16.45-9.5a7.22 7.22 0 0 1-.29-2 7.13 7.13 0 1 1 14.26 0 7.24 7.24 0 0 1-.29 2.01zm-1.72 2.92 16.49 9.52a7.12 7.12 0 0 0 5.13 8.87v19l-.27.07-21.54-37.27zm-10.05.2-21.53 37.3-.28-.08v-19a7.06 7.06 0 0 0 4.45-3.35 7.15 7.15 0 0 0 .68-5.53l16.48-9.51a1.89 1.89 0 0 1 .2.17zM62 34l21.52 37.27a7.09 7.09 0 0 0-1.25 1.6 6.84 6.84 0 0 0-.75 1.88h-43a6.84 6.84 0 0 0-.75-1.88 7.26 7.26 0 0 0-1.25-1.59L58 34a7.21 7.21 0 0 0 4 0zm3.28 54.09 16.38-9.46c0-.16-.09-.31-.13-.47h-43c0 .09 0 .19-.08.28l16.46 9.5a7.14 7.14 0 0 1 10.41.15z" fill="#e535ab"/></svg>;
-    case 'integrations/jira-text': return <svg viewBox="0 0 254.6 150" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient id="a" x1="55.29" y1="50.91" x2="40.58" y2="66.08" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#0052cc"/><stop offset="1" stop-color="#2684ff"/></linearGradient><linearGradient id="b" x1="39.15" y1="68.24" x2="22.14" y2="84.79" xlinkHref="#a"/></defs><path d="M109.87 42.62h7.92v40.22c0 10.64-4.66 18-15.57 18a28.19 28.19 0 0 1-9.51-1.5v-7.7a22.4 22.4 0 0 0 8.19 1.49c6.69 0 9-4 9-9.77ZM132.23 39.54a4.94 4.94 0 0 1 5.27 5.28 5.28 5.28 0 1 1-10.55 0 4.94 4.94 0 0 1 5.28-5.28Zm-3.88 16.9h7.57v44h-7.57ZM154.75 100.44h-7.39v-44h7.39v7.74c2.55-5.19 6.95-8.89 15.58-8.36v7.39c-9.68-1-15.58 1.94-15.58 11.27ZM205.79 92.52c-2.81 5.8-8.09 8.8-14.87 8.8-11.7 0-17.6-9.95-17.6-22.88 0-12.41 6.16-22.88 18.48-22.88 6.42 0 11.35 2.9 14 8.62v-7.74h7.57v44h-7.57Zm-12.85 1.76c6.78 0 12.85-4.32 12.85-14.08v-3.52c0-9.77-5.54-14.08-12-14.08-8.53 0-12.93 5.63-12.93 15.84.03 10.56 4.25 15.84 12.08 15.84Z"/><path d="M70.14 33.62H35.56a15.61 15.61 0 0 0 15.61 15.61h6.36v6.15A15.6 15.6 0 0 0 73.14 71V36.62a3 3 0 0 0-3-3Z"/><path d="M53 50.85H18.44a15.61 15.61 0 0 0 15.61 15.61h6.37v6.14A15.61 15.61 0 0 0 56 88.21V53.85a3 3 0 0 0-3-3Z"/><path d="M35.91 68.08H1.33a15.6 15.6 0 0 0 15.6 15.61h6.37v6.14a15.61 15.61 0 0 0 15.61 15.61V71.08a3 3 0 0 0-3-3Z"/></svg>;
-    case 'integrations/jira': return <svg viewBox="0 0 74 76" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient x1="67.68%" y1="40.328%" x2="40.821%" y2="81.66%" id="a"><stop stop-color="#777" offset="18%"/><stop stop-color="#999" offset="100%"/></linearGradient><linearGradient x1="32.656%" y1="59.166%" x2="59.343%" y2="17.99%" id="b"><stop stop-color="#777" offset="18%"/><stop stop-color="#999" offset="100%"/></linearGradient></defs><g fill="none"><path d="M72.4 35.76 39.8 3.16 36.64 0 12.1 24.54.88 35.76a3 3 0 0 0 0 4.24L23.3 62.42l13.34 13.34 24.54-24.54.38-.38L72.4 40a3 3 0 0 0 0-4.24ZM36.64 49.08l-11.2-11.2 11.2-11.2 11.2 11.2-11.2 11.2Z" fill="#999"/><path d="M36.64 26.68c-7.333-7.334-7.369-19.212-.08-26.59l-24.51 24.5 13.34 13.34 11.25-11.25Z" fill="url(#a)"/><path d="M47.87 37.85 36.64 49.08a18.86 18.86 0 0 1 0 26.68l24.57-24.57-13.34-13.34Z" fill="url(#b)"/></g></svg>;
+    case 'integrations/jira-text': return <svg viewBox="0 0 254.6 150" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient id="a" x1="55.29" y1="50.91" x2="40.58" y2="66.08" gradientUnits="userSpaceOnUse"><stop offset=".18" stopColor="#0052cc"/><stop offset="1" stopColor="#2684ff"/></linearGradient><linearGradient id="b" x1="39.15" y1="68.24" x2="22.14" y2="84.79" xlinkHref="#a"/></defs><path d="M109.87 42.62h7.92v40.22c0 10.64-4.66 18-15.57 18a28.19 28.19 0 0 1-9.51-1.5v-7.7a22.4 22.4 0 0 0 8.19 1.49c6.69 0 9-4 9-9.77ZM132.23 39.54a4.94 4.94 0 0 1 5.27 5.28 5.28 5.28 0 1 1-10.55 0 4.94 4.94 0 0 1 5.28-5.28Zm-3.88 16.9h7.57v44h-7.57ZM154.75 100.44h-7.39v-44h7.39v7.74c2.55-5.19 6.95-8.89 15.58-8.36v7.39c-9.68-1-15.58 1.94-15.58 11.27ZM205.79 92.52c-2.81 5.8-8.09 8.8-14.87 8.8-11.7 0-17.6-9.95-17.6-22.88 0-12.41 6.16-22.88 18.48-22.88 6.42 0 11.35 2.9 14 8.62v-7.74h7.57v44h-7.57Zm-12.85 1.76c6.78 0 12.85-4.32 12.85-14.08v-3.52c0-9.77-5.54-14.08-12-14.08-8.53 0-12.93 5.63-12.93 15.84.03 10.56 4.25 15.84 12.08 15.84Z"/><path d="M70.14 33.62H35.56a15.61 15.61 0 0 0 15.61 15.61h6.36v6.15A15.6 15.6 0 0 0 73.14 71V36.62a3 3 0 0 0-3-3Z"/><path d="M53 50.85H18.44a15.61 15.61 0 0 0 15.61 15.61h6.37v6.14A15.61 15.61 0 0 0 56 88.21V53.85a3 3 0 0 0-3-3Z"/><path d="M35.91 68.08H1.33a15.6 15.6 0 0 0 15.6 15.61h6.37v6.14a15.61 15.61 0 0 0 15.61 15.61V71.08a3 3 0 0 0-3-3Z"/></svg>;
+    case 'integrations/jira': return <svg viewBox="0 0 74 76" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><defs><linearGradient x1="67.68%" y1="40.328%" x2="40.821%" y2="81.66%" id="a"><stop stopColor="#777" offset="18%"/><stop stopColor="#999" offset="100%"/></linearGradient><linearGradient x1="32.656%" y1="59.166%" x2="59.343%" y2="17.99%" id="b"><stop stopColor="#777" offset="18%"/><stop stopColor="#999" offset="100%"/></linearGradient></defs><g fill="none"><path d="M72.4 35.76 39.8 3.16 36.64 0 12.1 24.54.88 35.76a3 3 0 0 0 0 4.24L23.3 62.42l13.34 13.34 24.54-24.54.38-.38L72.4 40a3 3 0 0 0 0-4.24ZM36.64 49.08l-11.2-11.2 11.2-11.2 11.2 11.2-11.2 11.2Z" fill="#999"/><path d="M36.64 26.68c-7.333-7.334-7.369-19.212-.08-26.59l-24.51 24.5 13.34 13.34 11.25-11.25Z" fill="url(#a)"/><path d="M47.87 37.85 36.64 49.08a18.86 18.86 0 0 1 0 26.68l24.57-24.57-13.34-13.34Z" fill="url(#b)"/></g></svg>;
     case 'integrations/mobx': return <svg viewBox="0 0 256 256" preserveAspectRatio="xMidYMid" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="M256 236.394V19.607c0-8.894-5.923-16.4-14.037-18.8l-9.215 5.514-102.265 109.037-3.206 10.021-1.873 9.62 31.89 119.18 4.933 1.82h74.167c10.828 0 19.606-8.777 19.606-19.605" fill="#EA6618"/><path d="M0 19.606v216.787c0 6.705 3.367 12.62 8.5 16.155l6.287-3.01 108.246-115.894 4.244-8.265.159-7.99L97.976 5.306 93.513 0H19.606C8.778 0 0 8.778 0 19.606" fill="#d65813"/><path d="M127.277 125.38 241.963.806a19.595 19.595 0 0 0-5.57-.807H93.515l33.763 125.38z" fill="#e05e11"/><path d="M19.606 256h142.622l-34.951-130.621L8.499 252.549A19.511 19.511 0 0 0 19.606 256" fill="#de5c16"/><path d="M94.918 97.03h14.225c5.668 21.386 12.119 40.152 19.316 57.085 8.152-19.05 14.127-37.83 19.185-57.086h13.442c-6.02 23.926-15.868 48.04-27.132 72.93h-11.89c-10.82-23.586-20.03-47.837-27.146-72.93zm-46.92-37.055h31.63v135.637h-31.77v-10.456H67.33V70.152H47.998V59.975zm160.169 10.177h-19.332v115.004h19.47v10.456h-31.769V59.975h31.63v10.177z" fill="#FFF"/></svg>;
     case 'integrations/newrelic-text': return <svg viewBox="0 0 737.94 132.03" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><path d="m257.96 103.98-20.19-42.32c-4.82-10-9.77-21.36-11.46-26.7l-.39.39c.65 7.55.78 17.06.91 25l.52 43.63h-14.71V13.86h16.93l21.88 44a164.12 164.12 0 0 1 9.25 23.18l.39-.39c-.39-4.56-1.3-17.45-1.3-25.66l-.26-41.15h14.2v90.12ZM300.54 74.94v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.73a35.6 35.6 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.28 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.63-27.61c-8.07 0-12.5 6.38-12.5 17.06h24.35c0-10.66-4.68-17.06-11.85-17.06ZM416.1 104.24h-13.46l-8.07-30.34c-2.08-7.81-4.3-18-4.3-18h-.26s-1 6.51-4.3 18.62l-7.94 29.69h-13.42l-18-65.25 14.2-2 7.16 31.91c1.82 8.2 3.39 17.32 3.39 17.32h.39a178.91 178.91 0 0 1 3.78-17.71l8.47-30.47h14.07l7.43 29.72c2.74 10.68 4.17 18.75 4.17 18.75h.39s1.56-10 3.26-17.71l6.77-30.74h14.85ZM518.15 103.98l-7.81-13.94c-6.24-11.06-10.42-17.31-15.37-22.31a7.64 7.64 0 0 0-5.87-2.69v38.94h-14.71V13.86h27.48c20.19 0 29.3 11.72 29.3 25.79 0 12.89-8.33 24.75-22.4 24.75 3.26 1.69 9.25 10.42 13.93 18l13.28 21.62Zm-20.84-78h-8.21V54.5h7.68c7.81 0 12-1 14.72-3.78 2.47-2.47 4-6.25 4-10.94.05-9.12-4.9-13.81-18.19-13.81ZM555.65 74.94v1c0 9.12 3.39 18.75 16.28 18.75 6.12 0 11.46-2.21 16.41-6.51l5.6 8.73a35.6 35.6 0 0 1-23.7 8.73c-18.62 0-30.34-13.41-30.34-34.51 0-11.59 2.47-19.28 8.21-25.79 5.34-6.12 11.85-8.86 20.19-8.86a25.45 25.45 0 0 1 18.1 6.77c5.73 5.21 8.6 13.28 8.6 28.65v3Zm12.64-27.61c-8.07 0-12.5 6.38-12.5 17.06h24.31c0-10.66-4.65-17.06-11.81-17.06ZM621.81 105.42c-14.46 0-14.46-13-14.46-18.62V30.66a106.73 106.73 0 0 0-1.25-19.27l14.72-3.26c1 4 1.17 9.51 1.17 18.1V82.1c0 8.86.39 10.29 1.43 11.85a4 4 0 0 0 4.69 1l2.34 8.86a22.44 22.44 0 0 1-8.64 1.61ZM646.68 28.32a9.34 9.34 0 0 1-9.25-9.51 9.44 9.44 0 1 1 9.25 9.51Zm-7.16 75.67V39.13l14.46-2.61v67.46ZM695 105.68c-18 0-28-12.63-28-33.86 0-24 14.33-35.42 29-35.42 7.16 0 12.37 1.69 18.23 7.16l-7.13 9.5c-3.91-3.52-7.29-5.08-11.07-5.08a11.2 11.2 0 0 0-10.42 6.64c-2 4-2.73 10.16-2.73 18.36 0 9 1.43 14.72 4.43 18a11.58 11.58 0 0 0 8.73 3.78c4.56 0 9-2.21 13.28-6.51l6.77 8.73c-5.99 5.96-12.24 8.7-21.09 8.7ZM728.31 105.43a9.67 9.67 0 1 1 9.62-9.67 9.63 9.63 0 0 1-9.62 9.67Zm0-17.42a7.78 7.78 0 1 0 7.44 7.75 7.55 7.55 0 0 0-7.44-7.76Zm1.9 13.11c-.42-.73-.6-1-1-1.8-1.07-1.95-1.4-2.5-1.79-2.65a.74.74 0 0 0-.34-.08v4.53h-2.13V90.27h4a3 3 0 0 1 3.2 3.17 2.78 2.78 0 0 1-2.42 3 2.49 2.49 0 0 1 .44.47c.62.78 2.6 4.21 2.6 4.21Zm-1.11-8.95a4.35 4.35 0 0 0-1.22-.16h-.78v2.94h.73c.94 0 1.35-.11 1.64-.37a1.53 1.53 0 0 0 .42-1.09 1.28 1.28 0 0 0-.79-1.32Z"/><path d="M168.72 55.82C161.07 20.67 118.92 0 74.56 9.64S.45 55.6 8.09 90.74s49.8 55.83 94.15 46.18 74.12-45.92 66.48-81.1Zm-80.31 49.86a32.4 32.4 0 1 1 32.4-32.4 32.4 32.4 0 0 1-32.4 32.4Z" transform="translate(-6.9 -7.27)"/><path d="M95.57 27.92a46.52 46.52 0 1 0 46.53 46.52 46.52 46.52 0 0 0-46.53-46.52Zm-7.17 73.66a28.3 28.3 0 1 1 28.3-28.3 28.3 28.3 0 0 1-28.29 28.3Z" transform="translate(-6.9 -7.27)"/></svg>;
     case 'integrations/newrelic': return <svg fill="none" width={ `${ width }px` } height={ `${ height }px` } fill={ `${ fill }` }><g clipPath="url(#a)"><path d="M57.048 28.04v24.921l-21.73 12.463V81L70.64 60.752V20.25l-13.592 7.79Z" fill="#00AC69"/><path d="m35.322 15.581 21.73 12.458 13.591-7.79L35.321 0 0 20.248l13.587 7.791 21.735-12.458Z" fill="#1CE783"/><path d="M21.735 48.294v24.92L35.322 81V40.503L0 20.25v15.58l21.735 12.464Z" fill="#000" fill-opacity=".87"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h70.874v81H0z"/></clipPath></defs></svg>;
diff --git a/frontend/app/components/ui/Toggler/Toggler.js b/frontend/app/components/ui/Toggler/Toggler.js
index 7aa670743..2fcb31f0d 100644
--- a/frontend/app/components/ui/Toggler/Toggler.js
+++ b/frontend/app/components/ui/Toggler/Toggler.js
@@ -5,7 +5,7 @@ export default ({ onChange, name, className = '', checked, label = '', plain = f
     <div className={className}>
         <label className={styles.label}>
             <div className={plain ? styles.switchPlain : styles.switch}>
-                <input type={styles.checkbox} onClick={onChange} name={name} checked={checked} />
+                <input type={styles.checkbox} onClick={onChange} name={name} defaultChecked={checked} />
                 <span className={`${plain ? styles.sliderPlain : styles.slider} ${checked ? styles.checked : ''}`} />
             </div>
             {label && <span>{label}</span>}
diff --git a/frontend/app/player/store/store.js b/frontend/app/player/store/store.js
index e8faf9909..4917043a2 100644
--- a/frontend/app/player/store/store.js
+++ b/frontend/app/player/store/store.js
@@ -9,7 +9,8 @@ const store = createStore(reducer);
 export const getState = store.getState.bind(store);
 
 export function update(...args) {
-	return store.dispatch(updateAction(...args));
+	const action = updateAction(...args)
+	return store.dispatch(action);
 }
 
 export function clean() {
diff --git a/frontend/scripts/icons.ts b/frontend/scripts/icons.ts
index 4ad35692d..49df92703 100644
--- a/frontend/scripts/icons.ts
+++ b/frontend/scripts/icons.ts
@@ -25,7 +25,7 @@ const basePlugins = {
         'removeStyleElement',
     ]
 }
-const plugins = (removeFill = true) => { 
+const plugins = (removeFill = true) => {
     return {
         plugins: [
             {
@@ -51,7 +51,7 @@ const plugins = (removeFill = true) => {
                 }
             },
             { name: 'removeXMLNS' },
-            // { name: 'replaceDashes', params: { 
+            // { name: 'replaceDashes', params: {
             //     type: 'perItem',
             //     fn: (item) => {
             //         item.eachAttr(attr => {
@@ -59,7 +59,7 @@ const plugins = (removeFill = true) => {
             //         })
             //     }
             //  } },
-    
+
         ]
     }
  }
@@ -90,6 +90,7 @@ ${icons.map(icon => {
     .replace(/xmlns\:xlink/g, 'xmlnsXlink')
     .replace(/clip-path/g, 'clipPath')
     .replace(/clip-rule/g, 'clipRule')
+    .replace(/stop-color/g, 'stopColor')
     .replace(/xml:space="preserve"/g, '')};`
 }).join('\n')}
 default:

From 8b3c9495264c0b5be6ca6d304973ff9f59bddc46 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Oct 2022 16:32:57 +0200
Subject: [PATCH 5/9] fix(ui) - create issue mising projectId and added a
 loader

---
 .../components/Session_/Issues/IssueForm.js   | 183 ++++++++++--------
 frontend/app/duck/assignments.js              |   2 +-
 2 files changed, 99 insertions(+), 86 deletions(-)

diff --git a/frontend/app/components/Session_/Issues/IssueForm.js b/frontend/app/components/Session_/Issues/IssueForm.js
index b263739f3..757f5d206 100644
--- a/frontend/app/components/Session_/Issues/IssueForm.js
+++ b/frontend/app/components/Session_/Issues/IssueForm.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Form, Input, Button, CircularLoader } from 'UI';
+import { Form, Input, Button, CircularLoader, Loader } from 'UI';
 //import {  } from 'Duck/issues';
 import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assignments';
 import Select from 'Shared/Select';
@@ -57,8 +57,16 @@ class IssueForm extends React.PureComponent {
   writeOption = ({ name, value }) => this.props.edit({ [name]: value.value });
 
   render() {
-    const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } =
-      this.props;
+    const {
+      creating,
+      projects,
+      users,
+      issueTypes,
+      instance,
+      closeHandler,
+      metaLoading,
+      projectsLoading,
+    } = this.props;
     const projectOptions = projects.map(({ name, id }) => ({ label: name, value: id })).toArray();
     const userOptions = users.map(({ name, id }) => ({ label: name, value: id })).toArray();
 
@@ -68,93 +76,97 @@ class IssueForm extends React.PureComponent {
 
     const selectedIssueType = issueTypes.filter((issue) => issue.id == instance.issueType)[0];
 
+    console.log('instance', instance);
+
     return (
-      <Form onSubmit={this.onSubmit} className="text-left">
-        <Form.Field className="mb-15-imp">
-          <label htmlFor="issueType">
-            <span className="mr-2">Project</span>
-            <CircularLoader loading={metaLoading} />
-          </label>
-          <Select
-            name="projectId"
-            options={projectOptions}
-            // value={ instance.projectId }
-            fluid
-            onChange={this.writeOption}
-            placeholder="Project"
-          />
-        </Form.Field>
-        <Form.Field className="mb-15-imp">
-          <label htmlFor="issueType">Issue Type</label>
-          <Select
-            selection
-            name="issueType"
-            labeled
-            options={issueTypeOptions}
-            // value={ instance.issueType }
-            fluid
-            onChange={this.writeOption}
-            placeholder="Select issue type"
-            text={
-              selectedIssueType ? (
-                <SelectedValue icon={selectedIssueType.iconUrl} text={selectedIssueType.name} />
-              ) : (
-                ''
-              )
-            }
-          />
-        </Form.Field>
+      <Loader loading={projectsLoading} size={40}>
+        <Form onSubmit={this.onSubmit} className="text-left">
+          <Form.Field className="mb-15-imp">
+            <label htmlFor="issueType" className="flex items-center">
+              <span className="mr-2">Project</span>
+              <CircularLoader loading={metaLoading} />
+            </label>
+            <Select
+              name="projectId"
+              options={projectOptions}
+              // value={instance.projectId}
+              fluid
+              onChange={this.writeOption}
+              placeholder="Project"
+            />
+          </Form.Field>
+          <Form.Field className="mb-15-imp">
+            <label htmlFor="issueType">Issue Type</label>
+            <Select
+              selection
+              name="issueType"
+              labeled
+              options={issueTypeOptions}
+              value={instance.issueType}
+              fluid
+              onChange={this.writeOption}
+              placeholder="Select issue type"
+              text={
+                selectedIssueType ? (
+                  <SelectedValue icon={selectedIssueType.iconUrl} text={selectedIssueType.name} />
+                ) : (
+                  ''
+                )
+              }
+            />
+          </Form.Field>
 
-        <Form.Field className="mb-15-imp">
-          <label htmlFor="assignee">Assignee</label>
-          <Select
-            selection
-            name="assignee"
-            options={userOptions}
-            // value={ instance.assignee }
-            fluid
-            onChange={this.writeOption}
-            placeholder="Select a user"
-          />
-        </Form.Field>
+          <Form.Field className="mb-15-imp">
+            <label htmlFor="assignee">Assignee</label>
+            <Select
+              selection
+              name="assignee"
+              options={userOptions}
+              // value={ instance.assignee }
+              fluid
+              onChange={this.writeOption}
+              placeholder="Select a user"
+            />
+          </Form.Field>
 
-        <Form.Field className="mb-15-imp">
-          <label htmlFor="title">Summary</label>
-          <Input
-            name="title"
-            value={instance.title}
-            placeholder="Issue Title / Summary"
-            onChange={this.write}
-          />
-        </Form.Field>
+          <Form.Field className="mb-15-imp">
+            <label htmlFor="title">Summary</label>
+            <Input
+              name="title"
+              value={instance.title}
+              placeholder="Issue Title / Summary"
+              onChange={this.write}
+            />
+          </Form.Field>
 
-        <Form.Field className="mb-15-imp">
-          <label htmlFor="description">
-            Description
-            {/* <span className="text-sm text-gray-500">(Optional)</span> */}
-          </label>
-          <textarea
-            name="description"
-            rows="2"
-            value={instance.description}
-            placeholder="E.g. Found this issue at 3:29secs"
-            onChange={this.write}
-          />
-        </Form.Field>
+          <Form.Field className="mb-15-imp">
+            <label htmlFor="description">
+              Description
+              {/* <span className="text-sm text-gray-500">(Optional)</span> */}
+            </label>
+            <textarea
+              name="description"
+              rows="2"
+              value={instance.description}
+              placeholder="E.g. Found this issue at 3:29secs"
+              onChange={this.write}
+            />
+          </Form.Field>
 
-        <Button
-          loading={creating}
-          variant="primary"
-          disabled={!instance.validate()}
-          className="float-left mr-2"
-          type="submit"
-        >
-          {'Create'}
-        </Button>
-        <Button type="button" onClick={closeHandler}>
-          {'Cancel'}
-        </Button>
-      </Form>
+          <Button
+            loading={creating}
+            variant="primary"
+            disabled={!instance.validate()}
+            className="float-left mr-2"
+            type="submit"
+          >
+            {'Create'}
+          </Button>
+          <Button type="button" onClick={closeHandler}>
+            {'Cancel'}
+          </Button>
+        </Form>
+      </Loader>
     );
   }
 }
@@ -163,6 +175,7 @@ export default connect(
   (state) => ({
     creating: state.getIn(['assignments', 'addActivity', 'loading']),
     projects: state.getIn(['assignments', 'projects']),
+    projectsLoading: state.getIn(['assignments', 'fetchProjects', 'loading']),
     users: state.getIn(['assignments', 'users']),
     instance: state.getIn(['assignments', 'instance']),
     metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
diff --git a/frontend/app/duck/assignments.js b/frontend/app/duck/assignments.js
index 896484899..3bf69b260 100644
--- a/frontend/app/duck/assignments.js
+++ b/frontend/app/duck/assignments.js
@@ -111,7 +111,7 @@ export function addActivity(sessionId, params) {
   const data = { ...params, assignee: params.assignee.value, issueType: params.issueType.value }
   return {
     types: ADD_ACTIVITY.toArray(),
-    call: client => client.post(`/sessions/${ sessionId }/assign/projects/${params.projectId.value}`, data),
+    call: client => client.post(`/sessions/${ sessionId }/assign/projects/${params.projectId}`, data),
   }
 }
 

From f3a17099f5e340ece426ce7bc457c9dc5473cd71 Mon Sep 17 00:00:00 2001
From: Alexander Zavorotynskiy <zavorotynskiy@pm.me>
Date: Fri, 28 Oct 2022 17:39:57 +0200
Subject: [PATCH 6/9] fix(backend): fixed permission on creating new folder for
 store sessions mob files

---
 backend/internal/sink/oswriter/oswriter.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/internal/sink/oswriter/oswriter.go b/backend/internal/sink/oswriter/oswriter.go
index 0719f6124..83567c4a9 100644
--- a/backend/internal/sink/oswriter/oswriter.go
+++ b/backend/internal/sink/oswriter/oswriter.go
@@ -46,7 +46,7 @@ func (w *Writer) open(fname string) (*os.File, error) {
 	// mkdir if not exist
 	pathTo := w.dir + filepath.Dir(fname)
 	if _, err := os.Stat(pathTo); os.IsNotExist(err) {
-		os.MkdirAll(pathTo, 0644)
+		os.MkdirAll(pathTo, 0755)
 	}
 
 	file, err := os.OpenFile(w.dir+fname, os.O_WRONLY|os.O_CREATE|os.O_APPEND, 0644)

From be5f73f49027b44f0cd6937a20edfc68442f90b4 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 28 Oct 2022 18:04:13 +0200
Subject: [PATCH 7/9] fix(ui) - settings menu padding

---
 frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
index 1b4fa446d..a4ce1f26c 100644
--- a/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
+++ b/frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx
@@ -30,7 +30,7 @@ function SettingsMenu(props: RouteComponentProps<Props>) {
   };
   return (
     <div
-      style={{ width: '150px', marginTop: '50px' }}
+      style={{ width: '150px', marginTop: '49px' }}
       className={cn(className, 'absolute right-0 top-0 bg-white border p-2')}
     >
       {isAdmin && (

From 38322aea13c3f7184505d8ca6c17341b6488e326 Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Fri, 28 Oct 2022 22:06:18 +0200
Subject: [PATCH 8/9] chore(build): sourcemap-reader name fix

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 sourcemap-reader/build.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sourcemap-reader/build.sh b/sourcemap-reader/build.sh
index 74efa0433..65b6bd4f1 100644
--- a/sourcemap-reader/build.sh
+++ b/sourcemap-reader/build.sh
@@ -8,7 +8,7 @@
 # Usage: IMAGE_TAG=latest DOCKER_REPO=myDockerHubID bash build.sh <ee>
 set -e
 
-image_name="sourcemap-reader"
+image_name="sourcemaps-reader"
 
 git_sha1=${IMAGE_TAG:-$(git rev-parse HEAD)}
 envarg="default-foss"

From 2ec73b47c522ab8d11d3d321cc04300fe5dddb60 Mon Sep 17 00:00:00 2001
From: rjshrjndrn <rjshrjndrn@gmail.com>
Date: Fri, 28 Oct 2022 22:30:51 +0200
Subject: [PATCH 9/9] chore(helm): fix migration script path

Signed-off-by: rjshrjndrn <rjshrjndrn@gmail.com>
---
 scripts/helmcharts/openreplay/files/dbops.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/helmcharts/openreplay/files/dbops.sh b/scripts/helmcharts/openreplay/files/dbops.sh
index fd238471e..21ace9d2c 100644
--- a/scripts/helmcharts/openreplay/files/dbops.sh
+++ b/scripts/helmcharts/openreplay/files/dbops.sh
@@ -32,7 +32,7 @@ function migration() {
     fi
 
     # Checking migration versions
-    cd /opt/openreplay/openreplay/scripts/helm
+    cd /opt/openreplay/openreplay/scripts/schema
     migration_versions=(`ls -l db/init_dbs/$db | grep -E ^d | awk -v number=${PREVIOUS_APP_VERSION} '$NF > number {print $NF}' | grep -v create`)
     echo "Migration version: ${migration_versions[*]}"
     # Can't pass the space seperated array to ansible for migration. So joining them with ,