diff --git a/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx b/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx index 203963f0..c48f9ef0 100644 --- a/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx +++ b/src/components/announcements/create/publicMessageContainer/TcPublicMessageContainer.tsx @@ -16,6 +16,7 @@ import { ChannelContext } from '../../../../context/ChannelContext'; import TcPlatformChannelList from '../../../communitySettings/platform/TcPlatformChannelList'; import { IGuildChannels } from '../../../../utils/types'; import { DiscordData } from '../../../../pages/announcements/edit-announcements'; +import TcPermissionHints from '../../../global/TcPermissionHints'; export interface FlattenedChannel { id: string; @@ -143,66 +144,7 @@ function TcPublicMessageContainer({
-
- - - } - > - - - -
- -
    -
  1. - Navigate to the channel you want to import on{' '} - - Discord - -
    2. -
  2. - Go to the settings for that specific channel (select - the wheel on the right of the channel name) -
    3. -
  3. - Select Permissions (left sidebar), and then in - the middle of the screen check{' '} - Advanced permissions -
    4. -
  4. - With the TogetherCrew Bot selected, under - Advanced Permissions, make sure that [View channel] - and [Write Access] are marked as [✓] -
    5. -
  5. - Select the plus sign to the right of Roles/Members and - under members select TogetherCrew bot -
    6. -
  6. - Click on the Refresh List button on this window - and select the new channels -
    7. -
-
- - -
+ diff --git a/src/components/communitySettings/platform/TcPlatformChannelList.tsx b/src/components/communitySettings/platform/TcPlatformChannelList.tsx index 9baa339d..13bd52e4 100644 --- a/src/components/communitySettings/platform/TcPlatformChannelList.tsx +++ b/src/components/communitySettings/platform/TcPlatformChannelList.tsx @@ -95,7 +95,8 @@ function TcPlatformChannelList({ } disabled={channel?.subChannels?.some( (subChannel) => - !subChannel.canReadMessageHistoryAndViewChannel + !subChannel.canReadMessageHistoryAndViewChannel || + !subChannel.announcementAccess )} /> } diff --git a/src/components/global/TcPermissionHints/TcPermissionHints.spec.tsx b/src/components/global/TcPermissionHints/TcPermissionHints.spec.tsx new file mode 100644 index 00000000..13710ad1 --- /dev/null +++ b/src/components/global/TcPermissionHints/TcPermissionHints.spec.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import PermissionHints from './TcPermissionHints'; +describe('PermissionHints Component', () => { + test('renders PermissionHints component', () => { + render(); + expect(screen.getByText('Access Settings')).toBeInTheDocument(); + expect(screen.getByText('Server Level')).toBeInTheDocument(); + expect(screen.getByText('Category Level')).toBeInTheDocument(); + expect(screen.getByText('Channel Level')).toBeInTheDocument(); + }); + + test('initial active category is Access Settings', async () => { + render(); + await waitFor(() => { + expect( + screen.getByText('What does “Read” and “Write” access mean?') + ).toBeInTheDocument(); + }); + }); + + test('clicking on a category button changes active category to Server Level', async () => { + render(); + const serverLevelButton = screen.getByText('Server Level'); + userEvent.click(serverLevelButton); + await waitFor(() => { + expect( + screen.getByText( + 'Please note that your platform’s permission settings enable the above permission controls' + ) + ).toBeInTheDocument(); + }); + }); + + test('clicking on a category button changes active category to Category Level', async () => { + render(); + const categoryLevelButton = screen.getByText('Category Level'); + userEvent.click(categoryLevelButton); + await waitFor(() => { + expect( + screen.getByText( + 'Please note that Category-level permissions override Server-level permissions' + ) + ).toBeInTheDocument(); + }); + }); + + test('clicking on a category button changes active category to Channel Level', async () => { + render(); + + const channelLevelButton = screen.getByText('Channel Level'); + + userEvent.click(channelLevelButton); + + await waitFor(() => { + expect( + screen.getByText( + 'Please note that Channel-level permissions override Category-level permissions, which in turn override Server-level permissions' + ) + ).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/global/TcPermissionHints/TcPermissionHints.tsx b/src/components/global/TcPermissionHints/TcPermissionHints.tsx new file mode 100644 index 00000000..9553dfd6 --- /dev/null +++ b/src/components/global/TcPermissionHints/TcPermissionHints.tsx @@ -0,0 +1,332 @@ +import React, { useState } from 'react'; +import TcButtonGroup from '../../shared/TcButtonGroup'; +import TcButton from '../../shared/TcButton'; +import clsx from 'clsx'; +import TcText from '../../shared/TcText'; + +const permissionCategories = [ + 'Access Settings', + 'Server Level', + 'Category Level', + 'Channel Level', +]; + +function PermissionHints() { + const [activeCategory, setActiveCategory] = + useState('Access Settings'); + + const handleButtonClick = (category: string) => { + setActiveCategory(category); + }; + + const getDescription = (category: string) => { + switch (category) { + case 'Access Settings': + return ( +
+ +
    +
  1. + +
      +
    • + +
      • +
    • + +
      • +
    +
    2. +
+
    +
  1. + +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    2. +
+
+ ); + case 'Server Level': + return ( +
+ +
    +
  1. + + Navigate to the “Server Settings” in the top-left + corner of Discord + + } + variant="subtitle1" + /> +
    2. +
  2. + + Select “Role/Members” (left sidebar), and then in + the middle of the screen check Advanced permissions + + } + variant="subtitle1" + /> +
    3. +
  3. + + Then select “TogetherCrew” and under Advanced + Permissions, make sure that the following are marked as + [✓] + + } + variant="subtitle1" + /> + +
      +
    1. + +
      2. +
    2. + +
      3. +
    +
    4. +
+ + Finally: Click on the Refresh List button on this page + and select the channels that have now been made available to + you + + } + variant="subtitle1" + /> +
+ ); + case 'Category Level': + return ( +
+ +
    +
  1. + + Navigate to the “Edit Category” in the top-left + corner of Discord + + } + variant="subtitle1" + /> +
    2. +
  2. + + Select “Permissions” (left sidebar), and then in + the middle of the screen check Advanced permissions + + } + variant="subtitle1" + /> +
    3. +
  3. + + Then select “TogetherCrew” and under Advanced + Permissions, make sure that the following are marked as + [✓] + + } + variant="subtitle1" + /> + +
      +
    1. + +
      2. +
    2. + +
      3. +
    +
    4. +
+ + Finally: Click on the Refresh List button on this page + and select the channels that have now been made available to + you + + } + variant="subtitle1" + /> +
+ ); + case 'Channel Level': + return ( +
+ +
    +
  1. + + Navigate to the settings for a specific channel (select + the wheel on the right of the channel name) + + } + variant="subtitle1" + /> +
    2. +
  2. + + Select “Permissions” (left sidebar), and then in + the middle of the screen check Advanced permissions + + } + variant="subtitle1" + /> +
    3. +
  3. + + Then select “TogetherCrew” and under Advanced + Permissions, make sure that the following are marked as + [✓] + + } + variant="subtitle1" + /> + +
      +
    1. + +
      2. +
    2. + +
      3. +
    +
    4. +
+ + Finally: Click on the Refresh List button on this page + and select the channels that have now been made available to + you + + } + variant="subtitle1" + /> +
+ ); + default: + return null; + } + }; + + return ( +
+ + {permissionCategories.map((category) => ( + handleButtonClick(category)} + className={clsx( + 'border', + category === activeCategory + ? 'bg-secondary text-white border-secondary' + : 'border-secondary bg-white text-secondary' + )} + sx={{ + width: 'auto', + padding: { + xs: 'auto', + sm: '0.4rem 1rem', + }, + }} + /> + ))} + +
{getDescription(activeCategory)}
+
+ ); +} + +export default PermissionHints; diff --git a/src/components/global/TcPermissionHints/index.ts b/src/components/global/TcPermissionHints/index.ts new file mode 100644 index 00000000..3bfc5a13 --- /dev/null +++ b/src/components/global/TcPermissionHints/index.ts @@ -0,0 +1,3 @@ +import { default as TcPermissionHints } from './TcPermissionHints'; + +export default TcPermissionHints; diff --git a/src/context/ChannelContext.tsx b/src/context/ChannelContext.tsx index 442188a4..deb54d0f 100644 --- a/src/context/ChannelContext.tsx +++ b/src/context/ChannelContext.tsx @@ -6,6 +6,7 @@ export interface SubChannel { name: string; parentId: string; canReadMessageHistoryAndViewChannel: boolean; + announcementAccess: boolean; } export interface Channel {