Эх сурвалжийг харах

HUE-9509 [ui] Create AlertBox component

sreenaths 5 жил өмнө
parent
commit
3cbd1a122e

+ 61 - 0
desktop/core/src/desktop/js/components/InlineAlert.test.ts

@@ -0,0 +1,61 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { shallowMount } from '@vue/test-utils';
+import InlineAlert from './InlineAlert.vue';
+import { AlertType } from './InlineAlert.vue';
+
+describe('InlineAlert.vue', () => {
+  it('AlertType check', () => {
+    expect(AlertType.Success).toBeDefined();
+    expect(AlertType.Error).toBeDefined();
+    expect(AlertType.Warning).toBeDefined();
+    expect(AlertType.Info).toBeDefined();
+    expect(AlertType.Unknown).toBeDefined();
+  });
+
+  it('should render', () => {
+    const wrapper = shallowMount(InlineAlert, {
+      propsData: {
+        type: AlertType.Success,
+        message: 'Test Message'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render with more-less button', () => {
+    const wrapper = shallowMount(InlineAlert, {
+      propsData: {
+        type: AlertType.Success,
+        message: 'Test Message',
+        details: 'Test Details'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('show close', () => {
+    const wrapper = shallowMount(InlineAlert, {
+      propsData: {
+        type: AlertType.Success,
+        message: 'Test Message',
+        showClose: true
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

+ 196 - 0
desktop/core/src/desktop/js/components/InlineAlert.vue

@@ -0,0 +1,196 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<template>
+  <div :class="['inline-alert', definition.cssClass]">
+    <em
+      v-if="showClose"
+      class="inline-alert-close fa fa-times alert-color"
+      @click="$emit('close')"
+    />
+
+    <em :class="['fa alert-icon alert-color', definition.faClass]" />
+    <div class="inline-alert-title">{{ definition.title }}</div>
+
+    <span class="inline-alert-message">
+      {{ message }}
+    </span>
+
+    <div v-if="showDetails">
+      <a v-if="details" class="more-less-button" @click="showDetails = false">
+        {{ I18n('Less details') }}
+      </a>
+      <pre class="inline-alert-details">
+        {{ details }}
+      </pre>
+    </div>
+    <a v-else-if="details" class="more-less-button" @click="showDetails = true">
+      {{ I18n('More details') }}
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+  import I18n from 'utils/i18n';
+
+  export enum AlertType {
+    Success,
+    Error,
+    Warning,
+    Info,
+    Unknown
+  }
+
+  class AlertDef {
+    title: string;
+    faClass: string;
+    cssClass: string;
+
+    constructor(title: string, faClass: string, cssClass: string) {
+      this.title = I18n(title);
+      this.faClass = faClass;
+      this.cssClass = cssClass;
+    }
+  }
+
+  const UNKNOWN_DEF = new AlertDef('Unknown!', 'fa-question-circle', 'ea-unknown');
+  const TYPE_DEFS: Map<AlertType, AlertDef> = new Map([
+    [AlertType.Success, new AlertDef('Success!', 'fa-check-circle', 'ea-success')],
+    [AlertType.Error, new AlertDef('Error', 'fa-exclamation-circle', 'ea-error')],
+    [AlertType.Warning, new AlertDef('Warning', 'fa-exclamation-triangle', 'ea-warning')],
+    [AlertType.Info, new AlertDef('Info', 'fa-info-circle', 'ea-info')],
+    [AlertType.Unknown, UNKNOWN_DEF]
+  ]);
+
+  @Component({
+    methods: {
+      I18n
+    }
+  })
+  export default class InlineAlert extends Vue {
+    @Prop({ required: true, default: AlertType.Unknown })
+    type!: AlertType;
+
+    @Prop()
+    message!: string;
+    @Prop()
+    details!: string;
+
+    @Prop({ default: false })
+    showClose!: boolean;
+
+    showDetails = false;
+
+    get definition(): AlertDef {
+      return TYPE_DEFS.get(this.type) || UNKNOWN_DEF;
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../components/styles/colors';
+  @import '../components/styles/mixins';
+
+  .inline-alert {
+    position: relative;
+
+    padding: 10px 10px 10px 40px;
+    border-radius: $hue-panel-border-radius;
+
+    // ea-unknown
+    background-color: $fluid-gray-050;
+    border: 1px solid $fluid-gray-500;
+    .alert-color {
+      color: $fluid-gray-500;
+    }
+
+    &.ea-success {
+      background-color: $fluid-green-050;
+      border: 1px solid $fluid-green-400;
+      .alert-color {
+        color: $fluid-green-500;
+      }
+    }
+
+    &.ea-error {
+      background-color: $fluid-red-050;
+      border: 1px solid $fluid-red-400;
+      .alert-color {
+        color: $fluid-red-500;
+      }
+    }
+
+    &.ea-warning {
+      background-color: $fluid-orange-050;
+      border: 1px solid $fluid-orange-400;
+      .alert-color {
+        color: $fluid-orange-500;
+      }
+    }
+
+    &.ea-info {
+      background-color: $fluid-blue-050;
+      border: 1px solid $fluid-blue-400;
+      .alert-color {
+        color: $fluid-blue-500;
+      }
+    }
+
+    .alert-icon {
+      position: absolute;
+      left: 15px;
+      top: 10px;
+
+      font-size: 20px;
+    }
+
+    .inline-alert-close {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+
+      cursor: pointer;
+    }
+
+    .more-less-button {
+      cursor: pointer;
+    }
+
+    .inline-alert-title,
+    .inline-alert-message,
+    .inline-alert-details {
+      color: $fluid-gray-900;
+    }
+
+    .inline-alert-message {
+      margin-right: 5px;
+    }
+
+    .inline-alert-title {
+      font-weight: bold;
+    }
+
+    .inline-alert-details {
+      margin-top: 10px;
+      background-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+</style>

+ 93 - 0
desktop/core/src/desktop/js/components/__snapshots__/InlineAlert.test.ts.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineAlert.vue should render 1`] = `
+<div
+  class="inline-alert ea-success"
+>
+  <!---->
+   
+  <em
+    class="fa alert-icon alert-color fa-check-circle"
+  />
+   
+  <div
+    class="inline-alert-title"
+  >
+    Success!
+  </div>
+   
+  <span
+    class="inline-alert-message"
+  >
+    
+    Test Message
+  
+  </span>
+   
+  <!---->
+</div>
+`;
+
+exports[`InlineAlert.vue should render with more-less button 1`] = `
+<div
+  class="inline-alert ea-success"
+>
+  <!---->
+   
+  <em
+    class="fa alert-icon alert-color fa-check-circle"
+  />
+   
+  <div
+    class="inline-alert-title"
+  >
+    Success!
+  </div>
+   
+  <span
+    class="inline-alert-message"
+  >
+    
+    Test Message
+  
+  </span>
+   
+  <a
+    class="more-less-button"
+  >
+    
+    More details
+  
+  </a>
+</div>
+`;
+
+exports[`InlineAlert.vue show close 1`] = `
+<div
+  class="inline-alert ea-success"
+>
+  <em
+    class="inline-alert-close fa fa-times alert-color"
+  />
+   
+  <em
+    class="fa alert-icon alert-color fa-check-circle"
+  />
+   
+  <div
+    class="inline-alert-title"
+  >
+    Success!
+  </div>
+   
+  <span
+    class="inline-alert-message"
+  >
+    
+    Test Message
+  
+  </span>
+   
+  <!---->
+</div>
+`;