feat(ui) - customm metrics ui review and changes

frontend/app/components/Dashboard/Dashboard.js

@@ -221,10 +221,12 @@ export default class Dashboard extends React.PureComponent {
                   className="mb-4"
                   description={
                     <div className="flex items-center">
-                      <div className="mr-4 text-sm flex items-center font-normal">
-                        <Icon name="info" size="12" className="mr-2" />
-                        Custom Metrics are not supported for comparison.
-                      </div>
+                      {comparing && (
+                        <div className="mr-4 text-sm flex items-center font-normal">
+                          <Icon name="info" size="12" className="mr-2" />
+                          Custom Metrics are not supported for comparison.
+                        </div>
+                      )}
                       <CustomMetrics />
                     </div>
                   }

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx

@@ -119,7 +119,7 @@ function FilterAutoComplete(props: Props) {
           className={stl.right}
           // onClick={showOrButton ? onRemoveValue : onAddValue}
         >
-          { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="18" /></div> }
+          { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="12" /></div> }
           { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
         </div>
       </div>

frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css

@@ -53,8 +53,8 @@
   &.ui.basic.button {
     box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
   }
-
+/* 
   & input {
     padding: 0 8px !important;
-  }
+  } */
 }

frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx

@@ -25,20 +25,20 @@ function FilterValueDropdown(props: Props) {
     <div className={stl.wrapper}>      
       <Dropdown
         search={search}
-        className={ cn(stl.operatorDropdown, className) }      
+        className={ cn(stl.operatorDropdown, className, "filterDropdown") }
         options={ options }
         name="issue_type"
         value={ value }
         onChange={ onChange }
         placeholder="Select"
         fluid
-        icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+        icon={ <Icon className="absolute right-0 mr-2" name="chevron-down" size="12" /> }
       />
       <div
         className={stl.right}
         // onClick={showOrButton ? onRemoveValue : onAddValue}
       >
-        { showCloseButton && <div onClick={props.onRemoveValue}><Icon name="close" size="18" /></div> }
+        { showCloseButton && <div onClick={props.onRemoveValue}><Icon name="close" size="12" /></div> }
         { showOrButton && <div onClick={props.onAddValue} className="color-teal"><span className="px-1">or</span></div> }
       </div>
     </div>

frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx

@@ -7,8 +7,11 @@ import { connect } from 'react-redux';
 
 interface Props {
     clearSearch: () => void;
+    appliedFilter: any;
 }
 const MainSearchBar = (props: Props) => {
+  const { appliedFilter } = props;
+  const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
   return (
     <div className="flex items-center">
         <div style={{ width: "60%", marginRight: "10px"}}><SessionSearchField /></div>
@@ -18,6 +21,7 @@ const MainSearchBar = (props: Props) => {
             trigger={
                 <Button
                     plain
+                    disabled={!hasFilters}
                     className="ml-auto"
                     onClick={() => props.clearSearch()}
                 >
@@ -33,4 +37,6 @@ const MainSearchBar = (props: Props) => {
     </div>
   )
 }
-export default connect(null, { clearSearch })(MainSearchBar);
+export default connect(state => ({
+    appliedFilter: state.getIn(['search', 'instance']),
+}), { clearSearch })(MainSearchBar);

frontend/app/components/ui/Button/Button.js

@@ -14,6 +14,7 @@ export default ({
   success = false,
   error = false,
   minWidth,
+  disabled = false,
   ...props
 }) => (
   <Button
@@ -22,6 +23,7 @@ export default ({
     className={ classnames(
       className,
       size,
+      { 'disabled' : disabled },
       styles[ plain ? 'plain' : '' ],
       styles[ hover ? 'hover' : '' ],
       styles.button,

frontend/app/styles/semantic.css

@@ -319,9 +319,21 @@ a:hover {
   bottom: 0 !important;
 }
 
-.ui.search.dropdown.active>input.search,
-.ui.search.dropdown.visible>input.search {
+.filterDropdown.ui.search.dropdown.active>input.search,
+.filterDropdown.ui.search.dropdown.visible>input.search {
   border: solid thin $teal !important;
   border-radius: 3px;
   height: 26px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  whitespace: nowrap;
+}
+
+.filterDropdown.ui.search.dropdown>.text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 15px;
 }