Generate JHipster 9.3.0 baseline application

src/main/webapp/app/core/ribbon/ribbon.component.spec.ts

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { createTestingPinia } from '@pinia/testing';
+import { shallowMount } from '@vue/test-utils';
+
+import { type AccountStore, useStore } from '@/store';
+
+import Ribbon from './ribbon.vue';
+
+type RibbonComponentType = InstanceType<typeof Ribbon>;
+
+const pinia = createTestingPinia({ stubActions: false });
+
+describe('Ribbon', () => {
+  let ribbon: RibbonComponentType;
+  let store: AccountStore;
+
+  beforeEach(async () => {
+    const wrapper = shallowMount(Ribbon, {
+      global: {
+        plugins: [pinia],
+      },
+    });
+    ribbon = wrapper.vm;
+    await ribbon.$nextTick();
+    store = useStore();
+    store.setRibbonOnProfiles(null);
+  });
+
+  it('should not have ribbonEnabled when no data', () => {
+    expect(ribbon.ribbonEnabled).toBeFalsy();
+  });
+
+  it('should have ribbonEnabled set to value in store', () => {
+    const profile = 'dev';
+    store.setActiveProfiles(['foo', profile, 'bar']);
+    store.setRibbonOnProfiles(profile);
+    expect(ribbon.ribbonEnabled).toBeTruthy();
+  });
+
+  it('should not have ribbonEnabled when profile not activated', () => {
+    const profile = 'dev';
+    store.setActiveProfiles(['foo', 'bar']);
+    store.setRibbonOnProfiles(profile);
+    expect(ribbon.ribbonEnabled).toBeFalsy();
+  });
+});

src/main/webapp/app/core/ribbon/ribbon.component.ts

@@ -0,0 +1,19 @@
+import { computed, defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useStore } from '@/store';
+
+export default defineComponent({
+  name: 'Ribbon',
+  setup() {
+    const store = useStore();
+    const ribbonEnv = computed(() => store.ribbonOnProfiles);
+    const ribbonEnabled = computed(() => store.ribbonOnProfiles && store.activeProfiles.indexOf(store.ribbonOnProfiles) > -1);
+
+    return {
+      ribbonEnv,
+      ribbonEnabled,
+      t$: useI18n().t,
+    };
+  },
+});

src/main/webapp/app/core/ribbon/ribbon.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ribbon" v-if="ribbonEnabled">
+    <a href="">{{ t$('global.ribbon.' + ribbonEnv) }}</a>
+  </div>
+</template>
+
+<script lang="ts" src="./ribbon.component.ts"></script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+/* ==========================================================================
+Development Ribbon
+========================================================================== */
+.ribbon {
+  background-color: rgba(170, 0, 0, 0.5);
+  left: -3.5em;
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  overflow: hidden;
+  position: absolute;
+  top: 40px;
+  white-space: nowrap;
+  width: 15em;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.75;
+}
+
+.ribbon a {
+  color: #fff;
+  display: block;
+  font-weight: 400;
+  margin: 1px 0;
+  padding: 10px 50px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 0 5px #444;
+  pointer-events: none;
+}
+</style>