[Remove Vuetify from Studio] Invitations in Channels

contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue

@@ -1,75 +1,53 @@
 <template>
 
   <div>
-    <VListTile @click.stop>
-      <VListTileContent>
-        <VListTileTitle>{{ invitationText }}</VListTileTitle>
-      </VListTileContent>
-
-      <template>
-        <VListTileAction>
-          <VTooltip
-            bottom
-            lazy
-          >
-            <template #activator="{ on }">
-              <VBtn
-                icon
-                data-test="accept"
-                v-on="on"
-                @click="accept"
-              >
-                <Icon icon="done" />
-              </VBtn>
-            </template>
-            <span>{{ $tr('accept') }}</span>
-          </VTooltip>
-        </VListTileAction>
-        <VListTileAction>
-          <VTooltip
-            bottom
-            lazy
-          >
-            <template #activator="{ on }">
-              <VBtn
-                icon
-                data-test="decline"
-                v-on="on"
-                @click="dialog = true"
-              >
-                <Icon
-                  color="red"
-                  icon="clear"
-                />
-              </VBtn>
-            </template>
-            <span>{{ $tr('decline') }}</span>
-          </VTooltip>
-        </VListTileAction>
-      </template>
-    </VListTile>
-    <MessageDialog
-      v-model="dialog"
-      :header="$tr('decliningInvitation')"
-      :text="$tr('decliningInvitationMessage')"
+    <li class="invitation">
+      <div class="invitation__main">
+        <div class="invitation__main--left">
+          {{ invitationText }}
+        </div>
+        <div class="invitation__main--right">
+          <div class="invitation__main--right__btn-one">
+            <KIconButton
+              :tooltip="$tr('accept')"
+              text="Flat button"
+              :primary="true"
+              icon="check"
+              :color="$themePalette.green.v_600"
+              data-test="accept"
+              appearance="flat-button"
+              @click="accept"
+            />
+          </div>
+          <div class="invitation__main--right__btn-two">
+            <KIconButton
+              :tooltip="$tr('decline')"
+              text="Flat button"
+              :primary="true"
+              icon="close"
+              :color="$themePalette.red.v_500"
+              data-test="decline"
+              appearance="flat-button"
+              @click="dialog = true"
+            />
+          </div>
+        </div>
+      </div>
+    </li>
+    <KModal
+      v-if="dialog"
+      size="small"
+      :submitText="$tr('decline')"
+      :cancelText="$tr('cancel')"
+      :title="$tr('decliningInvitation')"
+      data-testid="channel-invitation-modal"
+      @submit="declineAndClose"
+      @cancel="close"
     >
-      <template #buttons="{ close }">
-        <VSpacer />
-        <VBtn
-          flat
-          @click="close"
-        >
-          {{ $tr('cancel') }}
-        </VBtn>
-        <VBtn
-          data-test="decline-close"
-          color="primary"
-          @click="declineAndClose"
-        >
-          {{ $tr('decline') }}
-        </VBtn>
+      <template>
+        {{ $tr('decliningInvitationMessage') }}
       </template>
-    </MessageDialog>
+    </KModal>
   </div>
 
 </template>
@@ -79,13 +57,9 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import { InvitationShareModes } from '../../constants';
-  import MessageDialog from 'shared/views/MessageDialog';
 
   export default {
     name: 'ChannelInvitation',
-    components: {
-      MessageDialog,
-    },
     props: {
       invitationID: {
         type: String,
@@ -134,6 +108,9 @@
           this.$store.dispatch('showSnackbarSimple', this.$tr('declinedSnackbar'));
         });
       },
+      close() {
+        this.dialog = false;
+      },
     },
     $trs: {
       editText: '{sender} has invited you to edit {channel}',
@@ -152,7 +129,7 @@
 </script>
 
 
-<style scoped>
+<style lang="scss" scoped>
 
   /deep/ .v-list__tile {
     height: unset;
@@ -165,4 +142,41 @@
     white-space: unset;
   }
 
+  .invitation {
+    padding: 16px 16px 0;
+    font-size: 16px;
+    list-style: none;
+
+    &__main {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &--right {
+        display: flex;
+        flex-direction: row;
+
+        [dir='ltr'] &__btn-one {
+          margin-right: 15px;
+          margin-left: 0;
+        }
+
+        [dir='rtl'] &__btn-two,
+        &__btn-one {
+          margin-right: 0;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: end;
+
+    &__close {
+      margin-right: 10px;
+    }
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelInvitation.spec.js

@@ -42,9 +42,13 @@ describe('channelInvitation', () => {
   });
 
   it('clicking on the decline button should decline the invitation', async () => {
+    await wrapper.find('[data-test="decline"]').trigger('click');
     const declineInvitation = jest.spyOn(wrapper.vm, 'declineInvitation');
     declineInvitation.mockImplementation(() => Promise.resolve());
-    await wrapper.find('[data-test="decline-close"]').trigger('click');
+    await wrapper
+      .findComponent('[data-testid="channel-invitation-modal"]')
+      .find('form')
+      .trigger('submit');
     expect(declineInvitation).toHaveBeenCalledWith(invitationID);
   });
 });

contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

@@ -88,21 +88,23 @@
               md8
               lg6
             >
-              <VCard
+              <StudioRaisedBox
                 v-if="invitationList.length"
                 v-show="isChannelList"
               >
-                <VList subheader>
-                  <VSubheader>
-                    {{ $tr('invitations', { count: invitationList.length }) }}
-                  </VSubheader>
-                  <ChannelInvitation
-                    v-for="invitation in invitationList"
-                    :key="invitation.id"
-                    :invitationID="invitation.id"
-                  />
-                </VList>
-              </VCard>
+                <template #header>
+                  {{ $tr('invitations', { count: invitationList.length }) }}
+                </template>
+                <template #main>
+                  <ul class="invitation-list">
+                    <ChannelInvitation
+                      v-for="invitation in invitationList"
+                      :key="invitation.id"
+                      :invitationID="invitation.id"
+                    />
+                  </ul>
+                </template>
+              </StudioRaisedBox>
             </VFlex>
           </VLayout>
           <ChannelListAppError
@@ -131,6 +133,7 @@
   } from '../constants';
   import ChannelListAppError from './ChannelListAppError';
   import ChannelInvitation from './Channel/ChannelInvitation';
+  import StudioRaisedBox from 'shared/views/StudioRaisedBox.vue';
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
@@ -162,6 +165,7 @@
       GlobalSnackbar,
       PolicyModals,
       OfflineText,
+      StudioRaisedBox,
     },
     mixins: [constantsTranslationMixin, routerMixin],
     computed: {
@@ -337,4 +341,8 @@
     overflow: auto;
   }
 
+  .invitation-list {
+    padding: 0;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/views/StudioRaisedBox.vue

@@ -0,0 +1,46 @@
+<template>
+
+  <div
+    class="studio-raised-box"
+    :style="{ backgroundColor: $themeTokens.surface }"
+  >
+    <div
+      class="studio-raised-box__header"
+      :style="{ color: $themeTokens.annotation }"
+    >
+      <slot name="header"></slot>
+    </div>
+    <div class="studio-raised-box__main">
+      <slot name="main"></slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'StudioRaisedBox',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .studio-raised-box {
+    @extend %dropshadow-2dp;
+
+    &__header {
+      padding: 16px 16px 0;
+    }
+
+    &__main {
+      padding-bottom: 18px;
+    }
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioRaisedBox.spec.js

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioRaisedBox from '../StudioRaisedBox.vue';
+
+describe('StudioRaisedBox', () => {
+  test('renders both header and main slots', () => {
+    const headerContent = 'Header Title';
+    const mainContent = 'Main content area';
+    render(StudioRaisedBox, {
+      props: {},
+      routes: new VueRouter(),
+      slots: {
+        header: headerContent,
+        main: mainContent,
+      },
+    });
+    expect(screen.getByText(headerContent)).toBeInTheDocument();
+    expect(screen.getByText(mainContent)).toBeInTheDocument();
+  });
+});