Move fetch settings error to alert

- remove toast
- add alert
- adjust tests

app/assets/javascripts/registry/settings/components/registry_settings_app.vue

@@ -18,14 +18,23 @@ export default {
     unavailableFeatureText: s__(
       'ContainerRegistry|Currently, the Container Registry tag expiration feature is not available for projects created before GitLab version 12.8. For updates and more information, visit Issue %{linkStart}#196124%{linkEnd}',
     ),
+    fetchSettingsErrorText: FETCH_SETTINGS_ERROR_MESSAGE,
+  },
+  data() {
+    return {
+      fetchSettingsError: false,
+    };
   },
   computed: {
     ...mapState(['isDisabled']),
+    showSettingForm() {
+      return !this.isDisabled && !this.fetchSettingsError;
+    },
   },
   mounted() {
-    this.fetchSettings().catch(() =>
-      this.$toast.show(FETCH_SETTINGS_ERROR_MESSAGE, { type: 'error' }),
-    );
+    this.fetchSettings().catch(() => {
+      this.fetchSettingsError = true;
+    });
   },
   methods: {
     ...mapActions(['fetchSettings']),
@@ -48,17 +57,22 @@ export default {
         }}
       </li>
     </ul>
-    <settings-form v-if="!isDisabled" />
-    <gl-alert v-else :dismissible="false">
-      <p>
-        <gl-sprintf :message="$options.i18n.unavailableFeatureText">
-          <template #link="{content}">
-            <gl-link href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank">
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </gl-alert>
+    <settings-form v-if="showSettingForm" />
+    <template v-else>
+      <gl-alert v-if="isDisabled" :dismissible="false">
+        <p>
+          <gl-sprintf :message="$options.i18n.unavailableFeatureText">
+            <template #link="{content}">
+              <gl-link href="https://gitlab.com/gitlab-org/gitlab/issues/196124" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </gl-alert>
+      <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false">
+        <gl-sprintf :message="$options.i18n.fetchSettingsErrorText" />
+      </gl-alert>
+    </template>
   </div>
 </template>

changelogs/unreleased/199998-container-expiration-policy-settings-hide-form-on-api-error-2.yml

+---
+title: Container expiration policy settings hide form on API error
+merge_request: 26303
+author:
+type: fixed

spec/frontend/registry/settings/components/registry_settings_app_spec.js

@@ -44,15 +44,6 @@ describe('Registry Settings App', () => {
     expect(store.dispatch).toHaveBeenCalledWith('fetchSettings');
   });
 
-  it('show a toast if fetchSettings fails', () => {
-    mountComponent({ dispatchMock: 'mockRejectedValue' });
-    return wrapper.vm.$nextTick().then(() =>
-      expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(FETCH_SETTINGS_ERROR_MESSAGE, {
-        type: 'error',
-      }),
-    );
-  });
-
   it('renders the setting form', () => {
     mountComponent();
     expect(findSettingsComponent().exists()).toBe(true);
@@ -68,7 +59,23 @@ describe('Registry Settings App', () => {
     });
 
     it('shows an alert', () => {
-      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().html()).toContain(
+        'Currently, the Container Registry tag expiration feature is not available',
+      );
+    });
+  });
+
+  describe('fetchSettingsError', () => {
+    beforeEach(() => {
+      mountComponent({ dispatchMock: 'mockRejectedValue' });
+    });
+
+    it('the form is hidden', () => {
+      expect(findSettingsComponent().exists()).toBe(false);
+    });
+
+    it('shows an alert', () => {
+      expect(findAlert().html()).toContain(FETCH_SETTINGS_ERROR_MESSAGE);
     });
   });
 });