-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Allow managing communication templates from ozone (#225)
* ✨ Allow managing communication templates from ozone * 💄 Make buttons and links better * ✨ Drive tabs through URL * ✨ Add email action for account * 🧹 Cleanup keys * ✨ Adjust field from content -> contentMarkdown * ✨ Adjust typings and field names to match lexicons
- Loading branch information
Showing
18 changed files
with
656 additions
and
109 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
'use client' | ||
|
||
import { CommunicationTemplateForm } from 'components/communication-template/form' | ||
|
||
export default function CommunicationTemplateEditPage({ params: { id } }) { | ||
return ( | ||
<div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto"> | ||
<h2 className="text-gray-600 font-semibold mb-3 pb-2 mt-4 border-b border-gray-300"> | ||
Edit Template #{id} | ||
</h2> | ||
<CommunicationTemplateForm templateId={id} /> | ||
</div> | ||
) | ||
} |
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,14 @@ | ||
'use client' | ||
|
||
import { CommunicationTemplateForm } from 'components/communication-template/form' | ||
|
||
export default function CommunicationTemplateCreatePage() { | ||
return ( | ||
<div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto"> | ||
<h2 className="text-gray-600 font-semibold mb-3 pb-2 mt-4 border-b border-gray-300"> | ||
Create New Template | ||
</h2> | ||
<CommunicationTemplateForm /> | ||
</div> | ||
) | ||
} |
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,94 @@ | ||
'use client' | ||
|
||
import format from 'date-fns/format' | ||
import { useState } from 'react' | ||
import Link from 'next/link' | ||
import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/20/solid' | ||
|
||
import { LabelChip } from '@/common/labels' | ||
import { Loading, LoadingFailed } from '@/common/Loader' | ||
import { useCommunicationTemplateList } from 'components/communication-template/hooks' | ||
import { CommunicationTemplateDeleteConfirmationModal } from 'components/communication-template/delete-confirmation-modal' | ||
import { ActionButton, LinkButton } from '@/common/buttons' | ||
|
||
export default function CommunicationTemplatePage() { | ||
const { data, error, isLoading } = useCommunicationTemplateList({}) | ||
const [deletingTemplateId, setDeletingTemplateId] = useState< | ||
string | undefined | ||
>() | ||
|
||
if (isLoading) { | ||
return <Loading message="Loading templates" /> | ||
} | ||
|
||
if (error) { | ||
return <LoadingFailed error={error} /> | ||
} | ||
|
||
return ( | ||
<div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto"> | ||
<div className="flex flex-row justify-between items-center"> | ||
<h2 className="font-semibold text-gray-600 mb-3 mt-4"> | ||
Communication Templates | ||
</h2> | ||
<LinkButton | ||
href="/communication-template/create" | ||
appearance="primary" | ||
size="sm" | ||
> | ||
<PlusIcon className="h-4 w-4 mr-1" /> | ||
New Template | ||
</LinkButton> | ||
</div> | ||
<CommunicationTemplateDeleteConfirmationModal | ||
templateId={deletingTemplateId} | ||
setIsDialogOpen={() => setDeletingTemplateId(undefined)} | ||
/> | ||
<ul> | ||
{!data?.length && ( | ||
<div className="shadow bg-white rounded-sm p-5 text-gray-700 mb-3 text-center"> | ||
<p>No templates found</p> | ||
<p className="text-sm text-gray-900"> | ||
Create a new template to send emails to users. | ||
</p> | ||
</div> | ||
)} | ||
{data?.map((template) => ( | ||
<li | ||
key={template.id} | ||
className="shadow bg-white rounded-sm p-3 text-gray-700 mb-3" | ||
> | ||
<p className="flex flex-row justify-between"> | ||
<span className="text-sm text-gray-900">{template.name}</span> | ||
{template.disabled && ( | ||
<LabelChip className="bg-red-200">Disabled</LabelChip> | ||
)} | ||
</p> | ||
<p className="text-sm">Subject: {template.subject}</p> | ||
<div className="text-sm flex flex-row justify-between"> | ||
<span> | ||
Last Updated{' '} | ||
{format(new Date(template.updatedAt), 'do MMM yyyy')} | ||
</span> | ||
<div className="flex flex-row"> | ||
<Link | ||
href={`/communication-template/${template.id}/edit`} | ||
className="flex flex-row items-center border border-gray-400 rounded-sm px-2 hover:bg-gray-100 mx-1" | ||
> | ||
<PencilIcon className="h-3 w-3 mr-1" /> | ||
Edit | ||
</Link> | ||
<ActionButton | ||
appearance="outlined" | ||
onClick={() => setDeletingTemplateId(template.id)} | ||
> | ||
<TrashIcon className="h-3 w-3" /> | ||
</ActionButton> | ||
</div> | ||
</div> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
) | ||
} |
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,60 @@ | ||
'use client' | ||
import { AccountView } from '@/repositories/AccountView' | ||
import { createReport } from '@/repositories/createReport' | ||
import { useRepoAndProfile } from '@/repositories/useRepoAndProfile' | ||
import { ComAtprotoAdminEmitModerationEvent } from '@atproto/api' | ||
import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction' | ||
import { usePathname, useRouter, useSearchParams } from 'next/navigation' | ||
import { emitEvent } from '@/mod-event/helpers/emitEvent' | ||
|
||
export function RepositoryViewPageContent({ id }: { id: string }) { | ||
const { | ||
error, | ||
data: { repo, profile } = {}, | ||
refetch, | ||
isLoading: isInitialLoading, | ||
} = useRepoAndProfile({ id }) | ||
const searchParams = useSearchParams() | ||
const router = useRouter() | ||
const pathname = usePathname() | ||
const quickOpenParam = searchParams.get('quickOpen') ?? '' | ||
const setQuickActionPanelSubject = (subject: string) => { | ||
const newParams = new URLSearchParams(document.location.search) | ||
if (!subject) { | ||
newParams.delete('quickOpen') | ||
} else { | ||
newParams.set('quickOpen', subject) | ||
} | ||
router.push((pathname ?? '') + '?' + newParams.toString()) | ||
} | ||
|
||
return ( | ||
<> | ||
<ModActionPanelQuick | ||
open={!!quickOpenParam} | ||
onClose={() => setQuickActionPanelSubject('')} | ||
setSubject={setQuickActionPanelSubject} | ||
subject={quickOpenParam} // select first subject if there are multiple | ||
subjectOptions={[quickOpenParam]} | ||
isInitialLoading={isInitialLoading} | ||
onSubmit={async ( | ||
vals: ComAtprotoAdminEmitModerationEvent.InputSchema, | ||
) => { | ||
await emitEvent(vals) | ||
refetch() | ||
}} | ||
/> | ||
<AccountView | ||
repo={repo} | ||
profile={profile} | ||
onSubmit={async (vals) => { | ||
await createReport(vals) | ||
refetch() | ||
}} | ||
onShowActionPanel={(subject) => setQuickActionPanelSubject(subject)} | ||
error={error} | ||
id={id} | ||
/> | ||
</> | ||
) | ||
} |
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 |
---|---|---|
@@ -1,62 +1,13 @@ | ||
'use client' | ||
import { AccountView } from '@/repositories/AccountView' | ||
import { createReport } from '@/repositories/createReport' | ||
import { useRepoAndProfile } from '@/repositories/useRepoAndProfile' | ||
import { ComAtprotoAdminEmitModerationEvent } from '@atproto/api' | ||
import { ModActionPanelQuick } from 'app/actions/ModActionPanel/QuickAction' | ||
import { usePathname, useRouter, useSearchParams } from 'next/navigation' | ||
import { emitEvent } from '@/mod-event/helpers/emitEvent' | ||
import { Suspense } from 'react' | ||
import { RepositoryViewPageContent } from './page-content' | ||
|
||
export default function Repository({ params }: { params: { id: string } }) { | ||
export default function RepositoryViewPage({ params }: { params: { id: string } }) { | ||
const { id: rawId } = params | ||
const id = decodeURIComponent(rawId) | ||
const { | ||
error, | ||
data: { repo, profile } = {}, | ||
refetch, | ||
isLoading: isInitialLoading, | ||
} = useRepoAndProfile({ id }) | ||
const searchParams = useSearchParams() | ||
const router = useRouter() | ||
const pathname = usePathname() | ||
const quickOpenParam = searchParams.get('quickOpen') ?? '' | ||
const setQuickActionPanelSubject = (subject: string) => { | ||
const newParams = new URLSearchParams(document.location.search) | ||
if (!subject) { | ||
newParams.delete('quickOpen') | ||
} else { | ||
newParams.set('quickOpen', subject) | ||
} | ||
router.push((pathname ?? '') + '?' + newParams.toString()) | ||
} | ||
|
||
return ( | ||
<> | ||
<ModActionPanelQuick | ||
open={!!quickOpenParam} | ||
onClose={() => setQuickActionPanelSubject('')} | ||
setSubject={setQuickActionPanelSubject} | ||
subject={quickOpenParam} // select first subject if there are multiple | ||
subjectOptions={[quickOpenParam]} | ||
isInitialLoading={isInitialLoading} | ||
onSubmit={async ( | ||
vals: ComAtprotoAdminEmitModerationEvent.InputSchema, | ||
) => { | ||
await emitEvent(vals) | ||
refetch() | ||
}} | ||
/> | ||
<AccountView | ||
repo={repo} | ||
profile={profile} | ||
onSubmit={async (vals) => { | ||
await createReport(vals) | ||
refetch() | ||
}} | ||
onShowActionPanel={(subject) => setQuickActionPanelSubject(subject)} | ||
error={error} | ||
id={id} | ||
/> | ||
</> | ||
<Suspense fallback={<div></div>}> | ||
<RepositoryViewPageContent id={id} /> | ||
</Suspense> | ||
) | ||
} |
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
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
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
Oops, something went wrong.