Skip to content

Commit aff7321

Browse files
code-ashercode-asher
committed
Check multi-org before adding org filter and details
As part of this, make the width adjustable so we only lower it when we have the new filter added.
1 parent 00ef754 commit aff7321

File tree

7 files changed

+70
-16
lines changed

7 files changed

+70
-16
lines changed

‎site/src/components/Filter/SelectFilter.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
SelectMenuIcon,
1212
} from "components/SelectMenu/SelectMenu";
1313

14-
const BASE_WIDTH = 175;
14+
const BASE_WIDTH = 200;
1515
const POPOVER_WIDTH = 320;
1616

1717
export type SelectFilterOption = {
@@ -32,6 +32,7 @@ export type SelectFilterProps = {
3232
onSelect: (option: SelectFilterOption | undefined) => void;
3333
// SelectFilterSearch element
3434
selectFilterSearch?: ReactNode;
35+
width?: number;
3536
};
3637

3738
export const SelectFilter: FC<SelectFilterProps> = ({
@@ -42,6 +43,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
4243
placeholder,
4344
emptyText,
4445
selectFilterSearch,
46+
width = BASE_WIDTH,
4547
}) => {
4648
const [open, setOpen] = useState(false);
4749

@@ -50,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
5052
<SelectMenuTrigger>
5153
<SelectMenuButton
5254
startIcon={selectedOption?.startIcon}
53-
css={{ width: BASE_WIDTH }}
55+
css={{ width }}
5456
aria-label={label}
5557
>
5658
{selectedOption?.label ?? placeholder}
@@ -64,7 +66,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
6466
// wide as possible.
6567
width: selectFilterSearch ? "100%" : undefined,
6668
maxWidth: POPOVER_WIDTH,
67-
minWidth: BASE_WIDTH,
69+
minWidth: width,
6870
},
6971
}}
7072
>

‎site/src/components/Filter/UserFilter.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,10 @@ export type UserFilterMenu = ReturnType<typeof useUserFilterMenu>;
9797

9898
interface UserMenuProps {
9999
menu: UserFilterMenu;
100+
width?: number;
100101
}
101102

102-
export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
103+
export const UserMenu: FC<UserMenuProps> = ({ menu, width }) => {
103104
return (
104105
<SelectFilter
105106
label="Select user"
@@ -116,6 +117,7 @@ export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
116117
onChange={menu.setQuery}
117118
/>
118119
}
120+
width={width}
119121
/>
120122
);
121123
};

‎site/src/pages/AuditPage/AuditFilter.tsx

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,14 @@ interface AuditFilterProps {
4545
user: UserFilterMenu;
4646
action: ActionFilterMenu;
4747
resourceType: ResourceTypeFilterMenu;
48-
organization: OrganizationsFilterMenu;
48+
// The organization menu is only provided in a multi-org setup.
49+
organization?: OrganizationsFilterMenu;
4950
};
5051
}
5152

5253
export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
54+
// Use a smaller width if including the organization filter.
55+
const width = menus.organization && 175;
5356
return (
5457
<Filter
5558
learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
@@ -59,10 +62,12 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
5962
error={error}
6063
options={
6164
<>
62-
<ResourceTypeMenu {...menus.resourceType} />
63-
<ActionMenu {...menus.action} />
64-
<UserMenu menu={menus.user} />
65-
<OrganizationsMenu menu={menus.organization} />
65+
<ResourceTypeMenu width={width} menu={menus.resourceType} />
66+
<ActionMenu width={width} menu={menus.action} />
67+
<UserMenu width={width} menu={menus.user} />
68+
{menus.organization && (
69+
<OrganizationsMenu width={width} menu={menus.organization} />
70+
)}
6671
</>
6772
}
6873
skeleton={
@@ -97,14 +102,20 @@ export const useActionFilterMenu = ({
97102

98103
export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>;
99104

100-
const ActionMenu = (menu: ActionFilterMenu) => {
105+
interface ActionMenuProps {
106+
menu: ActionFilterMenu;
107+
width?: number;
108+
}
109+
110+
const ActionMenu: FC<ActionMenuProps> = ({ menu, width }) => {
101111
return (
102112
<SelectFilter
103113
label="Select an action"
104114
placeholder="All actions"
105115
options={menu.searchOptions}
106116
onSelect={menu.selectOption}
107117
selectedOption={menu.selectedOption ?? undefined}
118+
width={width}
108119
/>
109120
);
110121
};
@@ -151,14 +162,20 @@ export type ResourceTypeFilterMenu = ReturnType<
151162
typeof useResourceTypeFilterMenu
152163
>;
153164

154-
const ResourceTypeMenu = (menu: ResourceTypeFilterMenu) => {
165+
interface ResourceTypeMenuProps {
166+
menu: ResourceTypeFilterMenu;
167+
width?: number;
168+
}
169+
170+
const ResourceTypeMenu: FC<ResourceTypeMenuProps> = ({ menu, width }) => {
155171
return (
156172
<SelectFilter
157173
label="Select a resource type"
158174
placeholder="All resource types"
159175
options={menu.searchOptions}
160176
onSelect={menu.selectOption}
161177
selectedOption={menu.selectedOption ?? undefined}
178+
width={width}
162179
/>
163180
);
164181
};
@@ -216,9 +233,13 @@ export type OrganizationsFilterMenu = ReturnType<
216233

217234
interface OrganizationsMenuProps {
218235
menu: OrganizationsFilterMenu;
236+
width?: number;
219237
}
220238

221-
export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({ menu }) => {
239+
export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({
240+
menu,
241+
width,
242+
}) => {
222243
return (
223244
<SelectFilter
224245
label="Select an organization"
@@ -235,6 +256,7 @@ export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({ menu }) => {
235256
onChange={menu.setQuery}
236257
/>
237258
}
259+
width={width}
238260
/>
239261
);
240262
};

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,13 @@ export interface AuditLogRowProps {
3535
auditLog: AuditLog;
3636
// Useful for Storybook
3737
defaultIsDiffOpen?: boolean;
38+
showOrgDetails: boolean;
3839
}
3940

4041
export const AuditLogRow: FC<AuditLogRowProps> = ({
4142
auditLog,
4243
defaultIsDiffOpen = false,
44+
showOrgDetails,
4345
}) => {
4446
const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen);
4547
const diffs = Object.entries(auditLog.diff);
@@ -134,7 +136,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
134136
</strong>
135137
</span>
136138
)}
137-
{auditLog.organization && (
139+
{showOrgDetails && auditLog.organization && (
138140
<span css={styles.auditLogInfo}>
139141
<>Org: </>
140142
<Link

‎site/src/pages/AuditPage/AuditPage.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useFilter } from "components/Filter/filter";
66
import { useUserFilterMenu } from "components/Filter/UserFilter";
77
import { isNonInitialPage } from "components/PaginationWidget/utils";
88
import { usePaginatedQuery } from "hooks/usePaginatedQuery";
9+
import { useDashboard } from "modules/dashboard/useDashboard";
910
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1011
import { pageTitle } from "utils/page";
1112
import {
@@ -17,6 +18,7 @@ import { AuditPageView } from "./AuditPageView";
1718

1819
const AuditPage: FC = () => {
1920
const { audit_log: isAuditLogVisible } = useFeatureVisibility();
21+
const { experiments } = useDashboard();
2022

2123
/**
2224
* There is an implicit link between auditsQuery and filter via the
@@ -80,14 +82,17 @@ const AuditPage: FC = () => {
8082
isAuditLogVisible={isAuditLogVisible}
8183
auditsQuery={auditsQuery}
8284
error={auditsQuery.error}
85+
showOrgDetails={experiments.includes("multi-organization")}
8386
filterProps={{
8487
filter,
8588
error: auditsQuery.error,
8689
menus: {
8790
user: userMenu,
8891
action: actionMenu,
8992
resourceType: resourceTypeMenu,
90-
organization: organizationsMenu,
93+
organization: experiments.includes("multi-organization")
94+
? organizationsMenu
95+
: undefined,
9196
},
9297
}}
9398
/>

‎site/src/pages/AuditPage/AuditPageView.stories.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const defaultFilterProps = getDefaultFilterProps<FilterProps>({
3232
user: MockMenu,
3333
action: MockMenu,
3434
resourceType: MockMenu,
35-
organization: MockMenu,
3635
},
3736
});
3837

@@ -43,6 +42,7 @@ const meta: Meta<typeof AuditPageView> = {
4342
auditLogs: [MockAuditLog, MockAuditLog2, MockAuditLog3],
4443
isAuditLogVisible: true,
4544
filterProps: defaultFilterProps,
45+
showOrgDetails: false,
4646
},
4747
};
4848

@@ -92,3 +92,18 @@ export const NotVisible: Story = {
9292
auditsQuery: mockInitialRenderResult,
9393
},
9494
};
95+
96+
export const MultiOrg: Story = {
97+
parameters: { chromatic: chromaticWithTablet },
98+
args: {
99+
showOrgDetails: true,
100+
auditsQuery: mockSuccessResult,
101+
filterProps: {
102+
...defaultFilterProps,
103+
menus: {
104+
...defaultFilterProps.menus,
105+
organization: MockMenu,
106+
},
107+
},
108+
},
109+
};

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface AuditPageViewProps {
3838
error?: unknown;
3939
filterProps: ComponentProps<typeof AuditFilter>;
4040
auditsQuery: PaginationResult;
41+
showOrgDetails: boolean;
4142
}
4243

4344
export const AuditPageView: FC<AuditPageViewProps> = ({
@@ -47,6 +48,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
4748
error,
4849
filterProps,
4950
auditsQuery: paginationResult,
51+
showOrgDetails,
5052
}) => {
5153
const isLoading =
5254
(auditLogs === undefined || paginationResult.totalRecords === undefined) &&
@@ -117,7 +119,11 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
117119
items={auditLogs}
118120
getDate={(log) => new Date(log.time)}
119121
row={(log) => (
120-
<AuditLogRow key={log.id} auditLog={log} />
122+
<AuditLogRow
123+
key={log.id}
124+
auditLog={log}
125+
showOrgDetails={showOrgDetails}
126+
/>
121127
)}
122128
/>
123129
)}

0 commit comments

Comments
 (0)