updates propeties api getter to treat error as empty result. updates loading animation on save

wherehows-web/app/components/pendulum-ellipsis-animation.ts

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default class extends Component {
+  classNames = ['ellipsis-loader'];
+}

wherehows-web/app/styles/components/_all.scss

@@ -14,6 +14,7 @@
 @import 'dataset-purge-policy/all';
 @import 'dataset-property/all';
 @import 'user-lookup/all';
+@import 'pendulum-ellipsis-animation/all';
 
 @import 'nacho/nacho-button';
 @import 'nacho/nacho-global-search';

wherehows-web/app/styles/components/pendulum-ellipsis-animation/_all.scss

@@ -0,0 +1 @@
+@import 'ellipsis-loader';

wherehows-web/app/styles/components/pendulum-ellipsis-animation/_ellipsis-loader.scss

@@ -0,0 +1,57 @@
+.ellipsis-loader {
+  display: block;
+  min-width: 70px;
+
+  &__ellipsis {
+    margin-left: -25px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    height: 15px;
+  }
+
+  &__circle {
+    position: relative;
+    margin-left: 25px;
+    animation: pendulum 2.5s infinite;
+  }
+
+  &__circle + &__circle {
+    margin-left: -25px;
+    animation: pendulum 2.5s 0.2s infinite;
+  }
+  &__circle + &__circle + &__circle {
+    margin-left: -25px;
+    animation: pendulum 2.5s 0.4s infinite;
+  }
+}
+
+@keyframes pendulum {
+  0%,
+  20% {
+    width: 4px;
+    height: 4px;
+    border-radius: 2px;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  30%,
+  70% {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    left: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  80%,
+  100% {
+    width: 4px;
+    height: 4px;
+    border-radius: 2px;
+    left: 100%;
+    background-color: rgba(0, 0, 0, 0);
+  }
+}

wherehows-web/app/templates/components/dataset-authors.hbs

@@ -136,7 +136,7 @@
       </tbody>
 
     </table>
-</section>
+  </section>
 
 {{/if}}
 
@@ -151,8 +151,7 @@
       {{#if saveOwners.isIdle}}
         Save
       {{else}}
-        Saving...
-        {{fa-icon "circle-o-notch" spin=true}}
+        {{pendulum-ellipsis-animation}}
       {{/if}}
 
     </button>

wherehows-web/app/templates/components/pendulum-ellipsis-animation.hbs

@@ -0,0 +1,5 @@
+<div class="ellipsis-loader__ellipsis">
+  <div class="ellipsis-loader__circle">&nbsp;</div>
+  <div class="ellipsis-loader__circle">&nbsp;</div>
+  <div class="ellipsis-loader__circle">&nbsp;</div>
+</div>

wherehows-web/app/typings/api/datasets/properties.d.ts

@@ -28,6 +28,7 @@ interface IDatasetPinotProperties {
 interface IDatasetPropertiesGetResponse {
   status: ApiStatus;
   properties?: IDatasetProperties;
+  message?: string;
 }
 
 /**
@@ -39,6 +40,7 @@ interface IDatasetPropertiesGetResponse {
 interface IDatasetPinotPropertiesGetResponse {
   status: ApiStatus;
   properties?: IDatasetPinotProperties;
+  message?: string;
 }
 
 export {

wherehows-web/app/utils/api/datasets/properties.ts

@@ -34,13 +34,18 @@ const datasetDeprecationUrlById = (id: number) => `${datasetUrlById(id)}/depreca
  */
 const readDatasetProperties = async <T extends IDatasetPropertiesGetResponse | IDatasetPinotPropertiesGetResponse>(
   id: number
-) => {
-  const { status, properties } = await getJSON<T>({ url: datasetPropertiesUrlById(id) });
+): Promise<IDatasetProperties> => {
+  const { status, properties, message } = await getJSON<T>({ url: datasetPropertiesUrlById(id) });
 
   if (status === ApiStatus.OK && properties) {
     return properties;
   }
 
+  // treat the error status with a record not found msg as empty set
+  if (status === ApiStatus.ERROR && message === 'record not found') {
+    return {};
+  }
+
   throw new Error('Exception occurred reading the dataset properties');
 };
 

wherehows-web/app/utils/api/shared.ts

@@ -12,5 +12,6 @@ export enum ApiStatus {
   OK = 'ok',
   // Adds support for success response used in api's like /comments, will refactored to use ok
   SUCCESS = 'success',
-  FAILED = 'failed'
+  FAILED = 'failed',
+  ERROR = 'error'
 }

wherehows-web/tests/integration/components/pendulum-ellipsis-animation-test.js

@@ -0,0 +1,13 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('pendulum-ellipsis-animation', 'Integration | Component | pendulum ellipsis animation', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{pendulum-ellipsis-animation}}`);
+
+  assert.equal(document.querySelector('.ellipsis-loader').tagName, 'DIV', 'renders a div with component class');
+  assert.equal(document.querySelectorAll('.ellipsis-loader__circle').length, 3, 'contains three circle elements');
+});