From 7c3743d2224f23d1edae1f1ee9eef887ecf1fd84 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 18 Aug 2022 17:02:15 +0200
Subject: [PATCH] change(ui): change alert creation page

---
 .../components/Alerts/AlertForm/Condition.tsx |  2 +-
 .../Alerts/AlertForm/NotifyHooks.tsx          | 28 ++++++++++---------
 .../components/Alerts/AlertListItem.tsx       |  2 +-
 .../components/Alerts/AlertsSearch.tsx        |  2 +-
 .../Dashboard/components/Alerts/NewAlert.tsx  | 23 ++++-----------
 5 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
index a83ceb533..f30cfd7d9 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx
@@ -118,7 +118,7 @@ function Condition({
       </div>
       {!isThreshold && (
         <div className="flex items-center my-3">
-          <label className="w-2/6 flex-shrink-0 font-normal">{'compared to previous'}</label>
+          <label className="w-1/6 flex-shrink-0 font-normal">{'compared to previous'}</label>
           <Select
             className="w-2/6"
             placeholder="Select timeframe"
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
index bb8143473..921c7ba9b 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertForm/NotifyHooks.tsx
@@ -49,8 +49,8 @@ function NotifyHooks({
 
       {instance.slack && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Slack'}</label>
-          <div className="w-4/6">
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Slack'}</label>
+          <div className="w-2/6">
             <DropdownChips
               fluid
               selected={instance.slackInput}
@@ -65,8 +65,8 @@ function NotifyHooks({
 
       {instance.email && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
-          <div className="w-4/6">
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
+          <div className="w-2/6">
             <DropdownChips
               textFiled
               validate={validateEmail}
@@ -81,15 +81,17 @@ function NotifyHooks({
 
       {instance.webhook && (
         <div className="flex items-start my-4">
-          <label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
-          <DropdownChips
-            fluid
-            selected={instance.webhookInput}
-            options={hooks}
-            placeholder="Select Webhook"
-            // @ts-ignore
-            onChange={(selected) => edit({ webhookInput: selected })}
-          />
+          <label className="w-1/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
+          <div className="w-2/6">
+            <DropdownChips
+              fluid
+              selected={instance.webhookInput}
+              options={hooks}
+              placeholder="Select Webhook"
+              // @ts-ignore
+              onChange={(selected) => edit({ webhookInput: selected })}
+            />
+          </div>
         </div>
       )}
     </div>
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
index b621921f2..0c87f92a8 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx
@@ -66,7 +66,7 @@ function AlertListItem(props: Props) {
 
   return (
     <div
-      className={cn('border-t px-3', !demo ? 'hover:bg-active-blue cursor-pointer' : '')}
+      className={cn('px-3', !demo ? 'hover:bg-active-blue cursor-pointer border-t' : '')}
       onClick={onItemClick}
     >
       <div className="grid grid-cols-12 py-4 select-none">
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx
index 547d5fc61..44dbfa325 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsSearch.tsx
@@ -29,7 +29,7 @@ function AlertsSearch({ changeSearch }: Props) {
         value={inputValue}
         name="alertsSearch"
         className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
-        placeholder="Filter by title or description"
+        placeholder="Filter by title or type"
         onChange={write}
       />
     </div>
diff --git a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
index 72143cf90..697d6426d 100644
--- a/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx
@@ -82,8 +82,6 @@ const NewAlert = (props: IProps) => {
     list,
   } = props;
 
-  const [expanded, setExpanded] = React.useState(false);
-
   useEffect(() => {
     if (list.size === 0) fetchList();
     props.fetchTriggerOptions();
@@ -187,26 +185,18 @@ const NewAlert = (props: IProps) => {
         id="alert-form"
       >
         <div
-          onClick={() => expanded ? null : setExpanded(!expanded)}
-          className={cn('px-6 py-4 flex justify-between items-center', {
-            'cursor-pointer hover:bg-active-blue hover:shadow-border-blue rounded': !expanded,
-          })}
+          className={cn('px-6 py-4 flex justify-between items-center',
+          )}
         >
           <h1 className="mb-0 text-2xl mr-4 min-w-fit">
-            <WidgetName name={instance.name} onUpdate={(name) => write({ target: { value: name, name: 'name' }} as any)} canEdit={expanded} />
+            <WidgetName name={instance.name} onUpdate={(name) => write({ target: { value: name, name: 'name' }} as any)} canEdit />
           </h1>
           <div
             className="text-gray-600 w-full cursor-pointer"
-            onClick={() => setExpanded(!expanded)}
           >
-            <div className="flex items-center select-none w-fit ml-auto">
-              <span className="mr-2 color-teal">{expanded ? 'Close' : 'Edit'}</span>
-              <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size="16" color="teal" />
-            </div>
           </div>
         </div>
-        {expanded ? (
-          <>
+        
             <div className="px-6 pb-3 flex flex-col">
               <Section
                 index="1"
@@ -266,7 +256,7 @@ const NewAlert = (props: IProps) => {
               />
             </div>
 
-            <div className="flex items-center justify-between p-6 border-t bg-white">
+            <div className="flex items-center justify-between p-6 border-t">
               <BottomButtons 
                 loading={loading}
                 instance={instance}
@@ -274,8 +264,7 @@ const NewAlert = (props: IProps) => {
                 onDelete={onDelete}
               />
             </div>
-          </>
-        ) : null}
+         
       </Form>
 
       <div className="bg-white mt-4 border rounded">