Skip to content

Commit

Permalink
Port EOS details to details tab in files sidebar (#6997)
Browse files Browse the repository at this point in the history 
* Changes to links in sidebar, fix tooltips (#6959)

* Changes to links in sidebar, fix tooltips

Co-authored-by: elizavetaRa <svillyfly@mail.ru>
Co-authored-by: Javier Ferrer <javier.ferrer@cern.ch>

* Update tests

* Apply suggestions

* Fix labels, remove unused code

Co-authored-by: Diogo Castro <diogo.castro@cern.ch>
Co-authored-by: elizavetaRa <svillyfly@mail.ru>

* Update unit tests & reword changelog

Co-authored-by: Javier Ferrer <javier.ferrer@cern.ch>
Co-authored-by: Diogo Castro <diogo.castro@cern.ch>
Co-authored-by: elizavetaRa <svillyfly@mail.ru>
  • Loading branch information
@javfg @diocas @elizavetaRa
4 people authored May 18, 2022
1 parent 3751ab8 commit 7d1bfc3
Show file tree
Hide file tree
Showing 6 changed files with 409 additions and 53 deletions.
9 changes: 9 additions & 0 deletions changelog/unreleased/enhancement-eos-links-in-sidebar
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
Enhancement: EOS links insidebar, fix tooltips

We've added a `runningOnEos` setting which, if set to true, displays two entries in the sidebar:
The EOS path and a direct link to the file. Along with adding the two links, we have also resolved
an issue with overflowing text/tooltips in the sidebar for very long text.

https://github.com/owncloud/web/issues/6849
https://github.com/owncloud/web/pull/6959
https://github.com/owncloud/web/pull/6997
1 change: 1 addition & 0 deletions docs/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}
- `options.feedbackLink.description` Provide any description you want to see as tooltip and as accessible description. Defaults to `Provide your feedback: We'd like to improve the web design and would be happy to hear your feedback. Thank you! Your ownCloud team.`
- `options.sharingRecipientsPerPage` Sets the amount of users shown as recipients in the dropdown when sharing resources. Default amount is 200.
- `options.sidebar.shares.showAllOnLoad` Sets the list of (link) shares list in the sidebar to be initially expanded (default is a collapsed state, only showing the first three shares).
- `options.runningOnEos` Set this option to `true` if running on an [EOS storage backend](https://eos-web.web.cern.ch/eos-web/) to enable its specific features. Defaults to `false`.

### Sentry

Expand Down
147 changes: 130 additions & 17 deletions packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</div>
<table class="details-table" :aria-label="detailsTableLabel">
<tr v-if="hasTimestamp" data-testid="timestamp">
<th scope="col" class="oc-pr-s" v-text="timestampTitle" />
<th scope="col" class="oc-pr-s" v-text="timestampLabel" />
<td>
<oc-button
v-if="showVersions"
Expand Down Expand Up @@ -51,7 +51,7 @@
</td>
</tr>
<tr v-if="ownerDisplayName" data-testid="ownerDisplayName">
<th scope="col" class="oc-pr-s" v-text="ownerTitle" />
<th scope="col" class="oc-pr-s" v-text="ownerLabel" />
<td>
<p class="oc-m-rm">
{{ ownerDisplayName }}
Expand All @@ -63,11 +63,11 @@
</td>
</tr>
<tr v-if="showSize" data-testid="sizeInfo">
<th scope="col" class="oc-pr-s" v-text="sizeTitle" />
<th scope="col" class="oc-pr-s" v-text="sizeLabel" />
<td v-text="getResourceSize(file.size)" />
</tr>
<tr v-if="showVersions" data-testid="versionsInfo">
<th scope="col" class="oc-pr-s" v-text="versionsTitle" />
<th scope="col" class="oc-pr-s" v-text="versionsLabel" />
<td>
<oc-button
v-oc-tooltip="seeVersionsLabel"
Expand All @@ -78,6 +78,62 @@
/>
</td>
</tr>
<tr v-if="runningOnEos">
<th scope="col" class="oc-pr-s" v-text="eosPathLabel" />
<td>
<div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1">
<p
ref="filePath"
v-oc-tooltip="file.path"
class="oc-my-rm oc-text-truncate"
v-text="file.path"
/>
<oc-button
v-oc-tooltip="copyEosPathLabel"
:aria-label="copyEosPathLabel"
appearance="raw"
:variation="copiedEos ? 'success' : 'passive'"
@click="copyEosPathToClipboard"
>
<oc-icon
v-if="copiedEos"
key="oc-copy-to-clipboard-copied"
name="checkbox-circle"
class="_clipboard-success-animation"
/>
<oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
</oc-button>
</div>
</td>
</tr>
<tr v-if="runningOnEos">
<th scope="col" class="oc-pr-s" v-text="directLinkLabel" />
<td>
<div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1">
<p
ref="directLink"
v-oc-tooltip="directLink"
class="oc-my-rm oc-text-truncate"
v-text="directLink"
/>
<oc-button
v-oc-tooltip="copyDirectLinkLabel"
:aria-label="copyDirectLinkLabel"
appearance="raw"
:variation="copiedDirect ? 'success' : 'passive'"
@click="copyDirectLinkToClipboard"
>
<oc-icon
v-if="copiedDirect"
key="oc-copy-to-clipboard-copied"
name="checkbox-circle"
class="_clipboard-success-animation"
/>
<oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
</oc-button>
</div>
</td>
</tr>
</table>
</div>
<p v-else data-testid="noContentText" v-text="noContentText" />
Expand All @@ -96,6 +152,8 @@ import { createLocationSpaces, isAuthenticatedRoute, isLocationSpacesActive } fr
import { ShareTypes } from '../../../helpers/share'
import { useRoute, useRouter } from 'web-pkg/src/composables'
import { getIndicators } from '../../../helpers/statusIndicators'
import copyToClipboard from 'copy-to-clipboard'
import { encodePath } from 'web-pkg/src/utils'
export default defineComponent({
name: 'FileDetails',
Expand Down Expand Up @@ -131,7 +189,10 @@ export default defineComponent({
sharedByDisplayName: '',
sharedTime: 0,
sharedItem: null,
shareIndicators: []
shareIndicators: [],
copiedDirect: false,
copiedEos: false,
timeout: null
}),
computed: {
...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading']),
Expand All @@ -140,7 +201,9 @@ export default defineComponent({
file() {
return this.displayedItem.value
},
runningOnEos() {
return !!this.configuration?.options?.runningOnEos
},
hasContent() {
return (
this.hasTimestamp ||
Expand All @@ -157,10 +220,10 @@ export default defineComponent({
return this.$gettext('Overview of the information about the selected file')
},
shareDateLabel() {
return this.$gettext('Shared:')
return this.$gettext('Shared')
},
sharedViaLabel() {
return this.$gettext('Shared via:')
return this.$gettext('Shared via')
},
sharedViaTooltip() {
return this.$gettextInterpolate(
Expand Down Expand Up @@ -197,16 +260,16 @@ export default defineComponent({
return this.$gettext('This file has been shared.')
},
sharedByLabel() {
return this.$gettext('Shared by:')
return this.$gettext('Shared by')
},
hasTimestamp() {
return this.file.mdate?.length > 0
},
timestampTitle() {
return this.$gettext('Last modified:')
timestampLabel() {
return this.$gettext('Last modified')
},
ownerTitle() {
return this.$gettext('Owner:')
ownerLabel() {
return this.$gettext('Owner')
},
ownerDisplayName() {
return (
Expand All @@ -218,20 +281,35 @@ export default defineComponent({
ownerAdditionalInfo() {
return this.file.owner?.[0].additionalInfo
},
directLink() {
return `${this.configuration.server}files/spaces/personal/home${encodePath(this.file.path)}`
},
directLinkLabel() {
return this.$gettext('Direct link')
},
copyDirectLinkLabel() {
return this.$gettext('Copy direct link')
},
eosPathLabel() {
return this.$gettext('EOS Path')
},
copyEosPathLabel() {
return this.$gettext('Copy EOS path')
},
showSize() {
return this.getResourceSize(this.file.size) !== '?'
},
sizeTitle() {
return this.$gettext('Size:')
sizeLabel() {
return this.$gettext('Size')
},
showVersions() {
if (this.file.type === 'folder') {
return
}
return this.versions.length > 0 && isAuthenticatedRoute(this.$route)
},
versionsTitle() {
return this.$gettext('Versions:')
versionsLabel() {
return this.$gettext('Versions')
},
seeVersionsLabel() {
return this.$gettext('See all versions')
Expand Down Expand Up @@ -349,6 +427,31 @@ export default defineComponent({
}
await Promise.all(calls.map((p) => p.catch((e) => e)))
this.loading = false
},
copyEosPathToClipboard() {
copyToClipboard(this.file.path)
this.copiedEos = true
this.clipboardSuccessHandler()
this.showMessage({
title: this.$gettext('EOS path copied'),
desc: this.$gettext('The EOS path has been copied to your clipboard.')
})
},
copyDirectLinkToClipboard() {
copyToClipboard(this.directLink)
this.copiedDirect = true
this.clipboardSuccessHandler()
this.showMessage({
title: this.$gettext('Direct link copied'),
desc: this.$gettext('The direct link has been copied to your clipboard.')
})
},
clipboardSuccessHandler() {
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.copiedDirect = false
this.copiedEos = false
}, 550)
}
}
})
Expand All @@ -359,10 +462,20 @@ export default defineComponent({
tr {
height: 1.5rem;
td {
max-width: 0;
width: 100%;
div {
min-width: 0;
}
}
}
th {
font-weight: 600;
white-space: nowrap;
}
}
Expand Down
33 changes: 29 additions & 4 deletions packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,20 @@ describe('Details SideBar Panel', () => {
const wrapper = createWrapper(sharedFolder)
expect(wrapper).toMatchSnapshot()
})
it('with timestamp, size info, share info and share date running on eos', () => {
const wrapper = createWrapper(sharedFolder, [], null, false, true)
expect(wrapper).toMatchSnapshot()
})
})
describe('on a public page', () => {
it('with owner, timestamp, size info and no share info', () => {
const wrapper = createWrapper(sharedFolder, [], null, true)
expect(wrapper).toMatchSnapshot()
})
it('with owner, timestamp, size info and no share info running on eos', () => {
const wrapper = createWrapper(sharedFolder, [], null, true, true)
expect(wrapper).toMatchSnapshot()
})
})
})
describe('displays a resource of type file', () => {
Expand All @@ -96,6 +104,10 @@ describe('Details SideBar Panel', () => {
const wrapper = createWrapper(sharedFile)
expect(wrapper).toMatchSnapshot()
})
it('with timestamp, size info, share info, share date and preview running on eos', () => {
const wrapper = createWrapper(sharedFile, [], null, false, true)
expect(wrapper).toMatchSnapshot()
})

it('updates when the shareTree updates', async () => {
const wrapper = createWrapper(sharedFile)
Expand Down Expand Up @@ -128,24 +140,37 @@ describe('Details SideBar Panel', () => {
})
})
describe('on a public page', () => {
it('with owner, timestap, size info, no share info and preview', () => {
it('with owner, timestamp, size info, no share info and preview', () => {
const wrapper = createWrapper(sharedFile, [], null, true)
expect(wrapper).toMatchSnapshot()
})
it('with owner, timestamp, size info, no share info and preview', () => {
const wrapper = createWrapper(sharedFile, [], null, true)
it('with owner, timestamp, size info, no share info and preview running on eos', () => {
const wrapper = createWrapper(sharedFile, [], null, true, true)
expect(wrapper).toMatchSnapshot()
})
})
})
})

function createWrapper(testResource, testVersions = [], testPreview, publicRoute = false) {
function createWrapper(
testResource,
testVersions = [],
testPreview,
publicRoute = false,
runningOnEos = false
) {
return shallowMount(FileDetails, {
store: new Vuex.Store({
getters: {
user: function () {
return { id: 'marie' }
},
configuration: function () {
return {
options: {
runningOnEos
}
}
}
},
modules: {
Expand Down
Loading

0 comments on commit 7d1bfc3

Please sign in to comment.