All files / app/assets/javascripts/pipeline_editor/components/drawer pipeline_editor_drawer.vue

96.55% Statements 28/29
91.67% Branches 11/12
100% Functions 11/11
96.55% Lines 28/29

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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124  3x 3x 3x 3x 3x 3x 3x 3x 3x                                         14x             28x     28x     28x 28x 28x   28x       14x 14x           14x   13x     1x             14x 14x 11x       14x   14x         7x         94x                                                                      
<script>
import { GlButton, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import { experiment } from '~/experimentation/utils';
import { DRAWER_EXPANDED_KEY } from '../../constants';
import FirstPipelineCard from './cards/first_pipeline_card.vue';
import GettingStartedCard from './cards/getting_started_card.vue';
import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
export default {
  width: {
    expanded: '482px',
    collapsed: '58px',
  },
  i18n: {
    toggleTxt: __('Collapse'),
  },
  localDrawerKey: DRAWER_EXPANDED_KEY,
  components: {
    FirstPipelineCard,
    GettingStartedCard,
    GlButton,
    GlIcon,
    LocalStorageSync,
    PipelineConfigReferenceCard,
    VisualizeAndLintCard,
  },
  data() {
    return {
      isExpanded: false,
      topPosition: 0,
    };
  },
  computed: {
    buttonIconName() {
      return this.isExpanded ? 'chevron-double-lg-right' : 'chevron-double-lg-left';
    },
    buttonClass() {
      return this.isExpanded ? 'gl-justify-content-end!' : '';
    },
    rootStyle() {
      const { expanded, collapsed } = this.$options.width;
      const top = this.topPosition;
      const style = { top: `${top}px` };
 
      return this.isExpanded ? { ...style, width: expanded } : { ...style, width: collapsed };
    },
  },
  mounted() {
    this.setTopPosition();
    this.setInitialExpandState();
  },
  methods: {
    setInitialExpandState() {
      let isExpanded;
 
      experiment('pipeline_editor_walkthrough', {
        control: () => {
          isExpanded = true;
        },
        candidate: () => {
          isExpanded = false;
        },
      });
 
      // We check in the local storage and if no value is defined, we want the default
      // to be true. We want to explicitly set it to true here so that the drawer
      // animates to open on load.
      const localValue = localStorage.getItem(this.$options.localDrawerKey);
      if (localValue === null) {
        this.isExpanded = isExpanded;
      }
    },
    setTopPosition() {
      const navbarEl = document.querySelector('.js-navbar');
 
I      if (navbarEl) {
        this.topPosition = navbarEl.getBoundingClientRect().bottom;
      }
    },
    toggleDrawer() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
<template>
  <local-storage-sync v-model="isExpanded" :storage-key="$options.localDrawerKey" as-json>
    <aside
      aria-live="polite"
      class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-200 gl-overflow-y-auto"
      :style="rootStyle"
    >
      <gl-button
        category="tertiary"
        class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
        :class="buttonClass"
        :title="__('Toggle sidebar')"
        data-qa-selector="toggle_sidebar_collapse_button"
        @click="toggleDrawer"
      >
        <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">
          {{ __('Collapse') }}
        </span>
        <gl-icon data-testid="toggle-icon" :name="buttonIconName" />
      </gl-button>
      <div
        v-if="isExpanded"
        class="gl-h-full gl-p-5"
        data-testid="drawer-content"
        data-qa-selector="drawer_content"
      >
        <getting-started-card class="gl-mb-4" />
        <first-pipeline-card class="gl-mb-4" />
        <visualize-and-lint-card class="gl-mb-4" />
        <pipeline-config-reference-card />
        <div class="gl-h-13"></div>
      </div>
    </aside>
  </local-storage-sync>
</template>