Skip to content

fix: fix wrapping and overflow in account groups list #639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: fix wrapping and overflow in account groups list #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { StorybookConfig } from "@storybook/react-vite";
import { mergeConfig } from "vite";

const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
Expand All @@ -21,4 +22,8 @@ const config: StorybookConfig = {
},
};

export async function viteFinal(config) {
return mergeConfig(config, { process: { env: {} } });
}

export default config;
28,612 changes: 14,306 additions & 14,306 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

226 changes: 113 additions & 113 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,115 @@
{
"type": "module",
"dependencies": {
"@azure/msal-browser": "^2.33.0",
"@azure/msal-react": "^1.5.3",
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@sentry/react": "^9.0.0",
"@tanstack/react-query": "^5.59.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"commander": "^12.1.0",
"d3": "^7.9.0",
"date-fns": "^3.6.0",
"downshift": "^7.6.2",
"express": "^4.21.0",
"fuse.js": "^7.1.0",
"history": "^4.10.1",
"lodash-es": "^4.17.21",
"marked": "^14.1.2",
"minimist": "^1.2.8",
"numbro": "^2.5.0",
"radix-ui": "^1.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.53.0",
"react-window": "^1.8.10",
"semver": "^7.6.3",
"styled-components": "^6.1.13",
"superagent": "^8.0.9",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"tsx": "^4.19.1",
"winston": "^3.17.0",
"wouter": "^3.3.5",
"yup": "^0.32.11",
"zustand": "^4.5.5"
},
"devDependencies": {
"@faker-js/faker": "^9.6.0",
"@sentry/vite-plugin": "^3.2.1",
"@storybook/addon-actions": "^8.6.3",
"@storybook/addon-essentials": "^8.6.3",
"@storybook/addon-interactions": "^8.6.3",
"@storybook/addon-links": "^8.6.3",
"@storybook/preview-api": "^8.6.3",
"@storybook/react": "^8.6.3",
"@storybook/react-vite": "^8.6.3",
"@storybook/test": "^8.6.3",
"@tailwindcss/vite": "^4.0.8",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/d3": "^7.4.3",
"@types/lodash-es": "^4.17.12",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@types/react-window": "^1.8.8",
"@types/styled-components": "^5.1.34",
"@types/superagent": "^8.1.9",
"@typescript-eslint/eslint-plugin": "^8.5.0",
"@typescript-eslint/parser": "^8.5.0",
"@vitejs/plugin-react": "^4.3.2",
"@vitest/eslint-plugin": "^1.1.32-beta.3",
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"jsdom": "^26.0.0",
"nock": "^13.5.5",
"prettier": "^3.5.2",
"prettier-plugin-organize-imports": "^4.1.0",
"react-test-renderer": "^18.3.1",
"storybook": "^8.6.3",
"tailwindcss": "^4.0.8",
"typescript": "^5.6.2",
"vite": "^6.0.0",
"vite-plugin-html": "^3.2.2",
"vitest": "^3.0.6"
},
"scripts": {
"build": "vite build",
"build-storybook": "storybook build",
"develop": "vite serve",
"eslint": "eslint src",
"server": "npx tsx src/server/run.ts",
"storybook": "storybook dev -p 6006",
"test": "TZ=UTC vitest",
"tsc": "tsc --noEmit"
},
"optionalDependencies": {
"fsevents": "^2.3.3"
},
"prettier": {
"tabWidth": 4,
"plugins": [
"prettier-plugin-organize-imports"
]
},
"virtool": {
"minApiVersion": "23.4.0"
}
"type": "module",
"dependencies": {
"@azure/msal-browser": "^2.33.0",
"@azure/msal-react": "^1.5.3",
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@sentry/react": "^9.0.0",
"@tanstack/react-query": "^5.59.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"commander": "^12.1.0",
"d3": "^7.9.0",
"date-fns": "^3.6.0",
"downshift": "^7.6.2",
"express": "^4.21.0",
"fuse.js": "^7.1.0",
"history": "^4.10.1",
"lodash-es": "^4.17.21",
"marked": "^14.1.2",
"minimist": "^1.2.8",
"numbro": "^2.5.0",
"radix-ui": "^1.1.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.53.0",
"react-window": "^1.8.10",
"semver": "^7.6.3",
"styled-components": "^6.1.13",
"superagent": "^8.0.9",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"tsx": "^4.19.1",
"winston": "^3.17.0",
"wouter": "^3.3.5",
"yup": "^0.32.11",
"zustand": "^4.5.5"
},
"devDependencies": {
"@faker-js/faker": "^9.6.0",
"@sentry/vite-plugin": "^3.2.1",
"@storybook/addon-actions": "^8.6.12",
"@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^8.6.12",
"@storybook/addon-links": "^8.6.12",
"@storybook/preview-api": "^8.6.12",
"@storybook/react": "^8.6.12",
"@storybook/react-vite": "^8.6.12",
"@storybook/test": "^8.6.12",
"@tailwindcss/vite": "^4.0.8",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^16.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/d3": "^7.4.3",
"@types/lodash-es": "^4.17.12",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@types/react-window": "^1.8.8",
"@types/styled-components": "^5.1.34",
"@types/superagent": "^8.1.9",
"@typescript-eslint/eslint-plugin": "^8.5.0",
"@typescript-eslint/parser": "^8.5.0",
"@vitejs/plugin-react": "^4.3.2",
"@vitest/eslint-plugin": "^1.1.32-beta.3",
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"jsdom": "^26.0.0",
"nock": "^13.5.5",
"prettier": "^3.5.2",
"prettier-plugin-organize-imports": "^4.1.0",
"react-test-renderer": "^18.3.1",
"storybook": "^8.6.12",
"tailwindcss": "^4.0.8",
"typescript": "^5.6.2",
"vite": "^6.0.0",
"vite-plugin-html": "^3.2.2",
"vitest": "^3.0.6"
},
"scripts": {
"build": "vite build",
"build-storybook": "storybook build",
"develop": "vite serve",
"eslint": "eslint src",
"server": "npx tsx src/server/run.ts",
"storybook": "storybook dev -p 6006",
"test": "TZ=UTC vitest",
"tsc": "tsc --noEmit"
},
"optionalDependencies": {
"fsevents": "^2.3.3"
},
"prettier": {
"tabWidth": 4,
"plugins": [
"prettier-plugin-organize-imports"
]
},
"virtool": {
"minApiVersion": "23.4.0"
}
}
37 changes: 19 additions & 18 deletions src/account/components/AccountGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import BoxGroupHeader from "@base/BoxGroupHeader";
import BoxGroupSection from "@base/BoxGroupSection";
import NoneFound from "@base/NoneFound";
import { GroupMinimal } from "@groups/types";
import { map } from "lodash-es";
import React from "react";

type AccountGroupsProps = {
Expand All @@ -21,24 +20,26 @@ export default function AccountGroups({ groups }: AccountGroupsProps) {
<BoxGroupHeader>
<h2>Groups</h2>
</BoxGroupHeader>
<BoxGroupSection className="flex gap-2">
<BoxGroupSection className="flex flex-wrap gap-2">
{groups.length ? (
map(groups, ({ id, name }) => (
<span
className={cn(
"bg-slate-500",
"flex",
"font-medium",
"items-center",
"text-white",
"px-2 py-1",
"rounded",
)}
key={id}
>
{name}
</span>
))
groups
.sort((a, b) => a.name.localeCompare(b.name))
.map(({ id, name }) => (
<span
className={cn(
"bg-slate-500",
"inline-flex",
"font-medium",
"items-center",
"text-white",
"px-2 py-1",
"rounded",
)}
key={id}
>
{name}
</span>
))
) : (
<NoneFound noun="groups" />
)}
Expand Down
36 changes: 36 additions & 0 deletions src/account/stories/AccountGroups.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import AccountGroups from "@account/components/AccountGroups";
import type { Meta, StoryObj } from "@storybook/react";
import { createFakeGroup } from "@tests/fake/groups";

const meta: Meta<typeof AccountGroups> = {
title: "account/AccountGroups",
component: AccountGroups,
tags: ["autodocs"],
};

export default meta;

const groups = [
{
...createFakeGroup(),
name: "Space Filled Name That Wraps",
},
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
createFakeGroup(),
];

type Story = StoryObj<typeof meta>;

export const Default: Story = {
args: {
groups,
},
};
2 changes: 2 additions & 0 deletions src/analyses/stories/NuvsToolbar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const meta: Meta<typeof NuvsToolbar> = {
component: NuvsToolbar,
tags: ["autodocs"],
};

const fakeFormattedNuvsResults: FormattedNuvsResults = {
hits: [
{
Expand Down Expand Up @@ -191,6 +192,7 @@ const fakeFormattedNuvsResults: FormattedNuvsResults = {
},
],
};

export default meta;

type Story = StoryObj<typeof meta>;
Expand Down
7 changes: 2 additions & 5 deletions src/groups/components/__tests__/Groups.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import {
createFakeGroup,
mockApiGetGroup,
mockApiListGroups,
} from "@tests/fake/groups";
import { mockApiGetGroup, mockApiListGroups } from "@tests/api/groups";
import { createFakeGroup } from "@tests/fake/groups";
import { createFakePermissions } from "@tests/fake/permissions";
import { renderWithRouter } from "@tests/setup";
import React from "react";
Expand Down
2 changes: 1 addition & 1 deletion src/labels/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
export function fetchLabels(): Promise<Label[]> {
return apiClient.get("/labels").then((res) => res.body);
}

createFa;

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

samples/components/Detail/__tests__/SampleRights.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

samples/components/Detail/__tests__/SampleDetailGeneral.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

samples/components/Create/__tests__/CreateSample.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

samples/components/__tests__/SamplesList.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

labels/components/__tests__/EditLabel.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1

Check failure on line 12 in src/labels/api.ts

View workflow job for this annotation

GitHub Actions / test

labels/components/__tests__/CreateLabel.test.tsx 

ReferenceError: createFa is not defined
 ❯ labels/api.ts:12:1
 ❯ labels/queries.ts:3:1
/**
* Creates a label
*
Expand Down
2 changes: 1 addition & 1 deletion src/samples/components/Create/__tests__/CreateSample.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { LibraryType } from "@samples/types";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mockApiListGroups } from "@tests/api/groups";
import { createFakeAccount, mockApiGetAccount } from "@tests/fake/account";
import { createFakeFile, mockApiListFiles } from "@tests/fake/files";
import { mockApiListGroups } from "@tests/fake/groups";
import { createFakeLabelNested, mockApiGetLabels } from "@tests/fake/labels";
import { mockApiCreateSample } from "@tests/fake/samples";
import {
Expand Down
3 changes: 2 additions & 1 deletion src/samples/components/Detail/__tests__/SampleRights.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { AdministratorRoleName } from "@administration/types";
import Samples from "@samples/components/Samples";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mockApiListGroups } from "@tests/api/groups";
import { createFakeAccount, mockApiGetAccount } from "@tests/fake/account";
import { createFakeGroup, mockApiListGroups } from "@tests/fake/groups";
import { createFakeGroup } from "@tests/fake/groups";
import { createFakeSample, mockApiGetSampleDetail } from "@tests/fake/samples";
import { renderWithRouter } from "@tests/setup";
import nock from "nock";
Expand Down
Loading
Loading