Refactor development

Author: rsanteri

src/assets/collapse.svg

@@ -78,7 +78,7 @@ const AutoCompleteFilter: React.FC<Props> = ({ autoCompleteSettings, onClear, op
 };
 
 const Content = styled.div`
-  width: max-content;
+  width: auto;
 `;
 
 const FilterPopupHeading = styled.div`

src/assets/expand.svg

@@ -26,6 +26,8 @@ export const FilterClickableRow = styled.div<{ disabled?: boolean; danger?: bool
   opacity: ${(p) => (p.disabled ? 0.2 : 1)};
   color: ${(p) => (p.danger ? 'var(--color-text-danger)' : 'var(--color-text-primary)')};
 
+  white-space: normal;
+
   &:hover {
     background: var(--color-bg-secondary);
   }

src/assets/tag.svg

@@ -40,6 +40,7 @@ import { ReactComponent as SearchNotFound } from '@assets/search-not-found.svg';
 import { ReactComponent as Search } from '@assets/search.svg';
 import { ReactComponent as Sort } from '@assets/sort.svg';
 import { ReactComponent as Success } from '@assets/success.svg';
+import { ReactComponent as Tag } from '@assets/tag.svg';
 import { ReactComponent as Timeline } from '@assets/timeline.svg';
 import { ReactComponent as Times } from '@assets/times.svg';
 import { ReactComponent as ToTopArrow } from '@assets/to_top_arrow.svg';
@@ -88,6 +89,7 @@ const icons = {
   searchNotFound: SearchNotFound,
   sort: Sort,
   success: Success,
+  tag: Tag,
   timeline: Timeline,
   times: Times,
   trash: Trash,

src/components/FilterInput/AutoCompleteFilter.tsx

@@ -110,10 +110,12 @@ export const TR = styled.tr<{ clickable?: boolean; stale?: boolean; active?: boo
       : ''}
 `;
 
-const HeaderColumnWrapper = styled.div`
+const HeaderColumnWrapper = styled.div<{ alignment: 'left' | 'right' | 'center' }>`
   display: flex;
   align-items: center;
   min-height: 1.25rem;
+  justify-content: ${(p) =>
+    p.alignment === 'right' ? 'flex-end' : p.alignment === 'center' ? 'center' : 'flex-start'};
 `;
 
 interface HeaderColumnProps {
@@ -123,6 +125,7 @@ interface HeaderColumnProps {
   onSort: (ord: string) => void;
   sortable: boolean;
   maxWidth?: string;
+  alignment?: 'left' | 'right' | 'center';
 }
 
 export const HeaderColumn: React.FC<HeaderColumnProps> = ({
@@ -132,6 +135,7 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
   sortable = true,
   onSort,
   maxWidth,
+  alignment = 'left',
   ...rest
 }) => {
   const [direction, orderParam] = currentOrder ? parseOrderParam(currentOrder) : ['down' as const, ''];
@@ -147,12 +151,12 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
         maxWidth
           ? {
               maxWidth: maxWidth + (maxWidth.indexOf('%') > -1 ? '' : 'px'),
-              width: maxWidth + (maxWidth.indexOf('%') > -1 ? '' : 'px'),
+              // width: maxWidth + (maxWidth.indexOf('%') > -1 ? '' : 'px'),
             }
           : {}
       }
     >
-      <HeaderColumnWrapper>
+      <HeaderColumnWrapper alignment={alignment}>
         {label}
         {sortable && (
           <SortIconContainer>

src/components/FilterInput/FilterRows.tsx

@@ -14,7 +14,14 @@ import styled from 'styled-components';
 const Tooltip: React.FC<TooltipProps> = ({ children, ...props }) => {
   return (
     <CustomTooltip>
-      <ReactTooltip className="custom-tooltip" delayHide={250} place="bottom" effect="solid" {...props}>
+      <ReactTooltip
+        className="custom-tooltip"
+        delayHide={250}
+        place="bottom"
+        effect="solid"
+        arrowColor="transparent"
+        {...props}
+      >
         {children}
       </ReactTooltip>
     </CustomTooltip>
@@ -29,25 +36,22 @@ const CustomTooltip = styled.div`
   .custom-tooltip {
     cursor: auto;
     max-width: 37.5rem;
-    background: #fff;
-    color: #333;
-    padding: 1rem;
+    padding: 0.25rem 0.5rem;
+    background: #31302fe5;
+    color: #fff;
     font-size: 0.75rem;
     border-radius: var(--radius-primary);
-    border: 1px solid #d0d0d0;
-    box-shadow: 2px 2px 4px rgb(0 0 0 / 25%);
     white-space: pre;
     pointer-events: auto;
 
+    &::before {
+      display: none;
+    }
+
     &.show {
       opacity: 1;
     }
 
-    &.place-bottom::after,
-    &.place-top::after {
-      border-bottom-color: #fff;
-      background: #fff;
-    }
     &:hover {
       visibility: visible;
       opacity: 1;

src/components/Icon/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import Tooltip from '@/components/Tooltip';
+import { TriggerEventsValue } from '@/components/Trigger';
+
+type TriggerBadgeInfo =
+  | {
+      type: 'user';
+      data: string;
+    }
+  | { type: 'trigger'; data: TriggerEventsValue[] };
+
+type Props = {
+  id: number;
+  content: TriggerBadgeInfo;
+};
+
+const TriggeredByBadge: React.FC<Props> = ({ id, content }) => {
+  if (content.type === 'user') {
+    return <Badge badgeType="user">{content.data}</Badge>;
+  }
+
+  const tooltipId = `trigger-tooltip-${id}`;
+
+  return (
+    <Badges>
+      {content.data.slice(0, 1).map((item) => (
+        <Badge key={item.name} badgeType={item.type}>
+          {item.name}
+        </Badge>
+      ))}
+      {content.data.length > 1 && (
+        <Badge badgeType="event" data-tip data-for={tooltipId}>
+          +{content.data.length - 1}
+        </Badge>
+      )}
+      <Tooltip id={tooltipId} place="bottom">
+        {content.data.map((item) => (
+          <div key={item.name}>{item.name}</div>
+        ))}
+      </Tooltip>
+    </Badges>
+  );
+};
+
+const Badges = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25rem;
+`;
+
+const Badge = styled.div<{ badgeType: 'user' | 'event' | 'run' }>`
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 0.25rem;
+  border-color: ${(p) => (p.badgeType === 'run' ? '#4E7CA766' : '#6A68674D')};
+  color: var(--color-text-light);
+  text-overflow: ellipsis;
+  width: max-content;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export default TriggeredByBadge;

src/components/Table/index.tsx

@@ -19,7 +19,7 @@ type Props = {
 const VerticalToggle: React.FC<Props> = ({ visible, active, onClick }) => {
   return (
     <ToggleContainer data-testid="vertical-toggle" onClick={onClick} show={visible}>
-      <Icon name="chevron" size="sm" rotate={active ? 180 : 0} />
+      <Icon name={active ? 'collapse' : 'expand'} size="xs" />
     </ToggleContainer>
   );
 };