Feature/subscription sortings (#493)

local_modules/styles/mixins.less

@@ -8,3 +8,23 @@
     max-width: @containerMaxWidth;
     box-sizing: border-box;
 }
+
+.base-reset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.italic-font {
+    color: @colorGrey;
+    font-style: italic;
+}
+
+.sorting-button {
+    &:extend(.italic-font, .base-reset);
+    cursor: pointer;
+}

local_modules/styles/variables.less

@@ -5,3 +5,4 @@
 @containerMaxWidth: 1200px;
 @containerGap: 15px;
 @breakpoint: 600px;
+@colorGrey: #666;

src/Components/EventList/EventList.less

@@ -15,7 +15,7 @@
 }
 
 .header {
-    color: #666;
+    color: @colorGrey;
     font-style: italic;
 }
 
@@ -44,7 +44,7 @@
 .curr-value {
     width: 70px;
     font-size: 12px;
-    color: #666;
+    color: @colorGrey;
 }
 
 .prev-value {

src/Components/Footer/Footer.less

@@ -5,7 +5,7 @@
     padding-top: 40px;
     padding-bottom: 40px;
     background-color: #efefef;
-    color: #666;
+    color: @colorGrey;
 }
 
 .container {

src/Components/MetricList/MetricList.less

@@ -81,7 +81,7 @@
     padding: 0;
     border: none;
     background: none;
-    color: #666;
+    color: @colorGrey;
     font: inherit;
     font-style: italic;
     -webkit-appearance: none;

src/Components/Mobile/MobileTagSelectorPage/MobileTagSelectorPage.less

@@ -2,7 +2,7 @@
 
 .no-result {
     padding: 30px;
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }
 

src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.less

@@ -37,3 +37,9 @@
     }
 
 }
+
+.empty-triggers {
+    padding: 30;
+    color: @colorGrey; 
+    text-align: center; 
+}

src/Components/Mobile/MobileTriggerListPage/MobileTriggerListPage.tsx

@@ -54,9 +54,7 @@ export default class MobileTriggerListPage extends React.Component<MobileTrigger
                 </MobileHeader>
                 <div className={cn("content")}>
                     {triggers != null && triggers.length === 0 && (
-                        <div style={{ padding: 30, color: "#666", textAlign: "center" }}>
-                            No results :-(
-                        </div>
+                        <div className={cn("empty-triggers")}>No results :-(</div>
                     )}
                     {triggers != null &&
                         triggers.map((trigger) => (

src/Components/Mobile/Styles/variables.less

@@ -12,3 +12,5 @@
 @no-data-color: noDataColor;
 
 @primary-divider-color: #ddd;
+
+@colorGrey: #666;

src/Components/NotificationList/NotificationList.less

@@ -8,11 +8,6 @@
     margin-top: 5px;
 }
 
-.header {
-    color: #666;
-    font-style: italic;
-}
-
 .timestamp {
     width: 15%;
 }
@@ -61,6 +56,6 @@
 }
 
 .no-result {
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }

src/Components/NotificationList/NotificationList.tsx

@@ -54,7 +54,7 @@ export default function NotificationList(props: Props): React.ReactElement {
         <>
             {ConfirmModal}
             <Gapped gap={30} vertical>
-                <div className={cn("row", "header")}>
+                <div className={cn("row", "italic-font")}>
                     <div className={cn("timestamp")}>Timestamp</div>
                     <div className={cn("state")}>State</div>
                     <div className={cn("trigger")}>Trigger</div>

src/Components/PatternList/PatternList.less

@@ -23,24 +23,12 @@
     }
 }
 
-.header {
-    color: #666;
-    font-style: italic;
-}
-
 .name {
     width: calc(~'100% - 240px');
 
     &.clicked {
-        margin: 0;
-        padding: 0;
-        border: none;
-        background: none;
-        color: inherit;
-        font: inherit;
+        &:extend(.base-reset);
         text-align: left;
-        -webkit-appearance: none;
-        appearance: none;
         cursor: pointer;
     }
 }
@@ -49,15 +37,7 @@
 .metric-counter,
 .control {
     width: 80px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: #666;
-    font: inherit;
-    font-style: italic;
-    -webkit-appearance: none;
-    appearance: none;
+    &:extend(.sorting-button);
 }
 
 .info {

src/Components/PatternList/PatternList.tsx

@@ -27,7 +27,7 @@ export default function PatternList(props: Props): React.ReactElement {
     const sortingIcon = sortingDown ? <ArrowBoldDownIcon /> : <ArrowBoldUpIcon />;
     return (
         <div>
-            <div className={cn("row", "header")}>
+            <div className={cn("row", "header", "italic-font")}>
                 <div className={cn("name")}>Pattern</div>
                 <button
                     type="button"

src/Components/ResourceIDBadge/ResourceIDBadge.less

@@ -1,9 +1,11 @@
+@import '~styles/variables.less';
+
 .wrapper {
     margin: 0 0 16px;
 }
 
 .title {
-    color: #666;
+    color: @colorGrey;
     margin-bottom: 4px
 }
 

src/Components/SubscriptionEditor/SubscriptionEditor.less

@@ -1,3 +1,5 @@
+@import '~styles/variables.less';
+
 .form {
     .row {
         margin-bottom: 15px;
@@ -7,7 +9,7 @@
         }
 
         .caption {
-            color: #666;
+            color: @colorGrey;
             margin-bottom: 5px;
         }
 

src/Components/SubscriptionList/SubscriptionList.less

@@ -1,8 +1,31 @@
+@import '~styles/variables.less';
+@import '~styles/mixins.less';
+
 .items-container {
     margin: 0 -10px;
 }
 
 .items {
     border-collapse: collapse;
     width: 100%;
+}
+
+.header {
+    &:extend(.italic-font);
+    margin-bottom: 5px;
+    border-bottom: 1px solid #eee;
+
+    td {
+        padding: 5px;
+    }
+}
+
+.fold-button-gap {
+    display: none;
+}
+
+@media screen and (max-width: @breakpoint) {
+    .fold-button-gap {
+        display: table-cell;
+    }
 }

src/Components/SubscriptionList/SubscriptionList.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import { Contact } from "../../Domain/Contact";
 import { Subscription } from "../../Domain/Subscription";
 import { SubscriptionRow } from "./SubscriptionRow/SubscriptionRow";
-
+import ArrowBoldDownIcon from "@skbkontur/react-icons/ArrowBoldDown";
+import ArrowBoldUpIcon from "@skbkontur/react-icons/ArrowBoldUp";
+import { useSortData } from "../../hooks/useSortData";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionList.less";
@@ -22,11 +24,38 @@ export const SubscriptionList: React.FC<Props> = ({
     contacts,
     handleEditSubscription,
 }) => {
+    const { sortedData, sortConfig, handleSort } = useSortData(subscriptions, "contacts");
+
+    const SortingIcon =
+        sortConfig.direction === "descending" ? <ArrowBoldDownIcon /> : <ArrowBoldUpIcon />;
     return (
         <div className={cn("items-container")}>
             <table ref={tableRef} className={cn("items")}>
+                <thead>
+                    <tr className={cn("header")}>
+                        <td className={cn("fold-button-gap")} />
+                        <td colSpan={2}>
+                            <button
+                                onClick={() => handleSort("tags")}
+                                type="button"
+                                className={cn("sorting-button")}
+                            >
+                                Tags {sortConfig.sortingColumn === "tags" && SortingIcon}
+                            </button>
+                        </td>
+                        <td>
+                            <button
+                                onClick={() => handleSort("contacts")}
+                                type="button"
+                                className={cn("sorting-button")}
+                            >
+                                Contacts {sortConfig.sortingColumn === "contacts" && SortingIcon}
+                            </button>
+                        </td>
+                    </tr>
+                </thead>
                 <tbody>
-                    {subscriptions.map((subscription) => (
+                    {sortedData.map((subscription) => (
                         <SubscriptionRow
                             key={subscription.id}
                             subscription={subscription}

src/Components/Tag/Tag.less

@@ -8,7 +8,7 @@
     height: 20px;
     border-radius: 2px;
     background-color: #eee;
-    color: #666;
+    color: @colorGrey;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: top;

src/Components/TagList/TagList.less

@@ -22,7 +22,7 @@
 }
 
 .header {
-    color: #666;
+    color: @colorGrey;
     font-style: italic;
     margin-bottom: 5px;
 }
@@ -75,13 +75,3 @@
 .sub-control {
     width: 100px;
 }
-
-.sorting-button {
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: #666;
-    font: inherit;
-    cursor: pointer;
-}

src/Components/TriggerInfo/TriggerInfo.less

@@ -37,7 +37,7 @@
         font-style: italic;
         margin-top: 10px;
         width: 150px;
-        color: #666;
+        color: @colorGrey;
     }
 
     dd {

src/Components/TriggerList/TriggerList.less

@@ -2,7 +2,7 @@
 @import '~styles/mixins.less';
 
 .no-result {
-    color: #666;
+    color: @colorGrey;
     text-align: center;
 }
 

src/Components/TriggerListItem/TriggerListItem.less

@@ -40,7 +40,7 @@
 }
 
 .NA {
-    color: #666666;
+    color: @colorGrey;
 }
 
 .data {