add create rule status page #395

rucio · Dec 14, 2023 · af40c8e · af40c8e
1 parent b7afcb2
commit af40c8e
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 35 deletions.
diff --git a/src/component-library/Demos/03_1_Create_Rules.stories.tsx b/src/component-library/Demos/03_1_Create_Rules.stories.tsx
@@ -16,10 +16,16 @@ export const CreateRule: Story = {
         onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
             return Promise.resolve({
                 status: 'success',
-                rules: {
-                    "123123143243": "scope:dataset1",
-                    "127849dsgs": "scope:dataset2",
-                }
+                rules: [
+                    {
+                        RuleID: "123123143243",
+                        DID: "scope:dataset1"
+                    },
+                    {
+                        RuleID: "127849dsgs",
+                        DID: "scope:dataset2"
+                    },
+                ]
             })
         },
         didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDViewModel())),

diff --git a/src/component-library/Pages/Rule/CreateRule.stories.tsx b/src/component-library/Pages/Rule/CreateRule.stories.tsx
@@ -20,10 +20,16 @@ CreateRule.args = {
     onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
         return Promise.resolve({
             status: 'success',
-            rules: {
-                "123123143243": "scope:dataset1",
-                "127849dsgs": "scope:dataset2",
-            }
+            rules: [
+                {
+                    RuleID: "123123143243",
+                    DID: "scope:dataset1"
+                },
+                {
+                    RuleID: "127849dsgs",
+                    DID: "scope:dataset2"
+                },
+            ]
         })
     },
     didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDsViewModel())),

diff --git a/src/component-library/Pages/Rule/CreateRule.tsx b/src/component-library/Pages/Rule/CreateRule.tsx
@@ -282,11 +282,11 @@ export const CreateRule = (
     *  ================================================= */
    const [Page4State, setPage4State] = useState<Page4State>({
         status: 'pending',
-        rules: {}
+        rules: []
    })
 
     const submitRuleRequestAndLoadStatus = async (event: any) => {
-        setPage4State({ rules: {}, status: 'pending' })
+        setPage4State({ rules: [], status: 'pending' })
         setActivePage(4)
         const createRulesRequest:TCreateRuleFeatureRequestParams  = {
             RSEViewModels: Page1State.RSESelection,
@@ -326,7 +326,7 @@ export const CreateRule = (
                 />
             </Heading>
             <Body>
-                <RulePage pagenum={0} activePage={activePage} progressBlocked={Page0State.page0progressBlocked} onNext={(event: any) => { page0nextFunction(event) }} onPrev={pagePrevFunction}>
+                <RulePage pagenum={0} allowNext={true} allowPrev={false} activePage={activePage} progressBlocked={Page0State.page0progressBlocked} onNext={(event: any) => { page0nextFunction(event) }} onPrev={pagePrevFunction}>
                     <Tabs
                         tabs={["DID Search Pattern", "List of DIDs"]}
                         active={Page0State.selectDIDMethod}
@@ -386,7 +386,7 @@ export const CreateRule = (
                         </div>
                     </Collapsible>
                 </RulePage>
-                <RulePage pagenum={1} activePage={activePage} progressBlocked={Page1State.page1progressBlocked} onNext={() => { setActivePage(activePage + 1) }} onPrev={pagePrevFunction}>
+                <RulePage pagenum={1} allowNext allowPrev activePage={activePage} progressBlocked={Page1State.page1progressBlocked} onNext={() => { setActivePage(activePage + 1) }} onPrev={pagePrevFunction}>
                     <div className="flex flex-col space-y-2 m-2">
                         <div className="flex w-full flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
                             <label className="-mb-2 sm:mt-2.5 sm:w-36" htmlFor='rse-expression'><P>RSE Expression</P></label>
@@ -416,7 +416,7 @@ export const CreateRule = (
                         </div>
                     </div>
                 </RulePage>
-                <RulePage pagenum={2} activePage={activePage} progressBlocked={Page2State.page2progressBlocked} onNext={() => { loadRuleSummaryPage() }} onPrev={pagePrevFunction}>
+                <RulePage pagenum={2} allowNext allowPrev activePage={activePage} progressBlocked={Page2State.page2progressBlocked} onNext={() => { loadRuleSummaryPage() }} onPrev={pagePrevFunction}>
                     <div className="flex md:flex-row md:space-x-2 flex-col space-y-2 m-2">
                         <div className="flex flex-col space-y-2 md:w-60 w-full">
                             <div className="w-full">
@@ -527,7 +527,7 @@ export const CreateRule = (
                         </div>
                     </div>
                 </RulePage>
-                <RulePage pagenum={3} activePage={activePage} onNext={submitRuleRequestAndLoadStatus} onPrev={pagePrevFunction} submit>
+                <RulePage pagenum={3} activePage={activePage} allowNext allowPrev onNext={submitRuleRequestAndLoadStatus} onPrev={pagePrevFunction} submit>
                     <SummaryPage data={summaryViewModel? summaryViewModel : {
                         status: 'error',
                         message: 'Please check your inputs on previous pages! Cannot retrieve summary from the server',
@@ -548,7 +548,7 @@ export const CreateRule = (
                         accountInfo: props.accountInfo,
                     }} />
                 </RulePage>
-                <RulePage pagenum={4} activePage={activePage} onPrev={pagePrevFunction} onNext={() =>{}} isLastPage>
+                <RulePage pagenum={4} activePage={activePage} onPrev={pagePrevFunction} onNext={() =>{}} allowNext={false} allowPrev={Page4State.status === 'error'}>
                     <CreateRuleStatusPage createRuleViewModel={Page4State} />
                 </RulePage>
             </Body>

diff --git a/src/component-library/Pages/Rule/CreateRuleStatusPage.stories.tsx b/src/component-library/Pages/Rule/CreateRuleStatusPage.stories.tsx
@@ -14,8 +14,17 @@ const Template: StoryFn<typeof CreateRuleStatusPage> = (args) => <CreateRuleStat
 export const Story = Template.bind({});
 Story.args = {
   createRuleViewModel: {
-    status: 'error',
+    status: 'success',
     message: 'There has been an error my ser!',
-    rules : {}
+    rules: [
+      {
+        "RuleID": "1234567890",
+        "DID": "scope:name",
+      },
+      {
+        "RuleID": "1234567890",
+        "DID": "scope:name",
+      }
+    ]
   },
 } as TCreateRuleStatusPageProps;
diff --git a/src/component-library/Pages/Rule/CreateRuleStatusPage.tsx b/src/component-library/Pages/Rule/CreateRuleStatusPage.tsx
@@ -1,4 +1,8 @@
-import { CreateRulesViewModel } from "@/lib/infrastructure/data/view-model/create-rule"
+import { Alert } from "@/component-library/Misc/Alert"
+import { NormalTable } from "@/component-library/StreamedTables/NormalTable"
+import { CreateRulesViewModel, TRuleIDDIDPair } from "@/lib/infrastructure/data/view-model/create-rule"
+import { createColumnHelper } from "@tanstack/react-table"
+import Link from "next/link"
 import { useEffect, useState } from "react"
 import { twMerge } from "tailwind-merge"
 
@@ -10,10 +14,54 @@ export const CreateRuleStatusPage = ({
     createRuleViewModel
 }: TCreateRuleStatusPageProps
 ) => {
-    const [viewModel, setViewModel] = useState("")
 
+    const columnHelper = createColumnHelper<TRuleIDDIDPair>()
+    const tablecolumns: any[] = [
+        columnHelper.accessor("RuleID", {
+            id: "RuleID",
+            header: info => {
+                return (
+                    <div className="text-xl text-left dark:text-white">
+                        <span>Rule ID</span>
+                    </div>
+                )
+            },
+            cell: info => {
+                return (
+                    <div className="flex flex-col text-left dark:text-white">
+                        <Link
+                            className={twMerge(
+                                "text-blue-500 hover:text-blue-700",
+                                "dark:text-blue-400 dark:hover:text-blue-300"
+                            )}
+                            href={`/rule/page/${info.getValue()}`}
+                        >
+                            {info.getValue()}
+                        </Link>
+                    </div>
+                )
+            }
+        }),
+        columnHelper.accessor("DID", {
+            id: "DID",
+            header: info => {
+                return (
+                    <div className="text-xl text-left dark:text-white">
+                        <span>DID</span>
+                    </div>
+                )
+            },
+            cell: info => {
+                return (
+                    <div className="flex flex-col text-left dark:text-white">
+                        <span>{info.getValue()}</span>
+                    </div>
+                )
+            }
+        }),
+    ]
     // Handle Loading State
-    if (!createRuleViewModel) return (
+    if (!createRuleViewModel || createRuleViewModel.status === 'pending') return (
         <div
             className={twMerge(
                 "flex flex-col items-center space-y-4",
@@ -29,20 +77,28 @@ export const CreateRuleStatusPage = ({
         </div>
     )
     // Handle errors
-    if(createRuleViewModel.status === 'error'){
+    if (createRuleViewModel.status === 'error') {
         const errorMessage = createRuleViewModel.message
         return (
             <div
                 className={twMerge(
-                    "flex flex-col items-center space-y-4",
+                    "flex flex-col space-y-4",
                     "w-full h-full",
                     "p-2",
                     "bg-white dark:bg-gray-800",
                     "dark:text-white"
                 )}
             >
-                <div className="flex items-center justify-center w-56 h-56 ">
-                    <div className="px-3 py-1 text-xs font-medium leading-none text-center text-red-800 bg-red-200 rounded-full animate-pulse dark:bg-red-900 dark:text-red-200">{errorMessage}</div>
+                <Alert
+                    variant="error"
+                    message="Oops! Something went wrong."
+                />
+                <div className={twMerge(
+                    "border rounded-md p-1",
+                    "bg-white dark:bg-gray-800",
+                    "text-red-500"
+                )}>
+                    {errorMessage}
                 </div>
             </div>
         )
@@ -51,15 +107,40 @@ export const CreateRuleStatusPage = ({
     return (
         <div
             className={twMerge(
-                "flex flex-col items-center space-y-4",
+                "flex flex-col space-y-4",
                 "w-full h-full",
                 "p-2",
                 "bg-white dark:bg-gray-800",
                 "dark:text-white"
             )}
         >
-            <div className="flex items-center justify-center w-56 h-56 ">
-                <div className="px-3 py-1 text-xs font-medium leading-none text-center text-green-800 bg-green-200 rounded-full animate-pulse dark:bg-green-900 dark:text-green-200">Success!</div>
+            <Alert
+                variant="success"
+                message="Your rule(s) have been created. "
+
+            />
+            <NormalTable
+                tablecolumns={tablecolumns}
+                tabledata={createRuleViewModel.rules}
+                tablestyling={{
+                    "tableHeadRowStyle": "border-b border-gray-300 bg-gray-700 dark:bg-gray-800",
+                    "tableBodyRowStyle": twMerge(
+                        "bg-white odd:bg-stone-100 text-black",
+                        "dark:bg-gray-700 odd:dark:bg-gray-800 dark:text-gray-100",
+                        "border-b border-gray-300",
+                    )
+                }}
+            />
+            <div>
+                You can also view all your rules by clicking&nbsp;
+                <Link
+                    className={twMerge(
+                        "text-blue-500 hover:text-blue-700",
+                        "dark:text-blue-400 dark:hover:text-blue-300"
+                    )}
+                    href="/rule/list">
+                    here.
+                </Link>
             </div>
         </div>
     )

diff --git a/src/component-library/Pages/Rule/DIDSummaryTable.stories.tsx b/src/component-library/Pages/Rule/DIDSummaryTable.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { DIDSummaryTable } from "./DIDSummaryTable";
 
 export default {
-    title: 'Components/Pages/Rule/CreateRule/DIDSummaryTable',
+    title: 'Components/Pages/Rule/DIDSummaryTable',
     component: DIDSummaryTable,
 } as Meta<typeof DIDSummaryTable>;
 

diff --git a/src/component-library/Pages/Rule/RulePage.tsx b/src/component-library/Pages/Rule/RulePage.tsx
@@ -8,7 +8,8 @@ export const RulePage = (
         activePage: number,
         onNext: (event: any) => void,
         onPrev: (event: any) => void,
-        isLastPage?: boolean,
+        allowNext: boolean,
+        allowPrev: boolean,
         submit?: boolean,
         progressBlocked?: boolean,
         children?: any
@@ -27,13 +28,13 @@ export const RulePage = (
                     {props.children}
                 </div>
                 <div className="relative w-full h-8">
-                    <Collapsible showIf={props.activePage !== 0}>
+                    <Collapsible showIf={props.activePage !== 0 && props.allowPrev}>
                         <span className="absolute bottom-0 left-0 w-24">
                             <Button label="Previous" onClick={props.onPrev} />
                         </span>
                     </Collapsible>
                     {!props.submit ? (
-                        <Collapsible showIf={!props.isLastPage}>
+                        <Collapsible showIf={props.allowNext}>
                         <span className="absolute bottom-0 right-0 w-24">
                             <Button label="Next" disabled={props.progressBlocked} onClick={props.onNext} />
                         </span>

diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
@@ -2221,6 +2221,11 @@ html {
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -2630,6 +2635,11 @@ html {
     color: rgb(254 202 202 / var(--tw-text-opacity));
   }
 
+  .dark\:text-blue-400 {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity));
+  }
+
   .dark\:ring-gray-900 {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
@@ -2720,6 +2730,11 @@ html {
     color: rgb(96 165 250 / var(--tw-text-opacity));
   }
 
+  .dark\:hover\:text-blue-300:hover {
+    --tw-text-opacity: 1;
+    color: rgb(147 197 253 / var(--tw-text-opacity));
+  }
+
   .dark\:focus\:ring-blue-800:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));

diff --git a/src/lib/infrastructure/data/view-model/create-rule.ts b/src/lib/infrastructure/data/view-model/create-rule.ts
@@ -3,18 +3,24 @@ import { BaseViewModel } from "@/lib/sdk/view-models";
 import { FetchStatus } from "@tanstack/react-query";
 import { RSEAccountUsageLimitViewModel } from "./rse";
 
-
+/**
+ * Represents a pair of Rule ID and corresponding DID for a newly created rule.
+ */
+export interface TRuleIDDIDPair {
+    RuleID: string
+    DID: string
+}
 /**
  * View model for the Create Rule Request.
  * @property rules - The list of pairs of Rule ID and corresponding DID.
  */
 export interface CreateRulesViewModel extends BaseViewModel {
-    rules: Record<string, string>
+    rules: TRuleIDDIDPair[]
 }
 
 export const generateEmptyCreateRulesViewModel = (): CreateRulesViewModel => ({
     status: 'error',
-    rules: {},
+    rules: [],
 })
 
 /*

diff --git a/test/component/CreateRule.test.tsx b/test/component/CreateRule.test.tsx
@@ -21,7 +21,7 @@ let F: any  // fixtures
 const onSubmit = (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
     return Promise.resolve({
         status: 'success',
-        rules: {}
+        rules: []
     })
 }