From 33e88ebf09b6fe7416c9dc0bfb2353484604cf57 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 29 May 2024 15:22:39 +0200
Subject: [PATCH] fix ui: fix sharing options slack/msteams selector

---
 .../Player/Controls/components/CreateNote.tsx | 55 ++++++++++++++-----
 .../IntegrateSlackButton.js                   |  2 +-
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index 597e45a10..024bf388c 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -1,17 +1,23 @@
-import React from 'react';
-import { Icon, Button, Checkbox } from 'UI';
+import { Tag } from 'antd';
+import { List } from 'immutable';
 import { Duration } from 'luxon';
+import React from 'react';
 import { connect } from 'react-redux';
-import { WriteNote, tagProps, TAGS, iTag, Note } from 'App/services/NotesService';
-import { addNote, updateNote } from 'Duck/sessions';
-import { useStore } from 'App/mstore';
 import { toast } from 'react-toastify';
+
+
+
+import { useStore } from 'App/mstore';
+import { Note, TAGS, WriteNote, iTag, tagProps } from 'App/services/NotesService';
 import { fetchList as fetchSlack } from 'Duck/integrations/slack';
 import { fetchList as fetchTeams } from 'Duck/integrations/teams';
-import { Tag } from 'antd';
+import { addNote, updateNote } from 'Duck/sessions';
+import { Button, Checkbox, Icon } from 'UI';
+
+
 
 import Select from 'Shared/Select';
-import { List } from 'immutable';
+
 
 interface Props {
   time: number;
@@ -152,17 +158,36 @@ function CreateNote({
     }))
     .toJS() as unknown as { value: string; label: string }[];
 
+  slackChannelsOptions.unshift({
   // @ts-ignore
-  slackChannelsOptions.unshift({ value: null, label: 'Pick a channel' });
+    value: null,
+    // @ts-ignore
+    label: <div className={'text-disabled-text'}>Pick a channel</div>,
+    disabled: true
+  });
+  teamsChannelsOptions.unshift({
   // @ts-ignore
-  teamsChannelsOptions.unshift({ value: null, label: 'Pick a channel' });
+    value: null,
+    // @ts-ignore
+    label: <div className={'text-disabled-text'}>Pick a channel</div>,
+    disabled: true,
+  });
 
-  const changeSlackChannel = ({ value }: { value: Record<string, string>; name: string }) => {
-    setSlackChannel(value.value);
+  const changeSlackChannel = ({
+    value,
+  }: {
+    value: Record<string, string>;
+    name: string;
+  }) => {
+    if (value) {
+      setSlackChannel(value.value);
+    }
   };
 
   const changeTeamsChannel = ({ value }: { value: Record<string, string>; name: string }) => {
-    setTeamsChannel(value.value);
+    if (value) {
+      setTeamsChannel(value.value);
+    }
   };
 
   return (
@@ -224,7 +249,7 @@ function CreateNote({
         <Checkbox checked={isPublic} />
         <div>Visible to team members</div>
       </div>
-      {slackChannelsOptions.length > 0 ? (
+      {slackChannelsOptions.length > 1 ? (
         <div className="flex flex-col">
           <div className="flex items-center cursor-pointer" onClick={() => setSlack(!useSlack)}>
             <Checkbox checked={useSlack} />
@@ -239,13 +264,14 @@ function CreateNote({
                 defaultValue
                 // @ts-ignore
                 onChange={changeSlackChannel}
+                value={slackChannel}
               />
             </div>
           )}
         </div>
       ) : null}
 
-      {teamsChannelsOptions.length > 0 ? (
+      {teamsChannelsOptions.length > 1 ? (
         <div className="flex flex-col">
           <div className="flex items-center cursor-pointer" onClick={() => setTeams(!useTeams)}>
             <Checkbox checked={useTeams} />
@@ -260,6 +286,7 @@ function CreateNote({
                 defaultValue
                 // @ts-ignore
                 onChange={changeTeamsChannel}
+                value={teamsChannel}
               />
             </div>
           )}
diff --git a/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
index 7d1b0946e..d506d3ccc 100644
--- a/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
+++ b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
@@ -17,7 +17,7 @@ function IntegrateSlackTeamsButton({ history, tenantId }) {
         variant="text-primary"
       >
         <Icon name="integrations/slack" size={16} />
-        <Icon name="integrations/teams" size={24} className="mr-2" />
+        <Icon name="integrations/teams" size={24} className="mr-2 ml-1" />
 
         <span>Integrate Slack or MS Teams</span>
       </Button>