All files / src/components/Common BuildInfoBadge.vue

93.33% Statements 14/15
90% Branches 9/10
100% Functions 2/2
93.33% Lines 14/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68    5x                                 3x     2x 2x       2x 1x   1x 1x               3x 3x 3x 3x   3x     3x                                        
<template>
  <p
    v-if="label"
    class="build-info"
    aria-hidden="true"
  >
    {{ label }}
  </p>
</template>
 
<script lang="ts" setup>
import { onMounted, ref } from "vue";
 
import {
  isProductionBuild,
  resolveBuildInfoLabel,
  runtimeConfigUrl,
} from "@/utils/buildInfo";
 
const label = ref<string | null>(null);
 
async function readZmsEnv(): Promise<string | undefined> {
  try {
    const response = await fetch(runtimeConfigUrl(import.meta.url), {
      cache: "no-store",
      signal: AbortSignal.timeout(2000),
    });
    if (!response.ok) {
      return undefined;
    }
    const data = (await response.json()) as { ZMS_ENV?: unknown };
    return typeof data.ZMS_ENV === "string" && data.ZMS_ENV.trim()
      ? data.ZMS_ENV.trim()
      : undefined;
  } catch {
    return undefined;
  }
}
 
onMounted(async () => {
  const commit = import.meta.env.VITE_GIT_COMMIT;
  const gitRef = import.meta.env.VITE_GIT_REF;
  const viteNodeEnv = import.meta.env.VITE_NODE_ENV;
 
  const zmsEnv = isProductionBuild(viteNodeEnv)
    ? await readZmsEnv()
    : undefined;
  label.value = resolveBuildInfoLabel(commit, gitRef, viteNodeEnv, zmsEnv);
});
</script>
 
<style scoped>
.build-info {
  position: relative;
  float: right;
  margin: 0 24px 0 0;
  font-size: 11px;
  line-height: 1.2;
  color: #c4c4c4;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
</style>