From 176ceee245d93d3071f6888330b55fea5e5898b6 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 7 Sep 2022 15:16:00 +0200
Subject: [PATCH] feat(ui): redesign errors modal

---
 .../components/Errors/Error/MainSection.js    | 78 +++----------------
 frontend/app/components/Errors/ui/Label.js    |  8 +-
 2 files changed, 16 insertions(+), 70 deletions(-)

diff --git a/frontend/app/components/Errors/Error/MainSection.js b/frontend/app/components/Errors/Error/MainSection.js
index 35b1fef7e..96dcb8b41 100644
--- a/frontend/app/components/Errors/Error/MainSection.js
+++ b/frontend/app/components/Errors/Error/MainSection.js
@@ -74,87 +74,33 @@ export default class MainSection extends React.PureComponent {
                         message={error.stack0InfoString}
                         lineThrough={error.status === RESOLVED}
                     />
-                    <div className="flex justify-between items-center">
-                        <div className="flex items-center color-gray-dark" style={{ wordBreak: 'break-all' }}>
+                    <div className="flex flex-col">
+                        <div className="flex items-center color-gray-dark font-semibold" style={{ wordBreak: 'break-all' }}>
                             {error.message}
                         </div>
-                        <div className="text-center">
+                        <div className="flex items-center mt-2">
                             <div className="flex">
-                                <Label topValue={error.sessions} topValueSize="text-lg" bottomValue="Sessions" />
-                                <Label topValue={error.users} topValueSize="text-lg" bottomValue="Users" />
+                                <Label topValue={error.sessions} horizontal topValueSize="text-lg" bottomValue="Sessions" />
+                                <Label topValue={error.users} horizontal topValueSize="text-lg" bottomValue="Users" />
                             </div>
                             <div className="text-xs color-gray-medium">Over the past 30 days</div>
                         </div>
                     </div>
                 </div>
 
-                {/* <Divider />
-				<div className="flex m-4">
-					{ error.status === UNRESOLVED 
-						? <IconButton
-								outline
-								className="mr-3"
-								label="Resolve"
-								size="small"
-								icon="check" 
-								loading={ resolveToggleLoading }
-								onClick={ this.resolve }
-							/>
-						: <IconButton
-								outline
-								className="mr-3"
-								label="Unresolve"
-								size="small"
-								icon="exclamation-circle" 
-								loading={ resolveToggleLoading }
-								onClick={ this.unresolve }
-							/>
-					}	
-					{ error.status !== IGNORED &&
-						<IconButton
-							outline
-							className="mr-3"
-							label="Ignore"
-							size="small"
-							icon="ban" 
-							loading={ ignoreLoading }
-							onClick={ this.ignore }
-						/>
-					}	
-					<IconButton						
-						primaryText
-						label="Bookmark"
-						size="small"
-						compact
-						icon={ error.favorite ? "star-solid" : "star" } 
-						loading={ toggleFavoriteLoading }
-						onClick={ this.bookmark }
-					/>
-					<SharePopup
-						entity="errors"
-						id={ error.errorId }
-						trigger={
-							<IconButton
-							primaryText
-							label="Share"
-							size="small"
-							icon="share-alt"
-							/>
-						}
-					/>
-				</div> */}
                 <Divider />
-                {!isPlayer && (
-                    <div className="m-4">
+                <div className="m-4">
+                    <div className="flex items-center">
                         <h3 className="text-xl inline-block mr-2">Last session with this error</h3>
                         <span className="font-thin text-sm">{resentOrDate(error.lastOccurrence)}</span>
-                        <SessionBar className="my-4" session={error.lastHydratedSession} />
-                        <Button variant="text-primary" onClick={this.findSessions}>
+                        <Button className="ml-auto" variant="text-primary" onClick={this.findSessions}>
                             Find all sessions with this error
                             <Icon className="ml-1" name="next1" color="teal" />
-                        </Button>    
+                        </Button>
                     </div>
-                )}
+                    <SessionBar className="my-4" session={error.lastHydratedSession} />
+                    {/* meta tags place */}
+                </div>
                 <Divider />
                 <div className="m-4">
                     <Loader loading={traceLoading}>
diff --git a/frontend/app/components/Errors/ui/Label.js b/frontend/app/components/Errors/ui/Label.js
index a82b0328a..bb8b33eff 100644
--- a/frontend/app/components/Errors/ui/Label.js
+++ b/frontend/app/components/Errors/ui/Label.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from "classnames";
 
-function Label({ className, topValue, topValueSize = 'text-base', bottomValue, topMuted = false, bottomMuted = false }) {
+function Label({ className, topValue, topValueSize = 'text-base', bottomValue, topMuted = false, bottomMuted = false, horizontal = false }) {
   return (
-  	<div className={ cn(className, "flex flex-col items-center px-4") } >
-	    <div className={ cn(topValueSize, { "color-gray-medium": topMuted }) } >{ topValue }</div>
+  	<div className={ cn(className, "flex items-center px-4", horizontal ? '!pl-0' : 'flex-col') } >
+	    <div className={ cn(topValueSize, { "color-gray-medium": topMuted }, horizontal ? 'mr-2' : '') } >{ topValue }</div>
 	    <div className={ cn("font-light text-sm", { "color-gray-medium": bottomMuted }) }>{ bottomValue }</div>
 	  </div>
 	);
@@ -12,4 +12,4 @@ function Label({ className, topValue, topValueSize = 'text-base', bottomValue, t
 
 Label.displayName = "Label";
 
-export default Label;
\ No newline at end of file
+export default Label;