Redesign OcStatusIndicators, Remove OcStatusIndicators from OcResource

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

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

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()
+  })
+})

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)"
       >
-        <oc-icon
-          :name="indicator.icon"
-          size="small"
-          :fill-type="indicator.fillType"
-          variation="passive"
-        />
+        <oc-icon :name="indicator.icon" size="small" fill-type="line" />
       </oc-button>
       <oc-icon
         v-else
@@ -122,6 +118,10 @@ export default {
 .oc-status-indicators {
   align-items: center;
   display: flex;
+  justify-content: flex-end;
+  &-indicator {
+    border-radius: 99px;
+  }
 }
 </style>
 
@@ -148,6 +148,7 @@ export default {
           id: 'file-link',
           label: "Shared via link",
           icon: 'links',
+          handler: (resource, indicatorId) => alert(`Resource: ${resource.name}, indicator: ${indicatorId}`)
         }
       ]
     }),

src/components/organisms/OcResource/OcResource.vue

@@ -53,11 +53,6 @@
           <oc-icon name="folder-2" size="small" fill-type="line" />
           <span class="text" v-text="parentFolder" />
         </component>
-        <oc-status-indicators
-          v-if="resource.indicators.length"
-          :resource="resource"
-          :indicators="resource.indicators"
-        />
       </div>
     </div>
   </div>