Refactor additional metadata component in package details
The following discussion from !69967 (merged) should be addressed:
-
@pgascouvaillancourt started a discussion: (+1 comment) thought: This is unrelated, but this component seems to be getting a bit hard to read with this big
v-if
/v-else-if
🤔 Have we considered refactoring it by abstracting the metadata out into dedicated components? We could then leverage a dynamic component here to make the template cleaner. Here's a very rough example of what I have in mind:diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue index aaf181f29df..592ca53202b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue @@ -10,6 +10,8 @@ import { } from '~/packages_and_registries/package_registry/constants'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import DetailsRow from '~/vue_shared/components/registry/details_row.vue'; +import NugetMetadata from 'somwhere'; +import ConanMetadata from 'somwhere'; export default { i18n: { @@ -39,30 +41,14 @@ export default { }, computed: { showMetadata() { - return ( - [ - PACKAGE_TYPE_NUGET, - PACKAGE_TYPE_CONAN, - PACKAGE_TYPE_MAVEN, - PACKAGE_TYPE_COMPOSER, - PACKAGE_TYPE_PYPI, - ].includes(this.packageEntity.packageType) && this.packageEntity.metadata - ); + return this.metadataComponent && this.packageEntity.metadata; }, - showNugetMetadata() { - return this.packageEntity.packageType === PACKAGE_TYPE_NUGET; - }, - showConanMetadata() { - return this.packageEntity.packageType === PACKAGE_TYPE_CONAN; - }, - showMavenMetadata() { - return this.packageEntity.packageType === PACKAGE_TYPE_MAVEN; - }, - showComposerMetadata() { - return this.packageEntity.packageType === PACKAGE_TYPE_COMPOSER; - }, - showPypiMetadata() { - return this.packageEntity.packageType === PACKAGE_TYPE_PYPI; + metadataComponent() { + return { + [PACKAGE_TYPE_NUGET]: NugetMetadata, + [PACKAGE_TYPE_CONAN]: ConanMetadata, + // ... + }[this.packageEntity.packageType]; }, }, }; @@ -73,93 +59,7 @@ export default { <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3> <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main"> - <template v-if="showNugetMetadata"> - <details-row icon="project" padding="gl-p-4" dashed data-testid="nuget-source"> - <gl-sprintf :message="$options.i18n.sourceText"> - <template #link> - <gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{ - packageEntity.metadata.projectUrl - }}</gl-link> - </template> - </gl-sprintf> - </details-row> - <details-row icon="license" padding="gl-p-4" data-testid="nuget-license"> - <gl-sprintf :message="$options.i18n.licenseText"> - <template #link> - <gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{ - packageEntity.metadata.licenseUrl - }}</gl-link> - </template> - </gl-sprintf> - </details-row> - </template> - - <details-row - v-else-if="showConanMetadata" - icon="information-o" - padding="gl-p-4" - data-testid="conan-recipe" - > - <gl-sprintf :message="$options.i18n.recipeText"> - <template #recipe>{{ packageEntity.metadata.recipe }}</template> - </gl-sprintf> - </details-row> - - <template v-else-if="showMavenMetadata"> - <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app"> - <gl-sprintf :message="$options.i18n.appName"> - <template #name> - <strong>{{ packageEntity.metadata.appName }}</strong> - </template> - </gl-sprintf> - </details-row> - <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group"> - <gl-sprintf :message="$options.i18n.appGroup"> - <template #group> - <strong>{{ packageEntity.metadata.appGroup }}</strong> - </template> - </gl-sprintf> - </details-row> - </template> - - <template v-else-if="showComposerMetadata"> - <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha"> - <gl-sprintf :message="$options.i18n.targetSha"> - <template #sha> - <strong>{{ packageEntity.metadata.targetSha }}</strong> - <clipboard-button - :title="$options.i18n.targetShaCopyButton" - :text="packageEntity.metadata.targetSha" - category="tertiary" - css-class="gl-p-0!" - /> - </template> - </gl-sprintf> - </details-row> - <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json"> - <gl-sprintf :message="$options.i18n.composerJson"> - <template #license> - <strong>{{ packageEntity.metadata.composerJson.license }}</strong> - </template> - <template #version> - <strong>{{ packageEntity.metadata.composerJson.version }}</strong> - </template> - </gl-sprintf> - </details-row> - </template> - - <details-row - v-else-if="showPypiMetadata" - icon="information-o" - padding="gl-p-4" - data-testid="pypi-required-python" - > - <gl-sprintf :message="$options.i18n.requiredPython"> - <template #python> - <strong>{{ packageEntity.metadata.requiredPython }}</strong> - </template> - </gl-sprintf> - </details-row> + <component :is="metadataComponent" /> </div> </div> </template>