Add new app for dependency proxy

app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue

+<script>
+import { GlAlert, GlFormGroup, GlFormInputGroup, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { __ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlAlert,
+    GlFormInputGroup,
+    GlSprintf,
+    ClipboardButton,
+    TitleArea,
+  },
+  inject: ['groupPath', 'dependencyProxyAvailable'],
+  i18n: {
+    subTitle: __(
+      'Create a local proxy for storing frequently used upstream images. %{docLinkStart}Learn more%{docLinkEnd} about dependency proxies.',
+    ),
+    proxyNotAvailableText: __('Dependency proxy feature is limited to public groups for now.'),
+    proxyImagePrefix: __('Dependency proxy image prefix'),
+    copyImagePrefixText: __('Copy prefix'),
+    blobCountAndSize: __('Contains %{count} blobs of images (%{size})'),
+  },
+  data() {
+    return {
+      dependencyProxyTotalSize: 0,
+      dependencyProxyImagePrefix: '',
+      dependencyProxyBlobCount: 0,
+    };
+  },
+  computed: {
+    infoMessages() {
+      return [
+        {
+          text: this.$options.i18n.subTitle,
+          link: helpPagePath('user/packages/dependency_proxy/index'),
+        },
+      ];
+    },
+    humanizedTotalSize() {
+      return numberToHumanSize(this.dependencyProxyTotalSize);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <title-area :title="__('Dependency Proxy')" :info-messages="infoMessages" />
+    <gl-alert v-if="!dependencyProxyAvailable" :dismissible="false">
+      {{ $options.i18n.proxyNotAvailableText }}
+    </gl-alert>
+
+    <div v-else data-testid="main-area">
+      <gl-form-group :label="$options.i18n.proxyImagePrefix">
+        <gl-form-input-group
+          readonly
+          :value="dependencyProxyImagePrefix"
+          class="gl-layout-w-limited"
+        >
+          <template #append>
+            <clipboard-button
+              :text="dependencyProxyImagePrefix"
+              :title="$options.i18n.copyImagePrefixText"
+            />
+          </template>
+        </gl-form-input-group>
+        <template #description>
+          <span data-qa-selector="dependency_proxy_count" data-testid="proxy-count">
+            <gl-sprintf :message="$options.i18n.blobCountAndSize">
+              <template #count>{{ dependencyProxyBlobCount }}</template>
+              <template #size>{{ humanizedTotalSize }}</template>
+            </gl-sprintf>
+          </span>
+        </template>
+      </gl-form-group>
+    </div>
+  </div>
+</template>

app/assets/javascripts/packages_and_registries/dependency_proxy/index.js

+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import app from '~/packages_and_registries/dependency_proxy/app.vue';
+import { apolloProvider } from '~/packages_and_registries/package_registry/graphql';
+import Translate from '~/vue_shared/translate';
+
+Vue.use(Translate);
+
+export const initDependencyProxyApp = () => {
+  const el = document.getElementById('js-dependency-proxy');
+  if (!el) {
+    return null;
+  }
+  const { dependencyProxyAvailable, ...dataset } = el.dataset;
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      dependencyProxyAvailable: parseBoolean(dependencyProxyAvailable),
+      ...dataset,
+    },
+    render(createElement) {
+      return createElement(app);
+    },
+  });
+};

locale/gitlab.pot

@@ -9234,6 +9234,9 @@ msgstr ""
 msgid "Copy link to chart"
 msgstr ""
 
+msgid "Copy prefix"
+msgstr ""
+
 msgid "Copy reference"
 msgstr ""
 
@@ -9456,6 +9459,9 @@ msgstr ""
 msgid "Create a Mattermost team for this group"
 msgstr ""
 
+msgid "Create a local proxy for storing frequently used upstream images. %{docLinkStart}Learn more%{docLinkEnd} about dependency proxies."
+msgstr ""
+
 msgid "Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies."
 msgstr ""
 

spec/frontend/packages_and_registries/dependency_proxy/app_spec.js

+import { GlAlert, GlFormInputGroup, GlFormGroup, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import DependencyProxyApp from '~/packages_and_registries/dependency_proxy/app.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+describe('DependencyProxyApp', () => {
+  let wrapper;
+
+  const provideDefaults = {
+    groupPath: 'gitlab-org',
+    dependencyProxyAvailable: true,
+  };
+
+  function createComponent({ provide = provideDefaults } = {}) {
+    wrapper = shallowMountExtended(DependencyProxyApp, {
+      provide,
+      stubs: {
+        GlFormInputGroup,
+        GlFormGroup,
+        GlSprintf,
+      },
+    });
+  }
+
+  const findProxyNotAvailableAlert = () => wrapper.findComponent(GlAlert);
+  const findClipBoardButton = () => wrapper.findComponent(ClipboardButton);
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findFormInputGroup = () => wrapper.findComponent(GlFormInputGroup);
+  const findMainArea = () => wrapper.findByTestId('main-area');
+  const findProxyCountText = () => wrapper.findByTestId('proxy-count');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when the dependency proxy is not available', () => {
+    beforeEach(() => {
+      createComponent({ provide: { ...provideDefaults, dependencyProxyAvailable: false } });
+    });
+
+    it('renders an info alert', () => {
+      expect(findProxyNotAvailableAlert().text()).toBe(
+        DependencyProxyApp.i18n.proxyNotAvailableText,
+      );
+    });
+
+    it('does not render the main area', () => {
+      expect(findMainArea().exists()).toBe(false);
+    });
+  });
+
+  describe('when the dependency proxy is available', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not render the info alert', () => {
+      expect(findProxyNotAvailableAlert().exists()).toBe(false);
+    });
+
+    it('renders the main area', () => {
+      expect(findMainArea().exists()).toBe(true);
+    });
+
+    it('renders a form group with a label', () => {
+      expect(findFormGroup().attributes('label')).toBe(DependencyProxyApp.i18n.proxyImagePrefix);
+    });
+
+    it('renders a form input group', () => {
+      expect(findFormInputGroup().exists()).toBe(true);
+    });
+
+    it('form input group has a clipboard button', () => {
+      expect(findClipBoardButton().exists()).toBe(true);
+    });
+
+    it('from group has a description with proxy count', () => {
+      expect(findProxyCountText().text()).toBe('Contains 0 blobs of images (0 bytes)');
+    });
+  });
+});