Disable release button for catalog resources

We are disabling the new release button. Users must publish via cli

Changelog: changed

app/assets/javascripts/releases/components/app_index.vue

 <script>
-import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { historyPushState } from '~/lib/utils/common_utils';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { scrollUp } from '~/lib/utils/scroll_utils';
 import { setUrlParams, getParameterByName } from '~/lib/utils/url_utility';
-import { __, s__ } from '~/locale';
-import { PAGE_SIZE, DEFAULT_SORT } from '~/releases/constants';
+import { i18n, PAGE_SIZE, DEFAULT_SORT } from '~/releases/constants';
 import { convertAllReleasesGraphQLResponse } from '~/releases/util';
 import { popDeleteReleaseNotification } from '~/releases/release_notification_service';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import getCiCatalogSettingsQuery from '~/ci/catalog/graphql/queries/get_ci_catalog_settings.query.graphql';
 import allReleasesQuery from '../graphql/queries/all_releases.query.graphql';
 import ReleaseBlock from './release_block.vue';
@@ -19,6 +18,11 @@ import ReleasesSort from './releases_sort.vue';
 
 export default {
   name: 'ReleasesIndexApp',
+  i18n,
+  links: {
+    alertInfoMessageLink: helpPagePath('ci/yaml/index.html', { anchor: 'release' }),
+    alertInfoPublishLink: helpPagePath('ci/components/index', { anchor: 'release-a-component' }),
+  },
   components: {
     GlAlert,
     GlButton,
@@ -30,6 +34,9 @@ export default {
     ReleasesPagination,
     ReleasesSort,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: {
     projectPath: {
       default: '',
@@ -158,6 +165,11 @@ export default {
     isFullRequestLoaded() {
       return Boolean(!this.isFullRequestLoading && this.fullGraphqlResponse?.data.project);
     },
+    releaseBtnTitle() {
+      return this.isCatalogResource
+        ? this.$options.i18n.catalogResourceReleaseBtnTitle
+        : this.$options.i18n.defaultReleaseBtnTitle;
+    },
     releases() {
       if (this.isFullRequestLoaded) {
         return convertAllReleasesGraphQLResponse(this.fullGraphqlResponse).data;
@@ -245,20 +257,6 @@ export default {
       this.sort = newSort;
     },
   },
-  i18n: {
-    alertButtonLink: helpPagePath('ci/components/index', { anchor: 'release-a-component' }),
-    alertButtonText: __('View the publishing guide'),
-    alertInfoMessage: s__(
-      'CiCatalog|The CI/CD components in this project can be published in the CI/CD Catalog by creating a release. We recommend using the %{linkStart}release%{linkEnd} keyword in a CI/CD job to release new component versions for the Catalog.',
-    ),
-    alertInfoMessageLink: helpPagePath('ci/yaml/index.html', { anchor: 'release' }),
-    alertTitle: __('Publish the CI/CD components in this project to the CI/CD Catalog'),
-    catalogResourceQueryError: s__(
-      'CiCatalog|There was a problem fetching the CI/CD Catalog setting.',
-    ),
-    errorMessage: __('An error occurred while fetching the releases. Please try again.'),
-    newRelease: __('New release'),
-  },
 };
 </script>
 <template>
@@ -266,8 +264,6 @@ export default {
     <gl-alert
       v-if="isCatalogResource"
       :title="$options.i18n.alertTitle"
-      :primary-button-text="$options.i18n.alertButtonText"
-      :primary-button-link="$options.i18n.alertButtonLink"
       :dismissible="false"
       variant="warning"
       class="mb-3 mt-2"
@@ -275,26 +271,38 @@ export default {
       <gl-sprintf :message="$options.i18n.alertInfoMessage">
         <template #link="{ content }">
           <gl-link
-            :href="$options.i18n.alertInfoMessageLink"
+            :href="$options.links.alertInfoMessageLink"
             target="_blank"
-            class="gl-text-decoration-none!"
+            class="gl-text-decoration-none! gl-mr-2"
           >
-            {{ content }}
+            <code class="gl-pr-0">
+              {{ content }}
+            </code>
           </gl-link>
         </template>
       </gl-sprintf>
+      <gl-link :href="$options.links.alertInfoPublishLink" target="_blank">
+        {{ $options.i18n.alertInfoPublishMessage }}
+      </gl-link>
     </gl-alert>
     <releases-empty-state v-if="shouldRenderEmptyState" />
-    <div v-else class="gl-align-self-end gl-mb-3">
+    <div v-else class="gl-align-self-end gl-mb-3 gl-display-flex">
       <releases-sort :value="sort" class="gl-mr-2" @input="onSortChanged" />
 
-      <gl-button
+      <div
         v-if="newReleasePath"
-        :href="newReleasePath"
-        category="primary"
-        variant="confirm"
-        >{{ $options.i18n.newRelease }}</gl-button
+        v-gl-tooltip.hover
+        :title="releaseBtnTitle"
+        data-testid="new-release-btn-tooltip"
       >
+        <gl-button
+          :disabled="isCatalogResource"
+          :href="newReleasePath"
+          category="primary"
+          variant="confirm"
+          >{{ $options.i18n.newRelease }}</gl-button
+        >
+      </div>
     </div>
 
     <release-block

app/assets/javascripts/releases/constants.js

-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export const MAX_MILESTONES_TO_DISPLAY = 5;
 
@@ -51,6 +51,20 @@ export const SORT_MAP = {
 export const DEFAULT_SORT = RELEASED_AT_DESC;
 
 export const i18n = {
+  alertInfoMessage: s__(
+    'CiCatalog|To publish CI/CD components to the Catalog, you must use the %{linkStart}release%{linkEnd} keyword in a CI/CD job.',
+  ),
+  alertInfoPublishMessage: s__('CiCatalog|How do I publish a component?'),
+  alertTitle: s__('CiCatalog|Publish the CI/CD components in this project to the CI/CD Catalog'),
+  catalogResourceReleaseBtnTitle: s__(
+    "CiCatalog|Use the 'release' keyword in a CI/CD job to publish to the CI/CD Catalog.",
+  ),
+  defaultReleaseBtnTitle: __('Create a new release'),
+  catalogResourceQueryError: s__(
+    'CiCatalog|There was a problem fetching the CI/CD Catalog setting.',
+  ),
+  errorMessage: __('An error occurred while fetching the releases. Please try again.'),
+  newRelease: __('New release'),
   tagNameIsRequiredMessage: __('Tag name is required.'),
   tagIsAlredyInUseMessage: __('Selected tag is already in use. Choose another option.'),
 };

locale/gitlab.pot

@@ -10644,6 +10644,9 @@ msgstr ""
 msgid "CiCatalog|Go to the project"
 msgstr ""
+msgid "CiCatalog|How do I publish a component?"
+msgstr ""
+
 msgid "CiCatalog|No component available"
 msgstr ""
@@ -10653,6 +10656,9 @@ msgstr ""
 msgid "CiCatalog|No result found"
 msgstr ""
+msgid "CiCatalog|Publish the CI/CD components in this project to the CI/CD Catalog"
+msgstr ""
+
 msgid "CiCatalog|Readme"
 msgstr ""
@@ -10674,9 +10680,6 @@ msgstr ""
 msgid "CiCatalog|Set component project as a CI/CD Catalog project. %{linkStart}What is the CI/CD Catalog?%{linkEnd}"
 msgstr ""
-msgid "CiCatalog|The CI/CD components in this project can be published in the CI/CD Catalog by creating a release. We recommend using the %{linkStart}release%{linkEnd} keyword in a CI/CD job to release new component versions for the Catalog."
-msgstr ""
-
 msgid "CiCatalog|The project and any released versions will be removed from the CI/CD Catalog. If you re-enable this toggle, the project's existing releases are not re-added to the catalog. You must %{linkStart}create a new release%{linkEnd}."
 msgstr ""
@@ -10698,6 +10701,9 @@ msgstr ""
 msgid "CiCatalog|This project is now a CI/CD Catalog project."
 msgstr ""
+msgid "CiCatalog|To publish CI/CD components to the Catalog, you must use the %{linkStart}release%{linkEnd} keyword in a CI/CD job."
+msgstr ""
+
 msgid "CiCatalog|Unable to remove project as a CI/CD Catalog project."
 msgstr ""
@@ -10707,6 +10713,9 @@ msgstr ""
 msgid "CiCatalog|Unreleased"
 msgstr ""
+msgid "CiCatalog|Use the 'release' keyword in a CI/CD job to publish to the CI/CD Catalog."
+msgstr ""
+
 msgid "CiCatalog|We want to help you create and manage pipeline component repositories, while also making it easier to reuse pipeline configurations. Let us know how we're doing!"
 msgstr ""
@@ -14721,6 +14730,9 @@ msgstr ""
 msgid "Create a new project on GitLab. Store your files, plan your work, and collaborate on code."
 msgstr ""
+msgid "Create a new release"
+msgstr ""
+
 msgid "Create a new repository"
 msgstr ""
@@ -40825,9 +40837,6 @@ msgstr ""
 msgid "Public projects compute cost factor"
 msgstr ""
-msgid "Publish the CI/CD components in this project to the CI/CD Catalog"
-msgstr ""
-
 msgid "Publish to status page"
 msgstr ""
@@ -55532,9 +55541,6 @@ msgstr ""
 msgid "View the latest successful deployment to this environment"
 msgstr ""
-msgid "View the publishing guide"
-msgstr ""
-
 msgid "View trigger token usage examples"
 msgstr ""

spec/frontend/releases/components/app_index_spec.js

@@ -16,7 +16,7 @@ import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader
 import ReleasesEmptyState from '~/releases/components/releases_empty_state.vue';
 import ReleasesPagination from '~/releases/components/releases_pagination.vue';
 import ReleasesSort from '~/releases/components/releases_sort.vue';
-import { PAGE_SIZE, CREATED_ASC, DEFAULT_SORT } from '~/releases/constants';
+import { i18n, PAGE_SIZE, CREATED_ASC, DEFAULT_SORT } from '~/releases/constants';
 import { deleteReleaseSessionKey } from '~/releases/release_notification_service';
 import { generateCatalogSettingsResponse } from '../mock_data';
 
@@ -105,6 +105,7 @@ describe('app_index.vue', () => {
   const findPagination = () => wrapper.findComponent(ReleasesPagination);
   const findSort = () => wrapper.findComponent(ReleasesSort);
   const findCatalogAlert = () => wrapper.findComponent(GlAlert);
+  const findNewReleaseTooltip = () => wrapper.findByTestId('new-release-btn-tooltip');
 
   // Tests
   describe('component states', () => {
@@ -446,6 +447,17 @@ describe('app_index.vue', () => {
       it('renders the CI/CD Catalog alert', () => {
         expect(findCatalogAlert().exists()).toBe(true);
       });
+
+      it('disables the new release button', () => {
+        expect(findNewReleaseButton().attributes('disabled')).toBe('true');
+      });
+
+      it('sets the correct tooltip text', () => {
+        expect(findNewReleaseTooltip().exists()).toBe(true);
+        expect(findNewReleaseTooltip().attributes('title')).toBe(
+          i18n.catalogResourceReleaseBtnTitle,
+        );
+      });
     });
 
     describe('when the project is not a catalog resource', () => {
@@ -457,6 +469,15 @@ describe('app_index.vue', () => {
       it('does not render the CI/CD Catalog alert', () => {
         expect(findCatalogAlert().exists()).toBe(false);
       });
+
+      it('enables the new release button', () => {
+        expect(findNewReleaseButton().attributes('disabled')).toBe(undefined);
+      });
+
+      it('sets the correct tooltip text', () => {
+        expect(findNewReleaseTooltip().exists()).toBe(true);
+        expect(findNewReleaseTooltip().attributes('title')).toBe(i18n.defaultReleaseBtnTitle);
+      });
     });
   });
 });