From 3d82678c2609f525d45866cd36a5a84bc4ba376a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 22 Jun 2022 16:18:26 +0200
Subject: [PATCH] fixed(ui) - review fixes

---
 frontend/app/components/Alerts/AlertsList.js     |  1 -
 .../app/components/Errors/Error/ErrorInfo.js     |  2 +-
 .../app/components/Errors/Error/MainSection.js   |  8 ++++----
 .../shared/Filters/FilterModal/FilterModal.tsx   | 16 ++++++++++------
 .../Filters/FilterSelection/FilterSelection.tsx  |  3 ++-
 .../SessionSearchField/SessionSearchField.tsx    |  8 +++++++-
 frontend/app/components/ui/Input/Input.tsx       |  2 +-
 frontend/app/duck/liveSearch.js                  |  1 -
 frontend/app/mstore/types/error.ts               |  2 ++
 frontend/webpack.config.ts                       |  5 +++++
 10 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/Alerts/AlertsList.js b/frontend/app/components/Alerts/AlertsList.js
index 21fbce249..21ea6448d 100644
--- a/frontend/app/components/Alerts/AlertsList.js
+++ b/frontend/app/components/Alerts/AlertsList.js
@@ -21,7 +21,6 @@ const AlertsList = props => {
       <div className="mb-3 w-full px-3">
         <Input
           name="searchQuery"
-          fluid
           placeholder="Search by Name or Metric"
           onChange={({ target: { value } }) => setQuery(value)}
         />
diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js
index 91d8a018f..b1d18ab45 100644
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@@ -79,13 +79,13 @@ export default class ErrorInfo extends React.PureComponent {
 			>
 				{/* <div className="w-9/12 mb-4 flex justify-between">
 					<BackLink	to={ errorsRoute() } label="Back" />
+					<div />
 					<div className="flex items-center">
 						<Popup
 							pinned
 							content="Prev Error"
 						>
 							<IconButton
-								// className="mr-3"
 								outline
 								compact
 								size="small"
diff --git a/frontend/app/components/Errors/Error/MainSection.js b/frontend/app/components/Errors/Error/MainSection.js
index 2fb286288..4a81ca062 100644
--- a/frontend/app/components/Errors/Error/MainSection.js
+++ b/frontend/app/components/Errors/Error/MainSection.js
@@ -103,7 +103,7 @@ export default class MainSection extends React.PureComponent {
 						
 				</div>
 
-				<Divider />
+				{/* <Divider />
 				<div className="flex m-4">
 					{ error.status === UNRESOLVED 
 						? <IconButton
@@ -145,7 +145,7 @@ export default class MainSection extends React.PureComponent {
 						loading={ toggleFavoriteLoading }
 						onClick={ this.bookmark }
 					/>
-					{/* <SharePopup
+					<SharePopup
 						entity="errors"
 						id={ error.errorId }
 						trigger={
@@ -156,8 +156,8 @@ export default class MainSection extends React.PureComponent {
 							icon="share-alt"
 							/>
 						}
-					/> */}
-				</div>
+					/>
+				</div> */}
 				<Divider />
 				<div className="m-4">
 					<h3 className="text-xl inline-block mr-2">Last session with this error</h3>
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 5ed5b228f..ecb9e3b52 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -122,9 +122,13 @@ function FilterModal(props: Props) {
   );
 }
 
-export default connect(state => ({
-  // filters: state.getIn([ 'search', 'filterListLive' ]),
-  filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
-  metaOptions: state.getIn([ 'customFields', 'list' ]),
-  fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
-}))(FilterModal);
+export default connect((state: any, props: any) => {
+  return ({
+    filters: props.isLive ? state.getIn([ 'search', 'filterListLive' ]) : state.getIn([ 'search', 'filterList' ]),
+    filterSearchList: props.isLive ? state.getIn([ 'liveSearch', 'filterSearchList' ]) : state.getIn([ 'search', 'filterSearchList' ]),
+    // filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
+    // liveFilterSearchList: state.getIn([ 'liveSearch', 'filterSearchList' ]),
+    metaOptions: state.getIn([ 'customFields', 'list' ]),
+    fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
+  })
+})(FilterModal);
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index 221438620..d4e20d322 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -45,8 +45,9 @@ function FilterSelection(props: Props) {
       {showModal && (
         <div className="absolute left-0 border shadow rounded bg-white z-50">
           <FilterModal
+            isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
             onFilterClick={onFilterClick}
-            filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
+            // filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
           />
         </div>
       )}
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
index 28d1af364..7f38a0fed 100644
--- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -11,6 +11,8 @@ interface Props {
   addFilterByKeyAndValue: (key: string, value: string) => void;
   filterList: any;
   filterListLive: any;
+  filterSearchListLive: any;
+  filterSearchList: any;
 }
 function SessionSearchField(props: Props) {
   const debounceFetchFilterSearch = React.useCallback(debounce(props.fetchFilterSearch, 1000), []);
@@ -45,7 +47,9 @@ function SessionSearchField(props: Props) {
             searchQuery={searchQuery}
             isMainSearch={true}
             onFilterClick={onAddFilter}
-            filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
+            isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
+            // filters={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterListLive : props.filterList }
+            // filterSearchList={isRoute(ASSIST_ROUTE, window.location.pathname) ? props.filterSearchListLive : props.filterSearchList }
           />
         </div>
       )}
@@ -54,6 +58,8 @@ function SessionSearchField(props: Props) {
 }
 
 export default connect((state: any) => ({
+  filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
+  filterSearchListLive: state.getIn([ 'liveSearch', 'filterSearchList' ]),
   filterList: state.getIn([ 'search', 'filterList' ]),
   filterListLive: state.getIn([ 'search', 'filterListLive' ]),
 }), {  })(SessionSearchField);
\ No newline at end of file
diff --git a/frontend/app/components/ui/Input/Input.tsx b/frontend/app/components/ui/Input/Input.tsx
index 7851fec7f..a2ad36f1b 100644
--- a/frontend/app/components/ui/Input/Input.tsx
+++ b/frontend/app/components/ui/Input/Input.tsx
@@ -19,7 +19,7 @@ function Input(props: Props) {
             { type === 'textarea' ? (
                 <textarea rows={rows} style={{ resize: 'none' }} maxLength={500} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
             ) : (
-                <input style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
+                <input type={type} style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
             )}
             
             { leadingButton && <div className="absolute top-0 bottom-0 right-0">{ leadingButton }</div> }
diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js
index 651a0872a..44d0a97fd 100644
--- a/frontend/app/duck/liveSearch.js
+++ b/frontend/app/duck/liveSearch.js
@@ -40,7 +40,6 @@ function reducer(state = initialState, action = {}) {
         .set('list', list)
         .set('total', total);
     case success(FETCH_FILTER_SEARCH):
-      console.log('FETCH_FILTER_SEARCH', action);
       const groupedList = action.data.reduce((acc, item) => {
         const { projectId, type, value } = item;
         const key = type;
diff --git a/frontend/app/mstore/types/error.ts b/frontend/app/mstore/types/error.ts
index 54382f081..9682f61ea 100644
--- a/frontend/app/mstore/types/error.ts
+++ b/frontend/app/mstore/types/error.ts
@@ -9,6 +9,7 @@ export default class Error {
     time: string = ''
     function: string = '?'
     stack0InfoString: string = ''
+    status: string = ''
     
     chart: any = []
     sessions: number = 0
@@ -31,6 +32,7 @@ export default class Error {
         this.time = json.time
         this.function = json.function
         this.stack0InfoString = getStck0InfoString(json.stack || [])
+        this.status = json.status
 
         this.chart = json.chart
         this.sessions = json.sessions
diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts
index 57c739d4a..503960a0c 100644
--- a/frontend/webpack.config.ts
+++ b/frontend/webpack.config.ts
@@ -57,6 +57,11 @@ const config: Configuration = {
             {
                 loader: "css-loader",
                 options: {
+                    modules: {
+                      mode: "local",
+                      auto: true,
+                      localIdentName: "[name]__[local]--[hash:base64:5]",
+                    },
                     url: {
                         filter: (url: string) => {
                           // Semantic-UI-CSS has an extra semi colon in one of the URL due to which CSS loader along