[AMSA-33] add accordion to logs list

package.json

@@ -165,6 +165,7 @@
     "raven-js": "^3.27.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
+    "react-tiny-accordion": "^2.0.4",
     "semver": "^6.0.0",
     "uuid": "^3.3.2",
     "winston": "^3.2.1",

src/core/store.ts

@@ -231,6 +231,7 @@ export class Store {
                 percent: (pEvent.synced + pEvent.failed) / pEvent.total * 100,
                 lastEvent: event.type
             };
+            this.pushLogs(account);
             return this.fireSyncUpdated();
         case SyncEventsTypes.Stopped:
             delete this.state.syncProgress[event.accountId];

src/core/sync-apps/sync-stats.ts

@@ -59,7 +59,7 @@ export class SyncStats {
         if (this.affectedApps.created.some(v => v.id === app.id)) {
             return;
         }
-        this.affectedApps.updated = this.affectedApps.updated.filter(v => v.id !== app.id);
+        this.affectedApps.updated.push(app);
     }
 
     appDeleted (app: AppodealApp) {

src/ui/components/log-list/LogList.scss

@@ -5,17 +5,17 @@
   overflow-y: auto;
   overflow-x: hidden;
 
-  &:not(:empty) {
-    margin-block-start: 10px;
-  }
-}
+  > div {
+    display: block;
+    background-color: #212225;
 
-.line-wrapper {
-  display: block;
-  background-color: #212225;
+    &:nth-child(2n) {
+      background-color: #2B2C2F;
+    }
+  }
 
-  &:nth-child(2n) {
-    background-color: #2B2C2F;
+  &:not(:empty) {
+    margin-block-start: 10px;
   }
 }
 

src/ui/components/log-list/LogListComponent.tsx

@@ -6,6 +6,7 @@ import {ActionTypes, LogAction} from 'lib/actions';
 import {classNames, singleEvent} from 'lib/dom';
 import {sendToMain} from 'lib/messages';
 import React from 'react';
+import Accordion from 'react-tiny-accordion';
 import {TextToClipboard} from 'ui/components/text-to-clipboard/TextToClipboardComponent';
 import style from './LogList.scss';
 
@@ -98,10 +99,11 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
     }
 
     render (): React.ReactNode {
-        return <div className={style.list}>
+
+        return <Accordion className={style.list}>
             {this.props.historyInfo.syncs.map(
                 syncInfo =>
-                    <div className={style['line-wrapper']} key={syncInfo.id}>
+                    <div key={syncInfo.id} data-header={
                         <div className={style.line}>
                             <div className={style.iconsGroup}>
                                 <div className={style.icon}>
@@ -126,14 +128,13 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
                                 </button>
                             </div>
                         </div>
-                        {this.affectedAppsCount(syncInfo) && <div>
-                            {this.appList('Apps created', syncInfo.affectedApps.created)}
-                            {this.appList('Apps updated', syncInfo.affectedApps.updated)}
-                            {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
-                        </div>
-                        }
+                    }
+                    >
+                        {this.appList('Apps created', syncInfo.affectedApps.created)}
+                        {this.appList('Apps updated', syncInfo.affectedApps.updated)}
+                        {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
                     </div>
             )}
-        </div>;
+        </Accordion>;
     }
-};
+}