Hide personal snippet creation UI when allow_personal_snippets setting is disabled

Problem

Currently, when the allow_personal_snippets enterprise group setting is disabled, users can still see the UI for creating personal snippets. While the backend prevents the actual creation, the frontend should hide these UI elements to provide a better user experience and make the restriction clear upfront.

Proposal

We should hide the personal snippet creation buttons and UI elements from the frontend when the allow_personal_snippets setting is disabled, similar to how the can_create_group property controls the visibility of group creation buttons.

Example Implementation

The can_create_group property provides a good pattern to follow:

1. Backend: The policy system checks user permissions and passes can_create_group to the frontend via a helper method
2. Frontend: A Vue component (app/assets/javascripts/organizations/shared/components/new_group_button.vue) uses this property to conditionally render the button

Reference: new_group_button.vue

<script>
export default {
  inject: ['canCreateGroup', 'newGroupPath'],
  computed: {
    showButton() {
      return this.canCreateGroup && this.newGroupPath;
    },
  },
};
</script>

<template>
  <gl-button v-if="showButton" :href="newGroupPath" variant="confirm">
    {{ $options.i18n.newGroup }}
  </gl-button>
</template>

Implementation Steps

1. Add allow_personal_snippets property to the frontend data passed from the backend (similar to can_create_group)
2. Identify all UI components that allow personal snippet creation
3. Update these components to conditionally render based on the allow_personal_snippets property
4. Add tests to verify the UI is hidden when the setting is disabled

Documentation

• Personal Snippets
• Restrict group and project creation for enterprise users

Related

• Feature flag: allow_personal_snippets_setting (ee/config/feature_flags/wip/allow_personal_snippets_setting.yml)