diff options
Diffstat (limited to 'app/assets/javascripts/projects/storage_counter/components/storage_table.vue')
| -rw-r--r-- | app/assets/javascripts/projects/storage_counter/components/storage_table.vue | 62 |
1 files changed, 36 insertions, 26 deletions
diff --git a/app/assets/javascripts/projects/storage_counter/components/storage_table.vue b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue index 7047fd925fb..a42a9711572 100644 --- a/app/assets/javascripts/projects/storage_counter/components/storage_table.vue +++ b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue @@ -1,9 +1,10 @@ <script> -import { GlLink, GlIcon, GlTable, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlIcon, GlTableLite as GlTable, GlSprintf } from '@gitlab/ui'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { thWidthClass } from '~/lib/utils/table_utility'; import { sprintf } from '~/locale'; import { PROJECT_TABLE_LABELS, HELP_LINK_ARIA_LABEL } from '../constants'; +import StorageTypeIcon from './storage_type_icon.vue'; export default { name: 'StorageTable', @@ -12,6 +13,7 @@ export default { GlIcon, GlTable, GlSprintf, + StorageTypeIcon, }, props: { storageTypes: { @@ -48,31 +50,39 @@ export default { <template> <gl-table :items="storageTypes" :fields="$options.projectTableFields"> <template #cell(storageType)="{ item }"> - <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`"> - {{ item.storageType.name }} - <gl-link - v-if="item.storageType.helpPath" - :href="item.storageType.helpPath" - target="_blank" - :aria-label="helpLinkAriaLabel(item.storageType.name)" - :data-testid="`${item.storageType.id}-help-link`" - > - <gl-icon name="question" :size="12" /> - </gl-link> - </p> - <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`"> - {{ item.storageType.description }} - </p> - <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm"> - <gl-icon name="warning" :size="12" /> - <gl-sprintf :message="item.storageType.warningMessage"> - <template #warningLink="{ content }"> - <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{ - content - }}</gl-link> - </template> - </gl-sprintf> - </p> + <div class="gl-display-flex gl-flex-direction-row"> + <storage-type-icon + :name="item.storageType.id" + :data-testid="`${item.storageType.id}-icon`" + /> + <div> + <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`"> + {{ item.storageType.name }} + <gl-link + v-if="item.storageType.helpPath" + :href="item.storageType.helpPath" + target="_blank" + :aria-label="helpLinkAriaLabel(item.storageType.name)" + :data-testid="`${item.storageType.id}-help-link`" + > + <gl-icon name="question" :size="12" /> + </gl-link> + </p> + <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`"> + {{ item.storageType.description }} + </p> + <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm"> + <gl-icon name="warning" :size="12" /> + <gl-sprintf :message="item.storageType.warningMessage"> + <template #warningLink="{ content }"> + <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> + </div> </template> </gl-table> </template> |