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 @@
-