Merge pull request #1364 from alephdata/kirk/ui-updates

Kirk/ui updates
alephdata · Sep 17, 2020 · 81411b6 · 81411b6
2 parents a3eb443 + 44debd6
commit 81411b6
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 12 deletions.
diff --git a/ui/src/app/App.scss b/ui/src/app/App.scss
@@ -168,12 +168,14 @@ a {
 
   &__title {
     font-weight: bold;
+    margin-right: $aleph-grid-size*3;
+    max-width: $aleph-content-width-limit;
 
     &__text {
       display: inline-flex;
 
       .bp3-icon {
-        align-self: center;
+        margin-top: 2px;
       }
     }
   }
@@ -187,6 +189,7 @@ a {
   &__count {
     @include rtl(float, right, left);
     display: block;
+    margin-top: 2px;
   }
 
   &__details {

diff --git a/ui/src/components/CollectionIndex/CollectionIndexItem.jsx b/ui/src/components/CollectionIndex/CollectionIndexItem.jsx
@@ -72,7 +72,7 @@ class CollectionIndexItem extends PureComponent {
           { collection.casefile && (
             <span className="index-item__details__item">
               <Icon icon="social-media" />
-              <Role.List roles={collection.team} icon={false} truncate={3} separateItems />
+              <Role.List roles={collection.team} icon={false} truncate={3} truncateItem={20} separateItems />
             </span>
           )}
         </p>

diff --git a/ui/src/components/Entity/EntityReferencesMode.jsx b/ui/src/components/Entity/EntityReferencesMode.jsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import { Waypoint } from 'react-waypoint';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -115,7 +116,7 @@ class EntityReferencesMode extends React.Component {
       return <ErrorSection icon="graph" title={intl.formatMessage(messages.no_relationships)} />;
     }
     const { property } = reference;
-    const results = ensureArray(result.results);
+    const results = _.uniqBy(ensureArray(result.results), 'id');
     const columns = schema.getFeaturedProperties().filter(prop => prop.name !== property.name);
     return (
       <section className="EntityReferencesTable">

diff --git a/ui/src/components/common/AnimatedCount.jsx b/ui/src/components/common/AnimatedCount.jsx
@@ -4,11 +4,16 @@ import { Skeleton } from 'components/common';
 
 import './AnimatedCount.scss';
 
-const AnimatedCount = ({ count, isPending, label}) => (
-  <div className="AnimatedCount">
-    {isPending && <Skeleton.Text className="AnimatedCount__count" type="span" length="3" />}
-    {!isPending && <CountUp className="AnimatedCount__count" end={count} separator="," />}
-    <p className="AnimatedCount__label">{label}</p>
-  </div>
-)
+const AnimatedCount = ({ count, isPending, label}) => {
+  if (!isPending && count === undefined) {
+    return null;
+  }
+  return (
+    <div className="AnimatedCount">
+      {isPending && <Skeleton.Text className="AnimatedCount__count" type="span" length="3" />}
+      {!isPending && <CountUp className="AnimatedCount__count" end={count} separator="," />}
+      <p className="AnimatedCount__label">{label}</p>
+    </div>
+  );
+}
 export default AnimatedCount;
diff --git a/ui/src/components/common/Role.jsx b/ui/src/components/common/Role.jsx
@@ -59,7 +59,8 @@ class RoleList extends PureComponent {
     const { roles, separateItems, truncate = Infinity, truncateItem } = this.props;
     if (!roles) return null;
 
-    let names = roles.map(role => <RoleLink key={role.id} role={role} truncate={truncateItem} {...this.props} />);
+
+    let names = roles.map(role => <RoleLink key={role.id} role={role} truncate={truncateItem} />);
 
     // Truncate if too long
     if (names.length > truncate) {

diff --git a/ui/src/screens/HomeScreen/HomeScreen.jsx b/ui/src/screens/HomeScreen/HomeScreen.jsx
@@ -90,7 +90,7 @@ export class HomeScreen extends Component {
                   placeholder={intl.formatMessage(messages.placeholder, { samples: samplesList })}
                   inputProps={{ large: true, autoFocus: true }}
                 />
-                <div className="HomeScreen__thirds no-wrap">
+                <div className="HomeScreen__thirds">
                   <AnimatedCount
                     count={statistics?.things}
                     isPending={statistics.isPending}