Migrate how we import our status page components / styles for @gitlab/ui

Why this issue is being opened

During the build of the status page, we opted to make two choices for handling imports:

1. We imported components directly from the dist folder. This was done in an attempt to keep the general project size as small as possible and avoid extra libs i.e. pikiday && moment.

import GlButton from `@gitlab/ui/dist/.../.../button`

2. We imported our global styles in a particular fashion of favouring @gitlab/ui styles before bootstrap styles. This seems like it was the incorrect approach based on this comment: !45 (comment 313058756)

@import 'gitlab_ui';
@import 'bootstrap';
@import 'bootstrap-vue';
@import 'common';

How we are using this issue

This issue is being used as:

1. A blanket to discuss a few issues(namely #22 (closed) )
2. A road map for the solutions in terms of both a refractor and bug fix's.

So we're basing this on a handful of comments:

1. !21 (comment 302997368)
2. !45 (comment 313058756)

Action taken to close this issue

Note

The proposed solution has been broken into 3 MRs, each of which addresses a separate point to complete the migration in what I would hope is a painless process.

1. To ensure our component imports are handled correctly i.e. the same as the GitLab project, we shift to importing local components directly and importing GitLab UI components in the same fashion as the GitLab project.

import { GlTooltip, GlLoadingIcon, GlAlert, GlBadge, GlIcon } from '@gitlab/ui';
import GlMarkdown from '../components/markdown.vue';

• !50 (merged) => Handles @gitlab/ui components inside *.vue files
• !51 (merged) => Handles @gitlab/ui components inside *_spec.js files

• !52 (merged) => Handles correct ordering of styles based on this comment

@import 'bootstrap';
@import 'bootstrap-vue';
@import 'gitlab_ui';
@import 'common';

Pros:

1. We now import components in a common and understood fashion.
2. We get the correct component wrapping for styles and classes.

Cons:

1. We need to import one extra lib: pikiday
2. We either need to ignore, import or live with the moment.js error from pikiday:

Module not found: Error: Can't resolve 'moment' in '/Users/davidoregan/dev/gitlab/status-page/node_modules/pikaday'