Feature-395-rule_status

.storybook/main.js

@@ -3,18 +3,25 @@ module.exports = {
     "../src/**/*.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
+
   framework: {
     name: "@storybook/nextjs",
     options: {}
   },
+
   resolve: {
     fallback: {
       util: require.resolve("util")
     }
   },
+
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -61,14 +61,14 @@
     "@babel/core": "^7.20.12",
     "@faker-js/faker": "^8.0.1",
     "@inrupt/jest-jsdom-polyfills": "^1.5.5",
-    "@storybook/addon-actions": "^7.0.0-beta.49",
-    "@storybook/addon-essentials": "^7.0.0-beta.49",
-    "@storybook/addon-interactions": "^7.0.0-beta.49",
-    "@storybook/addon-links": "^7.0.0-beta.49",
-    "@storybook/nextjs": "^7.0.0-beta.49",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/nextjs": "^7.6.4",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.0-beta.49",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/react": "^7.6.4",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -78,7 +78,7 @@
     "dedent-js": "^1.0.1",
     "eslint": "^8.34.0",
     "eslint-config-next": "^13.1.6",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "jest-fetch-mock": "^3.0.3",
@@ -89,7 +89,7 @@
     "react-test-renderer": "^18.2.0",
     "sass": "^1.58.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.0-beta.49",
+    "storybook": "^7.6.4",
     "style-loader": "^3.3.1",
     "tailwindcss-animate": "^1.0.5",
     "ts-node": "^10.9.1"

src/app/(rucio)/rule/create/page.tsx

@@ -2,8 +2,8 @@
 import { CreateRule as CreateRuleStory } from "@/component-library/Pages/Rule/CreateRule";
 import { RSEAccountUsageLimitViewModel } from "@/lib/infrastructure/data/view-model/rse";
 import {
-    TCreateRuleRequest,
-    TFetchCreateRuleSummaryRequest,
+    CreateRulesViewModel,
+    generateEmptyCreateRulesViewModel,
     TypedDIDValidationQuery, TypedDIDValidationResponse,
 } from '@/lib/infrastructure/data/view-model/create-rule'
 import useComDOM from "@/lib/infrastructure/hooks/useComDOM";
@@ -13,43 +13,37 @@ import { ListDIDsViewModel } from "@/lib/infrastructure/data/view-model/list-did
 import { useEffect, useState } from "react";
 import { AccountInfo } from "@/lib/core/entity/rucio";
 import { generateEmptyAccountInfoViewModel } from "@/lib/infrastructure/data/view-model/account";
+import { TCreateRuleFeatureRequestParams } from "@/pages/api/feature/create-rule";
 
 export default function CreateRule() {
 
-    const onSubmit = (query: TCreateRuleRequest) => {
-        return Promise.resolve({
-            success: true,
-        })
-    }
-
-    const fetchSummary = (
-        query: TFetchCreateRuleSummaryRequest,
-        setSummaryViewModel: (viewModel: RuleSummaryViewModel) => void,
-        setActivePage: (int: number) => void,
-        setError: (error: string) => void,
-        ) => {
-        const url: URL = new URL(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/create-rule-summary`)
-        fetch(url.toString(), {
-            method: "POST",
-            headers: new Headers({
-                'Content-Type': 'application/json'
-            } as HeadersInit),
-            body: JSON.stringify(query)
-        }).then((response) => {
+    const onSubmit = async (query: TCreateRuleFeatureRequestParams) => {
+        let viewModel: CreateRulesViewModel = generateEmptyCreateRulesViewModel()
+        viewModel.status = 'pending'
+
+        try {
+            const response = await fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/create-rule`, {
+                method: "POST",
+                headers: new Headers({
+                    'Content-Type': 'application/json'
+                } as HeadersInit),
+                body: JSON.stringify(query)
+            })
+
             if(response.ok) {
-                return response.json()
+                const data: CreateRulesViewModel = await response.json()
+                viewModel = data
             } else {
-                setError(`Error fetching summary. HTTP Status Code: ${response.status}`)
+                throw new Error(`Error creating rule. HTTP Status Code: ${response.status}`)
             }
-        }).then((data: RuleSummaryViewModel) => {
-            setSummaryViewModel(data)
-            setActivePage(3)
-        }).catch((error) => {
-            setError(`Error fetching summary. Error: ${error}`)
-        })
-        return query
-    }
+        } catch (error: any) {
+            viewModel.status = 'error'
+            viewModel.message = error.message
+        }
 
+        return viewModel
+    }
+
     const didValidation = (query: TypedDIDValidationQuery) => {
         // if the DID contains the string "error", it will be added to the error list
         var localErrorDIDs: TypedDIDValidationResponse = { ErrorList: [] }
@@ -124,7 +118,6 @@ export default function CreateRule() {
         <CreateRuleStory
             accountInfo={accountInfo}
             onSubmit={onSubmit}
-            fetchSummary={fetchSummary}
             didValidation={didValidation}
             didListComDOM={DIDSearchComDOM}
             rseListComDOM={RSEComDOM}

src/component-library/Demos/01_1_Login.stories.tsx

@@ -76,7 +76,7 @@ export const Playbook_InitLogin: Story = {
         const canvas = within(canvasElement);
 
         const userpassButton = canvas.getByRole('button', {name: /Userpass/})
-        await userEvent.click(userpassButton, {button: 0}, {skipPointerEventsCheck: true})
+        await userEvent.click(userpassButton)
 
         const usernameTextbox = canvas.getByRole('textbox', {name: /Username/})
         await userEvent.type(usernameTextbox, 'mayank', {delay: 100})

src/component-library/Demos/03_1_Create_Rules.stories.tsx

@@ -1,6 +1,7 @@
-import { TCreateRuleRequest, TypedDIDValidationQuery, TypedDIDValidationResponse } from "@/lib/infrastructure/data/view-model/create-rule";
+import { CreateRulesViewModel, TypedDIDValidationQuery, TypedDIDValidationResponse } from "@/lib/infrastructure/data/view-model/create-rule";
+import { TCreateRuleFeatureRequestParams } from "@/pages/api/feature/create-rule";
 import { Meta, StoryObj } from "@storybook/react";
-import { fixtureDIDLongViewModel, fixtureListDIDViewModel, fixtureRSEAccountUsageLimitViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
+import { fixtureListDIDViewModel, fixtureRSEAccountUsageLimitViewModel, mockUseComDOM } from "test/fixtures/table-fixtures";
 import { CreateRule  as CR} from "../Pages/Rule/CreateRule.stories";
 
 export default {
@@ -12,9 +13,19 @@ type Story  = StoryObj<typeof CR>
 
 export const CreateRule: Story = {
     args: {
-        onSubmit: (query: TCreateRuleRequest) => {
+        onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
             return Promise.resolve({
-                success: true,
+                status: 'success',
+                rules: [
+                    {
+                        RuleID: "123123143243",
+                        DID: "scope:dataset1"
+                    },
+                    {
+                        RuleID: "127849dsgs",
+                        DID: "scope:dataset2"
+                    },
+                ]
             })
         },
         didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDViewModel())),

src/component-library/Pages/Rule/CreateRule.stories.tsx

@@ -3,12 +3,10 @@ import { fixtureListDIDViewModel as fixtureListDIDsViewModel, fixtureRSEAccountU
 
 import { CreateRule as CR } from './CreateRule'
 import {
-    TCreateRuleRequest,
-    TFetchCreateRuleSummaryRequest,
+    CreateRulesViewModel,
     TypedDIDValidationQuery, TypedDIDValidationResponse,
 } from '@/lib/infrastructure/data/view-model/create-rule'
-import { RuleSummaryViewModel } from '@/lib/infrastructure/data/view-model/rule'
-import { AccountStatus, AccountType } from '@/lib/core/entity/rucio'
+import { TCreateRuleFeatureRequestParams } from '@/pages/api/feature/create-rule'
 
 export default {
     title: 'Components/Pages/Rule',
@@ -19,33 +17,20 @@ const Template: StoryFn<typeof CR> = args => <CR {...args} />
 
 export const CreateRule = Template.bind({})
 CreateRule.args = {
-    onSubmit: (query: TCreateRuleRequest) => {
+    onSubmit: (query: TCreateRuleFeatureRequestParams): Promise<CreateRulesViewModel> => {
         return Promise.resolve({
-            success: true,
-        })
-    },
-    fetchSummary: (
-        query: TFetchCreateRuleSummaryRequest, 
-        setSummaryViewModel: (viewModel: RuleSummaryViewModel) => void, 
-        setActivePage: (int: number) => void,
-        setError: (error: string) => void,
-    ) => {
-        setSummaryViewModel({
-            ...query,
             status: 'success',
-            DIDList: query.DIDViewModels.map((did) => `${did.scope}:${did.name}`),
-            RSEList: query.RSEViewModels.map((rse) => rse.rse),
-            takeSamples: false,
-            accountInfo: {
-                account: 'maany',
-                accountType: AccountType.USER,
-                accountStatus: AccountStatus.ACTIVE,
-                createdAt: "2021-07-01T00:00:00Z",
-                updatedAt: "2021-07-01T00:00:00Z",
-                email: "abcd@sth.com",
-            }
+            rules: [
+                {
+                    RuleID: "123123143243",
+                    DID: "scope:dataset1"
+                },
+                {
+                    RuleID: "127849dsgs",
+                    DID: "scope:dataset2"
+                },
+            ]
         })
-        setActivePage(3)
     },
     didListComDOM: mockUseComDOM(Array.from({ length: 100 }, () => fixtureListDIDsViewModel())),
     didValidation: (query: TypedDIDValidationQuery) => {