Fix storybook

trento-project · Apr 26, 2024 · f91ac01 · f91ac01
1 parent c18de46
commit f91ac01
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/assets/js/lib/test-utils/factories/users.js b/assets/js/lib/test-utils/factories/users.js
@@ -4,7 +4,7 @@ import { Factory } from 'fishery';
 export const userFactory = Factory.define(() => ({
   id: faker.number.int(),
   username: faker.internet.userName(),
-  created_at: faker.date.past(),
+  created_at: faker.date.past().toISOString(),
   actions: 'Delete',
   enabled: faker.datatype.boolean(),
   fullname: faker.internet.displayName(),
@@ -14,7 +14,7 @@ export const userFactory = Factory.define(() => ({
 export const adminUser = userFactory.params({
   id: 1,
   username: 'admin',
-  created_at: faker.date.past(),
+  created_at: faker.date.past().toISOString(),
   enabled: true,
   fullname: 'Trento Admin',
   email: 'admin@trento.suse.com',

diff --git a/assets/js/pages/Users/Users.jsx b/assets/js/pages/Users/Users.jsx
@@ -16,7 +16,7 @@ function Users({
   onDeleteUser = noop,
   navigate = noop,
   users = defaultUsers,
-  loading = false,
+  loading = true,
 }) {
   const [modalOpen, setModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState(null);
@@ -95,6 +95,7 @@ function Users({
           <Button
             className="inline-block mx-1 border-green-500 border"
             size="small"
+            disabled={loading === true}
             onClick={() => navigate('/users/new')}
           >
             Create User

diff --git a/assets/js/pages/Users/Users.stories.jsx b/assets/js/pages/Users/Users.stories.jsx
@@ -2,10 +2,18 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
 
+import { adminUser, userFactory } from '@lib/test-utils/factories/users';
+
 import Users from './Users';
 
 const mockedNavigate = action('navigate');
 
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
 export default {
   title: 'Layouts/Users',
   component: Users,
@@ -32,24 +40,7 @@ export default {
       control: { type: 'function' },
       action: 'navigate',
     },
-    setModalOpen: {
-      description: 'Function to set the modal open state',
-      control: { type: 'function' },
-      action: 'setModalOpen',
-    },
-    setDeleteUserId: {
-      description: 'Function to set the user ID to delete',
-      control: { type: 'function' },
-      action: 'setDeleteUserId',
-    },
-    deleteUserId: {
-      description: 'Current user ID marked for deletion',
-      control: { type: 'number' },
-    },
-    modalOpen: {
-      description: 'Boolean to show or hide the modal',
-      control: { type: 'boolean' },
-    },
+
     users: {
       description: 'Array of users',
       control: { type: 'object' },
@@ -58,21 +49,18 @@ export default {
       description: 'Display loading state of the component',
       control: { type: 'boolean' },
     },
+    render: (args) => (
+      <ContainerWrapper>
+        <Users {...args} />
+      </ContainerWrapper>
+    ),
   },
 };
 
 export const Default = {
   args: {
-    users: [
-      {
-        id: 1,
-        username: 'admin',
-        fullname: 'Administrator',
-        email: 'admin@example.com',
-        enabled: 'Enabled',
-        created: 'January 1, 2020',
-      },
-    ],
+    users: [adminUser.build()],
+    loading: false,
   },
 };
 
@@ -84,28 +72,19 @@ export const Loading = {
 export const EmptyUsersTable = {
   args: {
     users: [],
+    loading: false,
   },
 };
 
 export const UsersOverview = {
   args: {
     users: [
-      {
-        id: 1,
-        username: 'admin',
-        fullname: 'Administrator',
-        email: 'admin@example.com',
-        enabled: 'Enabled',
-        created: 'January 1, 2020',
-      },
-      {
-        id: 2,
-        username: 'user02',
-        fullname: 'User Two',
-        email: 'user02@example.com',
-        enabled: 'Disabled',
-        created: 'February 1, 2020',
-      },
+      adminUser.build(),
+      userFactory.build(),
+      userFactory.build(),
+      userFactory.build(),
+      userFactory.build(),
     ],
+    loading: false,
   },
 };