-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[full-ci] Admin: Spaces actions in sidebar (#8233)
* Implement spaces actions in sidebar Co-authored-by: Jannik Stehle <[email protected]> Co-authored-by: Benedikt Kulmann <[email protected]>
- Loading branch information
3 people
authored
Jan 23, 2023
1 parent
1f487dc
commit 847d83e
Showing
4 changed files
with
171 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <div> | ||
| <quota-modal | ||
| v-if="quotaModalIsOpen" | ||
| :cancel="closeQuotaModal" | ||
| :space="selectedSpaces[0]" | ||
| @spaceQuotaUpdated="spaceQuotaUpdated" | ||
| /> | ||
| <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s"> | ||
| <action-menu-item | ||
| v-for="(action, index) in actions" | ||
| :key="`action-${index}`" | ||
| :action="action" | ||
| :items="selectedSpaces" | ||
| class="oc-py-xs" | ||
| /> | ||
| </oc-list> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue' | ||
| import Rename from 'web-pkg/src/mixins/spaces/rename' | ||
| import Delete from 'web-pkg/src/mixins/spaces/delete' | ||
| import Disable from 'web-pkg/src/mixins/spaces/disable' | ||
| import Restore from 'web-pkg/src/mixins/spaces/restore' | ||
| import EditDescription from 'web-pkg/src/mixins/spaces/editDescription' | ||
| import EditQuota from 'web-pkg/src/mixins/spaces/editQuota' | ||
| import QuotaModal from 'web-pkg/src/components/Spaces/QuotaModal.vue' | ||
| import { computed, defineComponent, getCurrentInstance, PropType } from 'vue' | ||
| import { SpaceResource } from 'web-client' | ||
| export default defineComponent({ | ||
| name: 'ActionsPanel', | ||
| components: { ActionMenuItem, QuotaModal }, | ||
| mixins: [Rename, Delete, EditDescription, Disable, Restore, EditQuota], | ||
| props: { | ||
| selectedSpaces: { | ||
| type: Array as PropType<Array<SpaceResource>>, | ||
| required: true | ||
| } | ||
| }, | ||
| setup(props) { | ||
| const instance = getCurrentInstance().proxy as any | ||
| const actions = computed(() => { | ||
| return [ | ||
| ...instance.$_rename_items, | ||
| ...instance.$_editDescription_items, | ||
| ...instance.$_editQuota_items, | ||
| ...instance.$_restore_items, | ||
| ...instance.$_delete_items, | ||
| ...instance.$_disable_items | ||
| ].filter((item) => item.isEnabled({ resources: props.selectedSpaces })) | ||
| }) | ||
| const quotaModalIsOpen = computed(() => instance.$data.$_editQuota_modalOpen) | ||
| const closeQuotaModal = () => { | ||
| instance.$_editQuota_closeModal() | ||
| } | ||
| const spaceQuotaUpdated = (quota) => { | ||
| instance.$data.$_editQuota_selectedSpace.spaceQuota = quota | ||
| } | ||
| return { actions, quotaModalIsOpen, closeQuotaModal, spaceQuotaUpdated } | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| #oc-spaces-actions-sidebar { | ||
| > li a, | ||
| > li a:hover { | ||
| color: var(--oc-color-swatch-passive-default); | ||
| display: inline-flex; | ||
| gap: 10px; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/ActionsPanel.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { | ||
| createStore, | ||
| defaultComponentMocks, | ||
| defaultPlugins, | ||
| defaultStoreMockOptions, | ||
| defaultStubs, | ||
| mount | ||
| } from 'web-test-helpers' | ||
| import { mock } from 'jest-mock-extended' | ||
| import { Resource } from 'web-client/src/helpers' | ||
| import ActionsPanel from '../../../../../src/components/Spaces/SideBar/ActionsPanel.vue' | ||
|
|
||
| const mixins = [ | ||
| '$_rename_items', | ||
| '$_editDescription_items', | ||
| '$_editQuota_items', | ||
| '$_disable_items', | ||
| '$_restore_items', | ||
| '$_delete_items' | ||
| ] | ||
|
|
||
| const Component = { | ||
| ...ActionsPanel, | ||
| mixins | ||
| } | ||
|
|
||
| describe('ActionsPanel', () => { | ||
| describe('menu sections', () => { | ||
| it('do not render when no action enabled', () => { | ||
| const { wrapper } = getWrapper() | ||
| expect(wrapper.findAll('action-menu-item-stub').length).toBe(0) | ||
| }) | ||
|
|
||
| it('render enabled actions', () => { | ||
| const enabledActions = [ | ||
| '$_rename_items', | ||
| '$_editDescription_items', | ||
| '$_editQuota_items', | ||
| '$_disable_items' | ||
| ] | ||
| const { wrapper } = getWrapper({ enabledActions }) | ||
| expect(wrapper.findAll('action-menu-item-stub').length).toBe(enabledActions.length) | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| function getWrapper({ enabledActions = [] } = {}) { | ||
| const storeOptions = { ...defaultStoreMockOptions } | ||
| const store = createStore(storeOptions) | ||
| const mocks = { | ||
| ...defaultComponentMocks(), | ||
| ...getMixinMocks(enabledActions) | ||
| } | ||
| return { | ||
| storeOptions, | ||
| mocks, | ||
| wrapper: mount(Component, { | ||
| props: { | ||
| items: [mock<Resource>()] | ||
| }, | ||
| global: { | ||
| mocks, | ||
| stubs: { ...defaultStubs, 'action-menu-item': true }, | ||
| plugins: [...defaultPlugins(), store] | ||
| } | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| const getMixinMocks = (enabledActions) => { | ||
| const mixinMocks = {} | ||
| for (const mixin of mixins) { | ||
| const isEnabled = !!enabledActions.includes(mixin) | ||
| mixinMocks[mixin] = [{ isEnabled: () => isEnabled, name: '', items: [] }] | ||
| } | ||
| return mixinMocks | ||
| } |