diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect/components/app.vue')
-rw-r--r-- | app/assets/javascripts/jira_connect/components/app.vue | 57 |
1 files changed, 52 insertions, 5 deletions
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue index 490bf2fdd66..f5bf30f4488 100644 --- a/app/assets/javascripts/jira_connect/components/app.vue +++ b/app/assets/javascripts/jira_connect/components/app.vue @@ -1,16 +1,63 @@ <script> +import { mapState } from 'vuex'; +import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import GroupsList from './groups_list.vue'; + export default { name: 'JiraConnectApp', + components: { + GlAlert, + GlButton, + GlModal, + GroupsList, + }, + directives: { + GlModalDirective, + }, + mixins: [glFeatureFlagsMixin()], computed: { - state() { - return this.$root.$data.state || {}; + ...mapState(['errorMessage']), + showNewUI() { + return this.glFeatures.newJiraConnectUi; }, - error() { - return this.state.error; + }, + modal: { + cancelProps: { + text: __('Cancel'), }, }, }; </script> + <template> - <div></div> + <div> + <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false"> + {{ errorMessage }} + </gl-alert> + + <h1>GitLab for Jira Configuration</h1> + + <div + v-if="showNewUI" + class="gl-display-flex gl-justify-content-space-between gl-my-5 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200" + > + <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3> + <gl-button + v-gl-modal-directive="'add-namespace-modal'" + category="primary" + variant="info" + class="gl-align-self-center" + >{{ s__('Integrations|Add namespace') }}</gl-button + > + <gl-modal + modal-id="add-namespace-modal" + :title="s__('Integrations|Link namespaces')" + :action-cancel="$options.modal.cancelProps" + > + <groups-list /> + </gl-modal> + </div> + </div> </template> |