diff options
Diffstat (limited to 'app/assets/javascripts/repository')
14 files changed, 62 insertions, 98 deletions
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue index 368fa029d07..74437f286b4 100644 --- a/app/assets/javascripts/repository/components/breadcrumbs.vue +++ b/app/assets/javascripts/repository/components/breadcrumbs.vue @@ -4,10 +4,10 @@ import { GlDeprecatedDropdownDivider, GlDeprecatedDropdownHeader, GlDeprecatedDropdownItem, + GlIcon, } from '@gitlab/ui'; import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility'; import { __ } from '../../locale'; -import Icon from '../../vue_shared/components/icon.vue'; import getRefMixin from '../mixins/get_ref'; import projectShortPathQuery from '../queries/project_short_path.query.graphql'; import projectPathQuery from '../queries/project_path.query.graphql'; @@ -24,7 +24,7 @@ export default { GlDeprecatedDropdownDivider, GlDeprecatedDropdownHeader, GlDeprecatedDropdownItem, - Icon, + GlIcon, }, apollo: { projectShortPath: { @@ -249,8 +249,8 @@ export default { <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1"> <template #button-content> <span class="sr-only">{{ __('Add to tree') }}</span> - <icon name="plus" :size="16" class="float-left" /> - <icon name="chevron-down" :size="16" class="float-left" /> + <gl-icon name="plus" :size="16" class="float-left" /> + <gl-icon name="chevron-down" :size="16" class="float-left" /> </template> <template v-for="(item, i) in dropdownItems"> <component :is="getComponent(item.type)" :key="i" v-bind="item.attrs"> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 3337ce6c6df..59831890a4e 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,8 +1,8 @@ <script> -import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; +/* eslint-disable vue/no-v-html */ +import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import defaultAvatarUrl from 'images/no_avatar.png'; import { sprintf, s__ } from '~/locale'; -import Icon from '../../vue_shared/components/icon.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; import CiIcon from '../../vue_shared/components/ci_icon.vue'; @@ -13,7 +13,7 @@ import pathLastCommitQuery from '../queries/path_last_commit.query.graphql'; export default { components: { - Icon, + GlIcon, UserAvatarLink, TimeagoTooltip, ClipboardButton, @@ -130,7 +130,7 @@ export default { class="text-expander" @click="toggleShowDescription" > - <icon name="ellipsis_h" :size="10" /> + <gl-icon name="ellipsis_h" :size="10" /> </gl-deprecated-button> <div class="committer"> <gl-link diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index 013092ffefd..eca53f73a7f 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; import { GlLink, GlLoadingIcon } from '@gitlab/ui'; diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index d0cc617d755..c6652c57c1f 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,5 +1,5 @@ <script> -import { GlSkeletonLoading } from '@gitlab/ui'; +import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui'; import { sprintf, __ } from '../../../locale'; import getRefMixin from '../../mixins/get_ref'; import projectPathQuery from '../../queries/project_path.query.graphql'; @@ -13,6 +13,7 @@ export default { TableHeader, TableRow, ParentRow, + GlButton, }, mixins: [getRefMixin], apollo: { @@ -39,6 +40,10 @@ export default { required: false, default: '', }, + hasMore: { + type: Boolean, + required: true, + }, }, data() { return { @@ -65,6 +70,11 @@ export default { return !this.isLoading && ['', '/'].indexOf(this.path) === -1; }, }, + methods: { + showMore() { + this.$emit('showMore'); + }, + }, }; </script> @@ -110,6 +120,20 @@ export default { <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td> </tr> </template> + <template v-if="hasMore"> + <tr> + <td align="center" colspan="3" class="gl-p-0!"> + <gl-button + variant="link" + class="gl-display-flex gl-w-full gl-py-4!" + :loading="isLoading" + @click="showMore" + > + {{ s__('ProjectFileTree|Show more') }} + </gl-button> + </td> + </tr> + </template> </tbody> </table> </div> diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index d2fef6693e2..d749a8c0dee 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -1,9 +1,10 @@ <script> +/* eslint-disable vue/no-v-html */ import { escapeRegExp } from 'lodash'; import { GlBadge, GlLink, - GlSkeletonLoading, + GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon, GlIcon, diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index fe3065a2145..365b6cbb550 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,5 +1,4 @@ <script> -import { GlButton } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __ } from '../../locale'; import FileTable from './table/index.vue'; @@ -17,7 +16,6 @@ export default { components: { FileTable, FilePreview, - GlButton, }, mixins: [getRefMixin], apollo: { @@ -127,7 +125,7 @@ export default { .concat(data.trees.pageInfo, data.submodules.pageInfo, data.blobs.pageInfo) .find(({ hasNextPage }) => hasNextPage); }, - showMore() { + handleShowMore() { this.clickedShowMore = true; this.fetchFiles(); }, @@ -142,20 +140,9 @@ export default { :entries="entries" :is-loading="isLoadingFiles" :loading-path="loadingPath" + :has-more="hasShowMore" + @showMore="handleShowMore" /> - <div - v-if="hasShowMore" - class="gl-border-1 gl-border-gray-100 gl-rounded-base gl-border-t-none gl-border-b-solid gl-border-l-solid gl-border-r-solid gl-rounded-top-right-none gl-rounded-top-left-none gl-mt-n1" - > - <gl-button - variant="link" - class="gl-display-flex gl-w-full gl-py-4!" - :loading="isLoadingFiles" - @click="showMore" - > - {{ s__('ProjectFileTree|Show more') }} - </gl-button> - </div> <file-preview v-if="readme" :blob="readme" /> </div> </template> diff --git a/app/assets/javascripts/repository/components/web_ide_link.vue b/app/assets/javascripts/repository/components/web_ide_link.vue deleted file mode 100644 index 6549d5a3878..00000000000 --- a/app/assets/javascripts/repository/components/web_ide_link.vue +++ /dev/null @@ -1,47 +0,0 @@ -<script> -import TreeActionLink from './tree_action_link.vue'; -import { __ } from '~/locale'; -import { webIDEUrl } from '~/lib/utils/url_utility'; - -export default { - components: { - TreeActionLink, - }, - props: { - projectPath: { - type: String, - required: true, - }, - refSha: { - type: String, - required: true, - }, - canPushCode: { - type: Boolean, - required: false, - default: true, - }, - forkPath: { - type: String, - required: false, - default: '', - }, - }, - computed: { - showLinkToFork() { - return !this.canPushCode && this.forkPath; - }, - text() { - return this.showLinkToFork ? __('Edit fork in Web IDE') : __('Web IDE'); - }, - path() { - const path = this.showLinkToFork ? this.forkPath : this.projectPath; - return webIDEUrl(`/${path}/edit/${this.refSha}/-/${this.$route.params.path || ''}`); - }, - }, -}; -</script> - -<template> - <tree-action-link :path="path" :text="text" data-qa-selector="web_ide_button" /> -</template> diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js index 450a1571165..8dd18027945 100644 --- a/app/assets/javascripts/repository/graphql.js +++ b/app/assets/javascripts/repository/graphql.js @@ -58,6 +58,7 @@ const defaultClient = createDefaultClient( /* eslint-enable @gitlab/require-i18n-strings */ }, }, + assumeImmutableResults: true, }, ); diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 187bbfed125..7f72524b6fe 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -1,30 +1,22 @@ import Vue from 'vue'; -import { escapeFileUrl } from '../lib/utils/url_utility'; +import { escapeFileUrl, joinPaths, webIDEUrl } from '../lib/utils/url_utility'; import createRouter from './router'; import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; import LastCommit from './components/last_commit.vue'; import TreeActionLink from './components/tree_action_link.vue'; -import WebIdeLink from './components/web_ide_link.vue'; +import WebIdeLink from '~/vue_shared/components/web_ide_link.vue'; import DirectoryDownloadLinks from './components/directory_download_links.vue'; import apolloProvider from './graphql'; import { setTitle } from './utils/title'; import { updateFormAction } from './utils/dom'; -import { parseBoolean } from '../lib/utils/common_utils'; +import { convertObjectPropsToCamelCase, parseBoolean } from '../lib/utils/common_utils'; import { __ } from '../locale'; export default function setupVueRepositoryList() { const el = document.getElementById('js-tree-list'); const { dataset } = el; - const { - canPushCode, - projectPath, - projectShortPath, - forkPath, - ref, - escapedRef, - fullName, - } = dataset; + const { projectPath, projectShortPath, ref, escapedRef, fullName } = dataset; const router = createRouter(projectPath, escapedRef); apolloProvider.clients.defaultClient.cache.writeData({ @@ -121,6 +113,10 @@ export default function setupVueRepositoryList() { const webIdeLinkEl = document.getElementById('js-tree-web-ide-link'); if (webIdeLinkEl) { + const { ideBasePath, ...options } = convertObjectPropsToCamelCase( + JSON.parse(webIdeLinkEl.dataset.options), + ); + // eslint-disable-next-line no-new new Vue({ el: webIdeLinkEl, @@ -128,10 +124,10 @@ export default function setupVueRepositoryList() { render(h) { return h(WebIdeLink, { props: { - projectPath, - refSha: ref, - forkPath, - canPushCode: parseBoolean(canPushCode), + webIdeUrl: webIDEUrl( + joinPaths('/', ideBasePath, 'edit', ref, '-', this.$route.params.path || '', '/'), + ), + ...options, }, }); }, diff --git a/app/assets/javascripts/repository/log_tree.js b/app/assets/javascripts/repository/log_tree.js index 704dd88aabe..361e0b62bb7 100644 --- a/app/assets/javascripts/repository/log_tree.js +++ b/app/assets/javascripts/repository/log_tree.js @@ -1,3 +1,4 @@ +import produce from 'immer'; import { normalizeData } from 'ee_else_ce/repository/utils/commit'; import axios from '~/lib/utils/axios_utils'; import commitsQuery from './queries/commits.query.graphql'; @@ -34,16 +35,18 @@ export function fetchLogsTree(client, path, offset, resolver = null) { params: { format: 'json', offset }, }, ) - .then(({ data, headers }) => { + .then(({ data: newData, headers }) => { const headerLogsOffset = headers['more-logs-offset']; - const { commits } = client.readQuery({ query: commitsQuery }); - const newCommitData = [...commits, ...normalizeData(data, path)]; + const sourceData = client.readQuery({ query: commitsQuery }); + const data = produce(sourceData, draftState => { + draftState.commits.push(...normalizeData(newData, path)); + }); client.writeQuery({ query: commitsQuery, - data: { commits: newCommitData }, + data, }); - resolvers.forEach(r => resolveCommit(newCommitData, path, r)); + resolvers.forEach(r => resolveCommit(data.commits, path, r)); fetchpromise = null; diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js index c5646c32850..38a596e229e 100644 --- a/app/assets/javascripts/repository/router.js +++ b/app/assets/javascripts/repository/router.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; +import { escapeRegExp } from 'lodash'; import { joinPaths } from '../lib/utils/url_utility'; import IndexPage from './pages/index.vue'; import TreePage from './pages/tree.vue'; @@ -27,7 +28,7 @@ export default function createRouter(base, baseRef) { { name: 'treePath', // Support without decoding as well just in case the ref doesn't need to be decoded - path: `(/-)?/tree/${baseRef}/:path*`, + path: `(/-)?/tree/${escapeRegExp(baseRef)}/:path*`, ...treePathRoute, }, { diff --git a/app/assets/javascripts/repository/utils/commit.js b/app/assets/javascripts/repository/utils/commit.js index 90ac01c5874..0704ac1627f 100644 --- a/app/assets/javascripts/repository/utils/commit.js +++ b/app/assets/javascripts/repository/utils/commit.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line import/prefer-default-export export function normalizeData(data, path, extra = () => {}) { return data.map(d => ({ sha: d.commit.id, diff --git a/app/assets/javascripts/repository/utils/icon.js b/app/assets/javascripts/repository/utils/icon.js index 661ebb6edfc..47b045c7eaf 100644 --- a/app/assets/javascripts/repository/utils/icon.js +++ b/app/assets/javascripts/repository/utils/icon.js @@ -88,7 +88,6 @@ const fileTypeIcons = [ }, ]; -// eslint-disable-next-line import/prefer-default-export export const getIconName = (type, path) => { if (entryTypeIcons[type]) return entryTypeIcons[type]; diff --git a/app/assets/javascripts/repository/utils/readme.js b/app/assets/javascripts/repository/utils/readme.js index 5b62271b02e..50692779b1a 100644 --- a/app/assets/javascripts/repository/utils/readme.js +++ b/app/assets/javascripts/repository/utils/readme.js @@ -28,5 +28,4 @@ const isPlainReadme = file => { return re.test(file.name); }; -// eslint-disable-next-line import/prefer-default-export export const readmeFile = blobs => blobs.find(isRichReadme) || blobs.find(isPlainReadme); |