From f91ac01abc11f6e249e26242d5f8b74c4443d761 Mon Sep 17 00:00:00 2001 From: EMaksy <emaksymenko@suse.com> Date: Fri, 26 Apr 2024 12:56:28 +0200 Subject: [PATCH] Fix storybook --- assets/js/lib/test-utils/factories/users.js | 4 +- assets/js/pages/Users/Users.jsx | 3 +- assets/js/pages/Users/Users.stories.jsx | 67 +++++++-------------- 3 files changed, 27 insertions(+), 47 deletions(-) diff --git a/assets/js/lib/test-utils/factories/users.js b/assets/js/lib/test-utils/factories/users.js index c1499b9f04..d128f47b86 100644 --- 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 index 95b61593a1..213843d89a 100644 --- 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 index b60f270eae..38bedb23f6 100644 --- 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, }, };