Pārlūkot izejas kodu

HUE-9485 [frontend] Add a Link component

Johan Ahlen 5 gadi atpakaļ
vecāks
revīzija
abb74d2b4c

+ 43 - 0
desktop/core/src/desktop/js/components/Link.test.ts

@@ -0,0 +1,43 @@
+// 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 Link from './Link.vue';
+
+describe('Link.vue', () => {
+  it('should render a Link', () => {
+    const wrapper = shallowMount(Link);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should pass attributes to the a element', () => {
+    const wrapper = shallowMount(Link, {
+      attrs: {
+        target: '_blank'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should not pass href attribute to the a element', () => {
+    const wrapper = shallowMount(Link, {
+      attrs: {
+        href: 'http://gethue.com'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

+ 68 - 0
desktop/core/src/desktop/js/components/Link.vue

@@ -0,0 +1,68 @@
+<!--
+  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>
+  <a href="javsscript:void(0);" @click="clicked"><slot /></a>
+</template>
+
+<script lang="ts">
+  import huePubSub from '../utils/huePubSub';
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+
+  interface hueWindow {
+    HUE_BASE_URL: string;
+  }
+
+  @Component
+  export default class Link extends Vue {
+    @Prop({ required: false })
+    url?: string;
+
+    created(): void {
+      delete this.$attrs.href;
+    }
+
+    clicked(event: Event): void {
+      if (this.url) {
+        if (this.url.indexOf('http') === 0) {
+          window.open(this.url, this.$attrs.target);
+        } else {
+          const prefix =
+            (<hueWindow>window).HUE_BASE_URL + '/hue' + (this.url.indexOf('/') === 0 ? '' : '/');
+          if (this.$attrs.target) {
+            window.open(prefix + this.url, this.$attrs.target);
+          } else if (
+            (<KeyboardEvent>event).ctrlKey ||
+            (<KeyboardEvent>event).metaKey ||
+            (<KeyboardEvent>event).which === 2
+          ) {
+            window.open(prefix + this.url, '_blank');
+          } else {
+            huePubSub.publish('open.link', this.url);
+          }
+        }
+      } else {
+        this.$emit('click');
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>

+ 20 - 0
desktop/core/src/desktop/js/components/__snapshots__/Link.test.ts.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link.vue should not pass href attribute to the a element 1`] = `
+<a
+  href="javsscript:void(0);"
+/>
+`;
+
+exports[`Link.vue should pass attributes to the a element 1`] = `
+<a
+  href="javsscript:void(0);"
+  target="_blank"
+/>
+`;
+
+exports[`Link.vue should render a Link 1`] = `
+<a
+  href="javsscript:void(0);"
+/>
+`;