Odp-5 fixes (#96)

* Odp-5 fixes * Remove file * Modal for deletions
wri · Nov 14, 2023 · fcaf3bd · fcaf3bd
1 parent e8ca95e
commit fcaf3bd
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 34 deletions.
diff --git a/deployment/frontend/src/components/dashboard/datasets/admin/CreateDatasetForm.tsx b/deployment/frontend/src/components/dashboard/datasets/admin/CreateDatasetForm.tsx
@@ -22,7 +22,6 @@ import { match } from 'ts-pattern'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function CreateDatasetForm() {
-    const datasetId = uuidv4()
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
     const [selectedIndex, setSelectedIndex] = useState(0)
     const router = useRouter()
@@ -31,7 +30,6 @@ export default function CreateDatasetForm() {
         resolver: zodResolver(DatasetSchema),
         mode: 'onBlur',
         defaultValues: {
-            id: datasetId,
             team: {
                 value: '',
                 label: '',

diff --git a/deployment/frontend/src/components/dashboard/datasets/admin/metadata/Overview.tsx b/deployment/frontend/src/components/dashboard/datasets/admin/metadata/Overview.tsx
@@ -39,6 +39,8 @@ export function OverviewForm({
     const topicHierarchy = api.topics.getTopicsHierarchy.useQuery()
     const possibleLicenses = api.dataset.getLicenses.useQuery()
 
+    console.log(errors)
+    console.log(watch('team'))
     return (
         <MetadataAccordion
             defaultOpen={true}
@@ -137,7 +139,7 @@ export function OverviewForm({
                                     page
                                 </span>
                             ))}
-                        <ErrorDisplay name="parent" errors={errors} />
+                        <ErrorDisplay name="team" errors={errors} />
                     </InputGroup>
                     <InputGroup label="Projects">
                         <MulText

diff --git a/deployment/frontend/src/components/dashboard/teams/forms/EditTeamForm.tsx b/deployment/frontend/src/components/dashboard/teams/forms/EditTeamForm.tsx
@@ -4,15 +4,19 @@ import TeamForm from './TeamForm'
 import { Breadcrumbs } from '@/components/_shared/Breadcrumbs'
 import Container from '@/components/_shared/Container'
 import { TeamFormType, TeamSchema } from '@/schema/team.schema'
-import { LoaderButton } from '@/components/_shared/Button'
+import { LoaderButton, Button } from '@/components/_shared/Button'
 import { zodResolver } from '@hookform/resolvers/zod'
 import notify from '@/utils/notify'
 import { api } from '@/utils/api'
 import { ErrorAlert } from '@/components/_shared/Alerts'
 import { useRouter } from 'next/router'
+import Modal from '@/components/_shared/Modal'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { Dialog } from '@headlessui/react'
 
 export default function EditTeamForm({ team }: { team: TeamFormType }) {
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
+    const [deleteOpen, setDeleteOpen] = useState(false)
     const router = useRouter()
     const links = [
         { label: 'Teams', url: '/dashboard/teams', current: false },
@@ -30,35 +34,81 @@ export default function EditTeamForm({ team }: { team: TeamFormType }) {
 
     const editTeam = api.teams.editTeam.useMutation({
         onSuccess: async ({ name, title }) => {
-            notify(`Successfully edited the ${title ?? name} team`, 'success')
+            notify(`Successfully deleted the ${title ? title : name ?? ''} team`, 'error')
             router.push('/dashboard/teams')
         },
         onError: (error) => setErrorMessage(error.message),
     })
 
     const deleteTeam = api.teams.deleteTeam.useMutation({
         onSuccess: async ({ name, title }) => {
+            setDeleteOpen(false)
             notify(`Successfully deleted the ${title ?? name} team`, 'error')
             router.push('/dashboard/teams')
         },
-        onError: (error) => setErrorMessage(error.message),
+        onError: (error) => {
+            setDeleteOpen(false)
+            setErrorMessage(error.message)
+        },
     })
 
     return (
         <>
+            <Modal
+                open={deleteOpen}
+                setOpen={setDeleteOpen}
+                className="sm:w-full sm:max-w-lg"
+            >
+                <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <ExclamationTriangleIcon
+                            className="h-6 w-6 text-red-600"
+                            aria-hidden="true"
+                        />
+                    </div>
+                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                        <Dialog.Title
+                            as="h3"
+                            className="text-base font-semibold leading-6 text-gray-900"
+                        >
+                            Delete Team
+                        </Dialog.Title>
+                        <div className="mt-2">
+                            <p className="text-sm text-gray-500">
+                                Are you sure you want to delete this team?
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-5 sm:mt-4 gap-x-4 sm:flex sm:flex-row-reverse">
+                    <LoaderButton
+                        variant="destructive"
+                        loading={deleteTeam.isLoading}
+                        onClick={() => deleteTeam.mutate({ id: team.name })}
+                    >
+                        Delete Team
+                    </LoaderButton>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        onClick={() => setDeleteOpen(false)}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </Modal>
             <Breadcrumbs links={links} />
             <Container className="mb-20 font-acumin">
                 <div className="flex justify-between">
                     <h1 className="mb-[2rem] text-[1.57rem] font-semibold">
                         Edit team
                     </h1>
-                    <LoaderButton
+                    <Button
                         variant="destructive"
-                        loading={deleteTeam.isLoading}
-                        onClick={() => deleteTeam.mutate({ id: team.name })}
+                        onClick={() => setDeleteOpen(true)}
                     >
                         Delete Team
-                    </LoaderButton>
+                    </Button>
                 </div>
 
                 <form

diff --git a/deployment/frontend/src/components/dashboard/topics/forms/EditTopicForm.tsx b/deployment/frontend/src/components/dashboard/topics/forms/EditTopicForm.tsx
@@ -3,16 +3,20 @@ import { useState } from 'react'
 import { Breadcrumbs } from '@/components/_shared/Breadcrumbs'
 import Container from '@/components/_shared/Container'
 import { TopicFormType, TopicSchema } from '@/schema/topic.schema'
-import { LoaderButton } from '@/components/_shared/Button'
+import { LoaderButton, Button } from '@/components/_shared/Button'
 import { zodResolver } from '@hookform/resolvers/zod'
 import notify from '@/utils/notify'
 import { api } from '@/utils/api'
 import { ErrorAlert } from '@/components/_shared/Alerts'
 import TopicForm from './TopicForm'
 import { useRouter } from 'next/router'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { Dialog } from '@headlessui/react'
+import Modal from '@/components/_shared/Modal'
 
 export default function EditTopicForm({ topic }: { topic: TopicFormType }) {
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
+    const [deleteOpen, setDeleteOpen] = useState(false)
     const router = useRouter()
     const links = [
         { label: 'Topics', url: '/dashboard/topics', current: false },
@@ -34,32 +38,80 @@ export default function EditTopicForm({ topic }: { topic: TopicFormType }) {
             router.push('/dashboard/topics')
             formObj.reset()
         },
-        onError: (error) => setErrorMessage(error.message),
+        onError: (error) => {
+            setErrorMessage(error.message)
+        },
     })
 
     const deleteTopic = api.topics.deleteTopic.useMutation({
         onSuccess: async ({ name, title }) => {
-            notify(`Successfully deleted the ${title ?? name} topic`, 'error')
+            notify(`Successfully deleted the ${title ? title : name ?? ''} topic`, 'error')
+            setDeleteOpen(false)
             router.push('/dashboard/topics')
         },
-        onError: (error) => setErrorMessage(error.message),
+        onError: (error) => {
+            setDeleteOpen(false)
+            setErrorMessage(error.message)
+        },
     })
 
     return (
         <>
+            <Modal
+                open={deleteOpen}
+                setOpen={setDeleteOpen}
+                className="sm:w-full sm:max-w-lg"
+            >
+                <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <ExclamationTriangleIcon
+                            className="h-6 w-6 text-red-600"
+                            aria-hidden="true"
+                        />
+                    </div>
+                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                        <Dialog.Title
+                            as="h3"
+                            className="text-base font-semibold leading-6 text-gray-900"
+                        >
+                            Delete Topic
+                        </Dialog.Title>
+                        <div className="mt-2">
+                            <p className="text-sm text-gray-500">
+                                Are you sure you want to delete this topic?
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-5 sm:mt-4 gap-x-4 sm:flex sm:flex-row-reverse">
+                    <LoaderButton
+                        variant="destructive"
+                        loading={deleteTopic.isLoading}
+                        onClick={() => deleteTopic.mutate({ id: topic.name })}
+                    >
+                        Delete Topic
+                    </LoaderButton>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        onClick={() => setDeleteOpen(false)}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </Modal>
             <Breadcrumbs links={links} />
             <Container className="mb-20 font-acumin">
                 <div className="flex justify-between">
                     <h1 className="mb-[2rem] text-[1.57rem] font-semibold">
                         Edit Topic
                     </h1>
-                    <LoaderButton
+                    <Button
                         variant="destructive"
-                        loading={deleteTopic.isLoading}
-                        onClick={() => deleteTopic.mutate({ id: topic.name })}
+                        onClick={() => setDeleteOpen(true)}
                     >
-                        Delete topic
-                    </LoaderButton>
+                        Delete Topic
+                    </Button>
                 </div>
 
                 <form

diff --git a/deployment/frontend/src/schema/dataset.schema.ts b/deployment/frontend/src/schema/dataset.schema.ts
@@ -16,7 +16,7 @@ export const DataDictionarySchema = z.array(
 export const ResourceSchema = z.object({
     description: z.string().optional(),
     resourceId: z.string().uuid(),
-    url: z.string().min(2, { message: 'URL is required'}).url().optional(),
+    url: z.string().min(2, { message: 'URL is required' }).url().optional(),
     name: z.string().optional(),
     key: z.string().optional(),
     format: z
@@ -34,7 +34,6 @@ export const ResourceSchema = z.object({
 })
 
 export const DatasetSchema = z.object({
-    id: z.string().uuid(),
     title: z.string().min(1, { message: 'Title is required' }),
     name: z.string().min(1, { message: 'Name is required' }),
     source: z.string().optional().nullable().or(emptyStringToUndefined),
@@ -44,11 +43,15 @@ export const DatasetSchema = z.object({
             label: z.string(),
         })
         .optional(),
-    team: z.object({
-        value: z.string(),
-        label: z.string(),
-        id: z.string(),
-    }).optional(),
+    team: z
+        .object({
+            value: z.string(),
+            label: z.string(),
+            id: z.string(),
+        })
+        .refine((val) => val.value !== '', {
+            message: 'Team is required',
+        }),
     projects: z.array(z.string()),
     applications: z.string().optional().nullable(),
     technical_notes: z.string().url(),
@@ -86,7 +89,9 @@ export const DatasetSchema = z.object({
             label: z.string(),
         })
         .optional(),
-    short_description: z.string().min(1, { message: 'Description is required' }),
+    short_description: z
+        .string()
+        .min(1, { message: 'Description is required' }),
     notes: z.string().optional().nullable(),
     featured_dataset: z.boolean().optional().nullable(),
     featured_image: z.string().optional().nullable(),

diff --git a/deployment/frontend/src/server/api/routers/dataset.ts b/deployment/frontend/src/server/api/routers/dataset.ts
@@ -38,10 +38,7 @@ export const DatasetRouter = createTRPCRouter({
                             ? { schema: resource.dataDictionary }
                             : '{}',
                         dataDictionary: null,
-                        url:
-                            resource.type === 'upload'
-                                ? `${env.CKAN_URL}/dataset/${input.id}/resource/${resource.resourceId}/${resource.name}`
-                                : resource.url,
+                        url: resource.url ?? resource.name,
                     })),
                     temporal_coverage:
                         input.temporalCoverageStart && input.temporalCoverageEnd

diff --git a/deployment/frontend/src/server/api/routers/teams.ts b/deployment/frontend/src/server/api/routers/teams.ts
@@ -9,7 +9,7 @@ export const teamRouter = createTRPCRouter({
         console.log(env.CKAN_URL)
         const user = ctx.session.user
         const teamRes = await fetch(
-            `${env.CKAN_URL}/api/action/organization_list?all_fields=True`,
+            `${env.CKAN_URL}/api/action/organization_list_for_user?all_fields=True`,
             {
                 headers: {
                     'Content-Type': 'application/json',
@@ -18,7 +18,11 @@ export const teamRouter = createTRPCRouter({
             }
         )
         const teams: CkanResponse<Organization[]> = await teamRes.json()
-        return teams.result
+                if (!teams.success && teams.error) {
+                    if (teams.error.message) throw Error(teams.error.message)
+                    throw Error(JSON.stringify(teams.error))
+                }
+        return teams.result.filter((team) => team.state === 'active')
     }),
     editTeam: protectedProcedure
         .input(TeamSchema)

diff --git a/deployment/frontend/src/server/api/routers/topics.ts b/deployment/frontend/src/server/api/routers/topics.ts
@@ -84,7 +84,7 @@ export const TopicRouter = createTRPCRouter({
         )
         const topics: CkanResponse<Group[]> = await topicRes.json()
         if (!topics.success && topics.error) throw Error(topics.error.message)
-        return topics.result
+        return topics.result.filter((topic) => topic.state === 'active')
     }),
     editTopic: protectedProcedure
         .input(TopicSchema)