bfg-common 1.3.467 → 1.3.468

package/components/common/layout/theHeader/helpMenu/helpMenuNew/HelpMenuNew.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="help-menu-content">
+    <button
+      id="help-menu-dropdown-toggle"
+      data-id="help-menu-dropdown-toggle"
+      class="help-menu-dropdown-toggle"
+      @click="isShowDropdown = !isShowDropdown"
+    >
+      <span class="help-icon-container">
+        <ui-icon-icon3 name="help" width="24" height="24" />
+      </span>
+      <span class="arrow-icon-container">
+        <ui-icon name="arrow2" width="16" height="8" />
+      </span>
+    </button>
+  </div>
+  <ui-dropdown
+    test-id="help-menu-dropdown"
+    :show="isShowDropdown"
+    :items="dropdownItems"
+    width="max-content"
+    elem-id="help-menu-dropdown-toggle"
+    @select="onSelectDropdown"
+    @hide="onHideDropdown"
+  />
+
+  <common-layout-the-header-feedback
+    :is-show-feedback="isShowFeedback"
+    @show="isShowFeedback = true"
+    @hide="isShowFeedback = false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu'
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowFeedback = ref<boolean>(false)
+
+const isShowDropdown = ref<boolean>(false)
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  helpMenuFunc(localization.value)
+)
+
+const onHideDropdown = (): void => {
+  isShowDropdown.value = false
+}
+
+const onSelectDropdown = (value: string): void => {
+  switch (value) {
+    case 'sendFeedback':
+      isShowFeedback.value = true
+      break
+    default:
+      emits('select-dropdown', value)
+  }
+  onHideDropdown()
+}
+</script>
+
+<style scoped lang="scss">
+.help-menu-content {
+  .help-menu-dropdown-toggle {
+    border: unset;
+    padding: 0;
+    outline: unset;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      .help-icon-container {
+        :deep(svg) {
+          color: #ffffff;
+        }
+      }
+      .arrow-icon-container {
+        color: #ffffff;
+      }
+    }
+
+    .help-icon-container {
+      display: flex;
+      margin-right: 10px;
+
+      :deep(svg) {
+        color: #d3d6da;
+      }
+    }
+    .arrow-icon-container {
+      display: flex;
+      transform: rotate(90deg);
+      color: #d3d6da;
+    }
+  }
+
+  :deep(span.nav-icon) {
+    padding: 0 !important;
+  }
+}
+#dropdown-help-menu-dropdown {
+  margin-top: 17px;
+}
+</style>

package/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu.ts

@@ -0,0 +1,25 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+
+export const helpMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_Dropdown[] => {
+  return [
+    {
+      text: localization.help,
+      value: 'help',
+      testId: 'information-menu-help',
+    },
+    {
+      text: localization.about,
+      value: 'about',
+      testId: 'information-menu-about',
+      divider: true,
+    },
+    {
+      text: localization.sendFeedback,
+      value: 'sendFeedback',
+      testId: 'information-menu-send-feedback',
+    },
+  ]
+}

package/components/common/layout/theHeader/helpMenu/helpMenuOld/HelpMenuOld.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="tid-control-bar-help-menu help-menu">
+    <atoms-dropdown
+      test-id="help-menu-dropdown"
+      :drop-menu="helpMenu"
+      @select="emits('select-dropdown', $event.action)"
+    >
+      <template #icon>
+        <atoms-the-icon class="help-icon" name="help-icon" />
+      </template>
+    </atoms-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
+import { helpMenuFunc } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu'
+
+const emits = defineEmits<{
+  (event: 'select-dropdown', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const helpMenu = computed<UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[]>(() =>
+  helpMenuFunc(localization.value)
+)
+</script>
+
+<style lang="scss">
+.help-menu {
+  .help-icon {
+    width: 24px;
+    height: 24px;
+    margin: 0 6px 0 9px;
+    stroke: none;
+    fill: #fafafa;
+  }
+}
+.about-vsphere-dialog-legal-section {
+  color: var(--description-color);
+  a {
+    color: var(--link-visited-color);
+  }
+}
+
+.separator {
+  content: '';
+  border-left: 1px solid #ccc;
+  margin: 0 18px;
+  height: 22px;
+}
+.close-icon {
+  fill: var(--close-icon);
+  width: 24px;
+  height: 24px;
+}
+
+:root {
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+}
+
+:root.dark-theme {
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+}
+</style>

package/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu.ts

@@ -0,0 +1,22 @@
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_ActionTypeHelpMenu } from '~/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types'
+
+export const helpMenuFunc = (
+  localization: UI_I_Localization
+): UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[] => {
+  return [
+    {
+      text: localization.help,
+      action: 'help',
+      closeAfterClick: true,
+      testId: 'information-menu-help',
+    },
+    {
+      text: localization.about,
+      action: 'about',
+      closeAfterClick: true,
+      testId: 'information-menu-about',
+    },
+  ]
+}

package/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_ActionTypeHelpMenu = 'help' | 'about'

package/components/common/layout/theHeader/lib/models/types.ts

@@ -0,0 +1,5 @@
+export type UI_T_ActionTypeUserMenu =
+  | 'popup'
+  | 'logout'
+  | 'themeMode'
+  | 'popupPreferences'

package/components/common/layout/theHeader/modals/Reconnect.vue

@@ -0,0 +1,98 @@
+<template>
+  <atoms-modal
+    test-id="connection-timeout-reconnect-modal"
+    width="580px"
+    :show="isShow"
+    :title="localization.connectionTimeout"
+    class="connection-timeout"
+    is-hide-close-icon
+  >
+    <template #modalBody>
+      <div class="connection-timeout__body">
+        <span>{{ localization.yourSessionExpireAfter }}:</span>
+        <common-countdown-timer :timer="timer" :total-time="totalTime" />
+      </div>
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="logout-button"
+        data-id="logout-button"
+        class="btn btn-outline"
+        @click="onLogout"
+      >
+        {{ localization.logout }}
+      </button>
+
+      <button
+        id="reconnect-button"
+        data-id="reconnect-button"
+        class="btn btn-primary"
+        @click="onReconnect"
+      >
+        {{ localization.reconnect }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isShow = computed<boolean>(
+  () => $store.getters['main/isShowReconnectModal']
+)
+const hideModal = (): void => {
+  $store.dispatch('main/A_SHOW_RECONNECT_MODAL', false)
+}
+
+const totalTime = ref<number>(60)
+const timer = ref<NodeJS.Timer | null>(null)
+const countdown = (): void => {
+  totalTime.value--
+  if (totalTime.value === 0) {
+    endTimer()
+  }
+}
+const startTimer = (): void => {
+  timer.value = setInterval(() => countdown(), 1000)
+}
+const endTimer = (): void => {
+  onLogout()
+}
+const onLogout = async (): Promise<void> => {
+  await $store.dispatch('auth/A_LOGOUT')
+  resetTimer()
+  hideModal()
+}
+const onReconnect = async (): Promise<void> => {
+  location.reload()
+  // await $store.dispatch('auth/A_REFRESH')
+  resetTimer()
+  hideModal()
+}
+
+const resetTimer = (): void => {
+  timer.value !== null && clearInterval(timer.value)
+  totalTime.value = 60
+}
+watch(
+  isShow,
+  (newValue) => {
+    newValue && startTimer()
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.connection-timeout {
+  &__body {
+    text-align: center;
+    margin: 15px 0;
+  }
+}
+</style>

package/components/common/layout/theHeader/modals/RedirectLogin.vue

@@ -0,0 +1,60 @@
+<template>
+  <atoms-modal
+    test-id="connection-timeout-modal"
+    width="580px"
+    :show="isShow"
+    :title="localization.connectionTimeout"
+    class="connection-timeout"
+    is-hide-close-icon
+  >
+    <template #modalBody>
+      <div class="connection-timeout__body">
+        <atoms-alert
+          v-show="true"
+          test-id="connection-timeout-alert"
+          status="alert-danger"
+          :items="[localization.connectionTimeoutErrorDesc]"
+          hide-close-icon
+        />
+      </div>
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="redirect-login-page-button"
+        data-id="redirect-login-page-button"
+        class="btn btn-primary"
+        @click="onRedirectLoginPage"
+      >
+        {{ localization.login }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isShow = computed<boolean>(
+  () => $store.getters['main/isShowRedirectLoginModal']
+)
+const hideModal = (): void => {
+  $store.dispatch('main/A_SHOW_REDIRECT_LOGIN_MODAL', false)
+}
+const onRedirectLoginPage = async (): Promise<void> => {
+  await $store.dispatch('auth/A_LOGOUT')
+
+  hideModal()
+}
+</script>
+
+<style lang="scss" scoped>
+.connection-timeout {
+  &__body {
+    margin: 40px 0;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/UserMenu.vue

@@ -0,0 +1,95 @@
+<template>
+  <common-layout-the-header-user-menu-user-menu-new
+    v-if="isNewView"
+    :hostname="props.hostname"
+    @select-dropdown="onSelectDropdown"
+  />
+  <common-layout-the-header-user-menu-user-menu-old
+    v-else
+    :hostname="props.hostname"
+    @select-dropdown="onSelectDropdown"
+  />
+
+  <Teleport to="body">
+    <common-layout-the-header-user-menu-modals-change-password
+      :show="isChangePassword"
+      :hostname="props.hostname"
+      :project="props.project"
+      @hide="isChangePassword = false"
+    />
+
+    <common-layout-the-header-user-menu-modals-preferences
+      v-if="props.isPreference"
+      :time-format="props.timeFormat"
+      :user="props.userFromStore"
+      :new-view="props.newView"
+      :selected-language-type="props.selectedLanguageType"
+      :selected-language="props.selectedLanguage"
+      :project="props.project"
+      @hide="emits('hide-preference')"
+      @update-time-format="emits('update-time-format', $event)"
+      @update-language="emits('update-language', $event)"
+      @update-language-type="emits('update-language-type', $event)"
+      @update-is-browser="emits('update-is-browser', $event)"
+      @update-is-new-view="emits('update-is-new-view', $event)"
+      @submit="emits('submit-preferences')"
+    />
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_LangValue } from '~/lib/models/types'
+import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+
+const props = defineProps<{
+  hostname: string
+  project: string
+  isPreference: boolean
+  newView: boolean
+  timeFormat: UI_T_TimeValue
+  selectedLanguageType: UI_T_LangValue
+  selectedLanguage: UI_T_LangValue
+  userFromStore?: UI_I_User
+}>()
+const emits = defineEmits<{
+  (event: 'show-preference'): void
+  (event: 'hide-preference'): void
+  (event: 'change-theme-mode'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language', value: string): void
+  (event: 'update-language-type', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit-preferences'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const isChangePassword = ref<boolean>(false)
+
+const onLogout = async (): Promise<void> => {
+  await $store.dispatch('auth/A_LOGOUT', null)
+}
+
+const onSelectDropdown = (value: string): void => {
+  switch (value) {
+    case 'changePassword':
+      isChangePassword.value = true
+      break
+    case 'preferences':
+      emits('show-preference')
+      break
+    case 'themeMode':
+      emits('change-theme-mode')
+      break
+    case 'logout':
+      onLogout()
+      break
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/layout/theHeader/userMenu/lib/models/interfaces.ts

@@ -0,0 +1,32 @@
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+import type { UI_T_ActionTypeUserMenu } from '~/components/common/layout/theHeader/lib/models/types'
+
+export interface UI_I_ProfileDropMenu
+  extends UI_I_DropMenu<UI_T_ActionTypeUserMenu> {}
+
+export interface UI_I_RadioItem {
+  id: number
+  label: string
+  value: string
+  testId: string
+}
+
+export interface UI_I_UserPreferences {
+  time_format: string
+  vm_in_hosts_clusters: boolean
+  dark_color_theme: boolean
+  language: string
+  remote_console: string
+  new_view: boolean
+}
+
+export interface UI_I_User {
+  id: string
+  first_name: string
+  last_name: string
+  email: string
+  username: string
+  description: string
+  enabled: boolean
+  ui_options: UI_I_UserPreferences
+}