pleno-vue/src/components/release/ReleaseManagerShell.vue

<script setup>
import ReleaseContextBar from "@/components/release/ReleaseContextBar.vue";
import ReleaseRouteTabs from "@/components/release/ReleaseRouteTabs.vue";

defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  activePanel: {
    type: String,
    default: "overview",
  },
  channels: {
    type: Array,
    default: () => [],
  },
  selectedChannelSlug: {
    type: String,
    default: "",
  },
  selectedApp: {
    type: String,
    default: "all",
  },
  selectedBranch: {
    type: String,
    default: "master",
  },
  branchOptions: {
    type: Array,
    default: () => [],
  },
  branchStatus: {
    type: Object,
    default: () => ({}),
  },
  runtimeSource: {
    type: String,
    default: "",
  },
  runtimeApiBaseUrl: {
    type: String,
    default: "",
  },
  runtimeFrontendBaseUrl: {
    type: String,
    default: "",
  },
  busy: {
    type: String,
    default: "",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  refreshing: {
    type: Boolean,
    default: false,
  },
  loadingText: {
    type: String,
    default: "Loading Release Manager...",
  },
  refreshingText: {
    type: String,
    default: "Refreshing release data...",
  },
  canDeploy: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "navigate",
  "update:channel",
  "update:app",
  "update:branch",
  "test",
  "sync",
  "refresh",
  "open-entity",
]);
</script>

<template>
  <section class="release-manager-workspace" data-testid="release-manager-workspace" :aria-busy="loading || refreshing">
    <ReleaseContextBar
      :channels="channels"
      :selected-channel-slug="selectedChannelSlug"
      :selected-app="selectedApp"
      :selected-branch="selectedBranch"
      :branch-options="branchOptions"
      :branch-status="branchStatus"
      :runtime-source="runtimeSource"
      :runtime-api-base-url="runtimeApiBaseUrl"
      :runtime-frontend-base-url="runtimeFrontendBaseUrl"
      :busy="busy"
      :loading="loading"
      :refreshing="refreshing"
      :loading-text="loadingText"
      :can-deploy="canDeploy"
      @update:channel="(value) => emit('update:channel', value)"
      @update:app="(value) => emit('update:app', value)"
      @update:branch="(value) => emit('update:branch', value)"
      @test="emit('test')"
      @sync="(channel) => emit('sync', channel)"
      @refresh="emit('refresh')"
      @open-entity="(payload) => emit('open-entity', payload)"
    />
    <ReleaseRouteTabs :tabs="tabs" :active-key="activePanel" @navigate="(panel) => emit('navigate', panel)" />
    <div
      class="release-manager-workspace__refreshing"
      :class="{ 'release-manager-workspace__refreshing--active': refreshing && !loading }"
      data-testid="release-manager-refreshing"
      role="status"
      aria-live="polite"
      :aria-hidden="!(refreshing && !loading)"
    >
      <template v-if="refreshing && !loading">
        <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
        <span>{{ refreshingText }}</span>
      </template>
    </div>
    <main class="release-manager-workspace__panel" :data-active-panel="activePanel">
      <slot />
    </main>
    <slot name="overlays" />
  </section>
</template>

<style scoped>
.release-manager-workspace {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: calc(100vh - 11rem);
  min-height: 42rem;
  overflow: hidden;
}

.release-manager-workspace__refreshing {
  align-items: center;
  background: transparent;
  border-bottom: 0 solid transparent;
  color: #17416f;
  display: flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.45rem;
  min-height: 0;
  overflow: hidden;
  padding: 0 0.75rem;
}

.release-manager-workspace__refreshing--active {
  background: #eef6ff;
  border-bottom-color: #cfe3ff;
  border-bottom-width: 1px;
  min-height: 2.35rem;
  padding-bottom: 0.45rem;
  padding-top: 0.45rem;
}

.release-manager-workspace__panel {
  background: #eef3f8;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
}

@media (max-width: 768px) {
  .release-manager-workspace {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .release-manager-workspace__panel {
    overflow: visible;
  }
}
</style>