diff --git a/changelog/unreleased/change-remove-resource-status-indicators b/changelog/unreleased/change-remove-resource-status-indicators new file mode 100644 index 000000000..de63bf473 --- /dev/null +++ b/changelog/unreleased/change-remove-resource-status-indicators @@ -0,0 +1,8 @@ +Change: Remove OcStatusIndicators from OcResource + +We've removed OcStatusIndicators from OcResource +since it will be moved in a separate column + +https://github.com/owncloud/web/issues/5976 +https://github.com/owncloud/web/pull/6552 +https://github.com/owncloud/owncloud-design-system/pull/2014 \ No newline at end of file diff --git a/changelog/unreleased/enhancement-redesign-status-indicators b/changelog/unreleased/enhancement-redesign-status-indicators new file mode 100644 index 000000000..4aac2000d --- /dev/null +++ b/changelog/unreleased/enhancement-redesign-status-indicators @@ -0,0 +1,8 @@ +Enhancement: Redesign OcStatusIndicators + +We've redesigned the share/status indicators to fit +in a separate column in the ResourceTable in web + +https://github.com/owncloud/web/issues/5976 +https://github.com/owncloud/web/pull/6552 +https://github.com/owncloud/owncloud-design-system/pull/2014 \ No newline at end of file diff --git a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.spec.js b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.spec.js new file mode 100644 index 000000000..ef53fa7db --- /dev/null +++ b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.spec.js @@ -0,0 +1,42 @@ +import StatusIndicators from "./OcStatusIndicators.vue" +import { mount } from "@vue/test-utils" + +const fileResource = { + name: "forest.jpg", + path: "nature/forest.jpg", + thumbnail: "https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_960_720.jpg", + indicators: [], + type: "file", + isFolder: false, + extension: "jpg", +} +const indicator = { + id: "testid", + label: "testlabel", + type: "testtype", + handler: jest.fn(), +} +describe("OcStatusIndicators", () => { + it("does call indicator handler on click", () => { + const spyHandler = jest.spyOn(indicator, "handler") + const wrapper = mount(StatusIndicators, { + propsData: { + resource: fileResource, + indicators: [indicator], + target: "test", + }, + }) + wrapper.find(".oc-status-indicators-indicator").trigger("click") + expect(spyHandler).toHaveBeenCalled() + }) + it("does create indicator with id", () => { + const wrapper = mount(StatusIndicators, { + propsData: { + resource: fileResource, + indicators: [indicator], + target: "test", + }, + }) + expect(wrapper.find(`#${indicator.id}`).exists()).toBeTruthy() + }) +}) diff --git a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue index a031ce123..2b70fb54b 100644 --- a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue +++ b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue @@ -6,20 +6,16 @@ :id="indicator.id" :key="indicator.id" v-oc-tooltip="indicator.label" - class="oc-status-indicators-indicator" + class="oc-status-indicators-indicator oc-background-primary-gradient oc-p-xs oc-ml-xs" :aria-label="indicator.label" :aria-describedby="getIndicatorDescriptionId(indicator)" appearance="raw" + variation="inverse" :data-testid="indicator.id" :data-test-indicator-type="indicator.type" @click="indicator.handler(resource, indicator.target)" > - + @@ -148,6 +148,7 @@ export default { id: 'file-link', label: "Shared via link", icon: 'links', + handler: (resource, indicatorId) => alert(`Resource: ${resource.name}, indicator: ${indicatorId}`) } ] }), diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue index c514430b5..46a961136 100644 --- a/src/components/organisms/OcResource/OcResource.vue +++ b/src/components/organisms/OcResource/OcResource.vue @@ -53,11 +53,6 @@ -