Commit 035560c5 authored by Sam Beckham's avatar Sam Beckham
Browse files

Adds a few UX tweaks after a call with @andyvolpe 

- 8px margins between vulnerability action buttons
- Sentence casing fixes on various parts of the dashboard
- Phrasing alignment between the action buttons and modal (dashboard)
- Renamed "Undo Dismissal" to "Revert Dismissal" (see above)
- Fixed the "more info" button color
parent 675741ab

ee/app/assets/javascripts/security_dashboard/components/app.vue

+4 −4
Original line number Diff line number Diff line
@@ -50,14 +50,14 @@ export default { 
        title: s__('Security Reports|At this time, the security dashboard only supports SAST.'),

        content: `

          <a

            title="${s__('Security Reports|Security Dashboard Documentation')}"

            title="${s__('Security Reports|Security dashboard documentation')}"

            href="${this.dashboardDocumentation}"

            target="_blank"

            rel="noopener

            noreferrer"

          >

            <span class="vertical-align-middle">${s__(

              'Security Reports|Security Dashboard Documentation',

              'Security Reports|Security dashboard documentation',

            )}</span>

            ${spriteIcon('external-link', 's16 vertical-align-middle')}

          </a>
@@ -78,7 +78,7 @@ export default { 
      'fetchVulnerabilitiesCount',

      'createIssue',

      'dismissVulnerability',

      'undoDismissal',

      'revertDismissal',

    ]),

  },

};
@@ -118,7 +118,7 @@ export default { 
      :can-create-feedback-permission="true"

      @createNewIssue="createIssue({ vulnerability: modal.vulnerability })"

      @dismissIssue="dismissVulnerability({ vulnerability: modal.vulnerability })"

      @revertDismissIssue="undoDismissal({ vulnerability: modal.vulnerability })"

      @revertDismissIssue="revertDismissal({ vulnerability: modal.vulnerability })"

    />

  </div>

</template>

ee/app/assets/javascripts/security_dashboard/components/vulnerability_action_buttons.vue

+14 −14
Original line number Diff line number Diff line
@@ -42,7 +42,7 @@ export default { 
      'openModal',

      'createIssue',

      'dismissVulnerability',

      'undoDismissal',

      'revertDismissal',

    ]),

    handleCreateIssue() {

      const { vulnerability } = this;
@@ -52,9 +52,9 @@ export default { 
      const { vulnerability } = this;

      this.dismissVulnerability({ vulnerability, flashError: true });

    },

    handleUndoDismissal() {

    handleRevertDismissal() {

      const { vulnerability } = this;

      this.undoDismissal({ vulnerability, flashError: true });

      this.revertDismissal({ vulnerability, flashError: true });

    },

  },

};
@@ -67,7 +67,7 @@ export default { 
      v-gl-tooltip

      :aria-label="s__('Security Reports|More info')"

      :title="s__('Security Reports|More info')"

      class="btn btn-secondary js-more-info"

      class="btn btn-secondary hint js-more-info"

      type="button"

      @click="openModal({ vulnerability })"

    >
@@ -77,10 +77,10 @@ export default { 
      v-if="canCreateIssue"

      key="create-issue"

      v-gl-tooltip

      :aria-label="s__('Security Reports|New Issue')"

      :aria-label="s__('Security Reports|Create issue')"

      :loading="isCreatingIssue"

      :title="s__('Security Reports|New Issue')"

      container-class="btn btn-inverted btn-success js-create-issue"

      :title="s__('Security Reports|Create issue')"

      container-class="btn btn-inverted btn-success prepend-left-8 js-create-issue"

      type="button"

      @click="handleCreateIssue"

    >
@@ -89,21 +89,21 @@ export default { 
    <template v-if="canDismissVulnerability">

      <loading-button

        v-if="isDismissed"

        key="undo-dismissal"

        :label="s__('Security Reports|Undo Dismissal')"

        key="revert-dismissal"

        :label="s__('Security Reports|Revert dismissal')"

        :loading="isDismissingVulnerability"

        container-class="btn btn-inverted btn-warning js-undo-dismissal"

        container-class="btn btn-inverted btn-warning prepend-left-8 js-revert-dismissal"

        type="button"

        @click="handleUndoDismissal"

        @click="handleRevertDismissal"

      />

      <loading-button

        v-else

        key="dismiss-vulnerability"

        v-gl-tooltip

        :aria-label="s__('Security Reports|Dismiss Vulnerability')"

        :aria-label="s__('Security Reports|Dismiss vulnerability')"

        :loading="isDismissingVulnerability"

        :title="s__('Security Reports|Dismiss Vulnerability')"

        container-class="btn btn-inverted btn-warning js-dismiss-vulnerability"

        :title="s__('Security Reports|Dismiss vulnerability')"

        container-class="btn btn-inverted btn-warning prepend-left-8 js-dismiss-vulnerability"

        type="button"

        @click="handleDismissVulnerability"

      >

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/actions.js

+11 −11
Original line number Diff line number Diff line
@@ -167,37 +167,37 @@ export const receiveDismissVulnerabilityError = ({ commit }, { flashError }) => 
  }

};



export const undoDismissal = ({ dispatch }, { vulnerability, flashError }) => {

export const revertDismissal = ({ dispatch }, { vulnerability, flashError }) => {

  const { vulnerability_feedback_url, dismissal_feedback } = vulnerability;

  // eslint-disable-next-line camelcase

  const url = `${vulnerability_feedback_url}/${dismissal_feedback.id}`;



  dispatch('requestUndoDismissal');

  dispatch('requestRevertDismissal');



  axios

    .delete(url)

    .then(() => {

      const { id } = vulnerability;

      dispatch('receiveUndoDismissalSuccess', { id });

      dispatch('receiveRevertDismissalSuccess', { id });

    })

    .catch(() => {

      dispatch('receiveUndoDismissalError', { flashError });

      dispatch('receiveRevertDismissalError', { flashError });

    });

};



export const requestUndoDismissal = ({ commit }) => {

  commit(types.REQUEST_UNDO_DISMISSAL);

export const requestRevertDismissal = ({ commit }) => {

  commit(types.REQUEST_REVERT_DISMISSAL);

};



export const receiveUndoDismissalSuccess = ({ commit }, payload) => {

  commit(types.RECEIVE_UNDO_DISMISSAL_SUCCESS, payload);

export const receiveRevertDismissalSuccess = ({ commit }, payload) => {

  commit(types.RECEIVE_REVERT_DISMISSAL_SUCCESS, payload);

};



export const receiveUndoDismissalError = ({ commit }, { flashError }) => {

  commit(types.RECEIVE_UNDO_DISMISSAL_ERROR);

export const receiveRevertDismissalError = ({ commit }, { flashError }) => {

  commit(types.RECEIVE_REVERT_DISMISSAL_ERROR);

  if (flashError) {

    createFlash(

      s__('Security Reports|There was an error undoing this dismissal.'),

      s__('Security Reports|There was an error reverting this dismissal.'),

      'alert',

      document.querySelector('.ci-table'),

    );

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/mutation_types.js

+3 −3
Original line number Diff line number Diff line
@@ -18,6 +18,6 @@ export const REQUEST_DISMISS_VULNERABILITY = 'REQUEST_DISMISS_VULNERABILITY'; 
export const RECEIVE_DISMISS_VULNERABILITY_SUCCESS = 'RECEIVE_DISMISS_VULNERABILITY_SUCCESS';

export const RECEIVE_DISMISS_VULNERABILITY_ERROR = 'RECEIVE_DISMISS_VULNERABILITY_ERROR';



export const REQUEST_UNDO_DISMISSAL = 'REQUEST_UNDO_DISMISSAL';

export const RECEIVE_UNDO_DISMISSAL_SUCCESS = 'RECEIVE_UNDO_DISMISSAL_SUCCESS';

export const RECEIVE_UNDO_DISMISSAL_ERROR = 'RECEIVE_UNDO_DISMISSAL_ERROR';
 
export const REQUEST_REVERT_DISMISSAL = 'REQUEST_REVERT_DISMISSAL';

export const RECEIVE_REVERT_DISMISSAL_SUCCESS = 'RECEIVE_REVERT_DISMISSAL_SUCCESS';

export const RECEIVE_REVERT_DISMISSAL_ERROR = 'RECEIVE_REVERT_DISMISSAL_ERROR';

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/mutations.js

+4 −4
Original line number Diff line number Diff line
@@ -101,25 +101,25 @@ export default { 
      s__('Security Reports|There was an error dismissing the vulnerability.'),

    );

  },

  [types.REQUEST_UNDO_DISMISSAL](state) {

  [types.REQUEST_REVERT_DISMISSAL](state) {

    state.isDismissingVulnerability = true;

    Vue.set(state.modal, 'isDismissingVulnerability', true);

    Vue.set(state.modal, 'error', null);

  },

  [types.RECEIVE_UNDO_DISMISSAL_SUCCESS](state, payload) {

  [types.RECEIVE_REVERT_DISMISSAL_SUCCESS](state, payload) {

    const vulnerability = state.vulnerabilities.find(vuln => vuln.id === payload.id);

    vulnerability.dismissal_feedback = null;

    state.isDismissingVulnerability = false;

    Vue.set(state.modal, 'isDismissingVulnerability', false);

    Vue.set(state.modal.vulnerability, 'isDismissed', false);

  },

  [types.RECEIVE_UNDO_DISMISSAL_ERROR](state) {

  [types.RECEIVE_REVERT_DISMISSAL_ERROR](state) {

    state.isDismissingVulnerability = false;

    Vue.set(state.modal, 'isDismissingVulnerability', false);

    Vue.set(

      state.modal,

      'error',

      s__('Security Reports|There was an error undoing the dismissal.'),

      s__('Security Reports|There was an error reverting the dismissal.'),

    );

  },

};