Geo Nodes Form - Object Storage Beta Badge

This change adds a beta badge
to the Object Storage field
on the Geo Nodes Form.

This badge also links to
the documentation.

Changelog: changed
EE: true

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_selective_sync.vue

 <script>
-import { GlFormGroup, GlFormSelect, GlFormCheckbox, GlSprintf, GlLink } from '@gitlab/ui';
-import { SELECTIVE_SYNC_MORE_INFO, OBJECT_STORAGE_MORE_INFO } from '../constants';
+import { GlFormGroup, GlFormSelect, GlFormCheckbox, GlSprintf, GlLink, GlBadge } from '@gitlab/ui';
+import {
+  SELECTIVE_SYNC_MORE_INFO,
+  OBJECT_STORAGE_MORE_INFO,
+  OBJECT_STORAGE_BETA,
+} from '../constants';
 import GeoNodeFormNamespaces from './geo_node_form_namespaces.vue';
 import GeoNodeFormShards from './geo_node_form_shards.vue';
 
@@ -14,6 +18,7 @@ export default {
     GlFormCheckbox,
     GlSprintf,
     GlLink,
+    GlBadge,
   },
   props: {
     nodeData: {
@@ -47,6 +52,7 @@ export default {
   },
   SELECTIVE_SYNC_MORE_INFO,
   OBJECT_STORAGE_MORE_INFO,
+  OBJECT_STORAGE_BETA,
 };
 </script>
 
@@ -103,7 +109,15 @@ export default {
         @removeSyncOption="removeSyncOption"
       />
     </gl-form-group>
-    <gl-form-group :label="__('Object Storage replication')" label-for="node-object-storage-field">
+    <gl-form-group>
+      <template #label>
+        <label for="node-object-storage-field" class="gl-mb-0">{{
+          __('Object Storage replication')
+        }}</label>
+        <gl-badge variant="info" size="sm" :href="$options.OBJECT_STORAGE_BETA" target="_blank">{{
+          __('Beta')
+        }}</gl-badge>
+      </template>
       <template #description>
         <gl-sprintf
           :message="

ee/app/assets/javascripts/geo_node_form/constants.js

@@ -29,6 +29,11 @@ export const OBJECT_STORAGE_MORE_INFO = helpPagePath(
   'administration/geo/replication/object_storage.html',
 );
 
+export const OBJECT_STORAGE_BETA = helpPagePath(
+  'administration/geo/replication/object_storage.html',
+  { anchor: 'enabling-gitlab-managed-object-storage-replication' },
+);
+
 export const REVERIFICATION_MORE_INFO = helpPagePath(
   'administration/geo/disaster_recovery/background_verification.html',
   { anchor: 'repository-re-verification' },

ee/spec/frontend/geo_node_form/components/geo_node_form_selective_sync_spec.js

-import { GlFormGroup, GlSprintf } from '@gitlab/ui';
+import { GlFormGroup, GlSprintf, GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
 import GeoNodeFormSelectiveSync from 'ee/geo_node_form/components/geo_node_form_selective_sync.vue';
 import GeoNodeFormShards from 'ee/geo_node_form/components/geo_node_form_shards.vue';
-import { SELECTIVE_SYNC_MORE_INFO, OBJECT_STORAGE_MORE_INFO } from 'ee/geo_node_form/constants';
+import {
+  SELECTIVE_SYNC_MORE_INFO,
+  OBJECT_STORAGE_MORE_INFO,
+  OBJECT_STORAGE_BETA,
+} from 'ee/geo_node_form/constants';
 import { MOCK_NODE, MOCK_SELECTIVE_SYNC_TYPES, MOCK_SYNC_SHARDS } from '../mock_data';
 
 describe('GeoNodeFormSelectiveSync', () => {
@@ -39,6 +43,7 @@ describe('GeoNodeFormSelectiveSync', () => {
   const findGeoNodeObjectStorageField = () => wrapper.find('#node-object-storage-field');
   const findGeoNodeFormObjectStorageMoreInformation = () =>
     wrapper.find('[data-testid="objectStorageMoreInfo"]');
+  const findGeoNodeObjectStorageBetaBadge = () => wrapper.findComponent(GlBadge);
 
   describe('template', () => {
     beforeEach(() => {
@@ -69,6 +74,10 @@ describe('GeoNodeFormSelectiveSync', () => {
       );
     });
 
+    it('renders Geo Node Form Object Beta Badge link correctly', () => {
+      expect(findGeoNodeObjectStorageBetaBadge().attributes('href')).toBe(OBJECT_STORAGE_BETA);
+    });
+
     describe.each`
       syncType                                | showNamespaces | showShards
       ${MOCK_SELECTIVE_SYNC_TYPES.ALL}        | ${false}       | ${false}

locale/gitlab.pot

@@ -5409,6 +5409,9 @@ msgstr ""
 msgid "Below you will find all the groups that are public."
 msgstr ""
 
+msgid "Beta"
+msgstr ""
+
 msgid "Bi-weekly code coverage"
 msgstr ""