mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 14:49:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Tab component to include countBadge and tabType properties

Browse Source
This commit is contained in:
Simon Larsen 2024-04-23 20:56:16 +01:00
parent d4b6bf6ca0
commit 267950bb54
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
3 changed files with 57 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CommonUI/src/Components/Tabs/Tab.tsx
View File

@ -28,6 +28,7 @@ const TabElement: FunctionComponent<ComponentProps> = (
return (
<div className="mt-3 mb-3">
<div
data-testid={`tab-${props.tab.name}`}
key={props.tab.name}
onClick={props.onClick}
className={`${

34
CommonUI/src/Tests/Components/Tabs.test.tsx
View File

@ -9,12 +9,12 @@ describe('Tabs', () => {
const tab1: Tab = {
name: 'tab1',
children: <div>tab1 content</div>,
children: <div>tab 1 content</div>,
};
const tab2: Tab = {
name: 'tab2',
children: <div>tab2 content</div>,
children: <div>tab 2 content</div>,
};
const tabs: Array<Tab> = [tab1, tab2];
@ -22,65 +22,65 @@ describe('Tabs', () => {
test('it should render all props passed', () => {
const onTabChange: jest.Mock = jest.fn();
const { getByText } = render(
const { getByTestId } = render(
<Tabs tabs={tabs} onTabChange={onTabChange} />
);
expect(getByText('tab1')).toBeInTheDocument();
expect(getByText('tab2')).toBeInTheDocument();
expect(getByTestId('tab-tab1')).toBeInTheDocument();
expect(getByTestId('tab-tab2')).toBeInTheDocument();
});
test('it should render the first tab as active by default', () => {
const onTabChange: jest.Mock = jest.fn();
const { getByText } = render(
const { getByTestId } = render(
<Tabs tabs={tabs} onTabChange={onTabChange} />
);
expect(getByText('tab1')).toHaveClass(activeClass);
expect(getByTestId('tab-tab1')).toHaveClass(activeClass);
});
test('it should call onTabChange with the correct tab when a tab is clicked', () => {
const onTabChange: jest.Mock = jest.fn();
const { getByText } = render(
const { getByTestId } = render(
<Tabs tabs={tabs} onTabChange={onTabChange} />
);
fireEvent.click(getByText('tab1'));
fireEvent.click(getByTestId('tab-tab1'));
expect(onTabChange).toHaveBeenCalledWith(tab1);
fireEvent.click(getByText('tab2'));
fireEvent.click(getByTestId('tab-tab2'));
expect(onTabChange).toHaveBeenCalledWith(tab2);
});
test('it should show the correct tab as active when a tab is clicked', () => {
const onTabChange: jest.Mock = jest.fn();
const { getByText } = render(
const { getByTestId } = render(
<Tabs tabs={tabs} onTabChange={onTabChange} />
);
fireEvent.click(getByText('tab2'));
fireEvent.click(getByTestId('tab-tab2'));
expect(getByText('tab1')).not.toHaveClass(activeClass);
expect(getByText('tab2')).toHaveClass(activeClass);
expect(getByTestId('tab-tab1')).not.toHaveClass(activeClass);
expect(getByTestId('tab-tab2')).toHaveClass(activeClass);
});
test('it should handle empty tabs array gracefully', () => {
const tabs: Array<Tab> = [];
const onTabChange: jest.Mock = jest.fn();
const { getByText } = render(
const { getByTestId } = render(
<Tabs tabs={tabs} onTabChange={onTabChange} />
);
expect(() => {
return getByText('tab1');
return getByTestId('tab-tab1');
}).toThrow();
expect(() => {
return getByText('tab2');
return getByTestId('tab-tab2');
}).toThrow();
});
});

39
Nginx/default.conf.template
View File

@ -55,6 +55,7 @@ server {
fastcgi_buffer_size 32k;
location / {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -96,6 +97,7 @@ server {
fastcgi_buffer_size 32k;
location /logs {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -134,6 +136,7 @@ server {
location / {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -152,6 +155,7 @@ server {
location /status-page {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -168,6 +172,7 @@ server {
}
location /status-page-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -183,6 +188,7 @@ server {
}
location /status-page-sso-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -198,6 +204,7 @@ server {
}
location /status-page-identity-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -214,6 +221,7 @@ server {
# Acme Verification.
location /.well-known {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -256,6 +264,7 @@ server {
location / {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -273,6 +282,7 @@ server {
}
location /status-page-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -288,6 +298,7 @@ server {
}
location /status-page-sso-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -303,6 +314,7 @@ server {
}
location /status-page-identity-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -318,6 +330,7 @@ server {
}
location /status-page {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -354,6 +367,7 @@ server {
set $billing_enabled ${BILLING_ENABLED};
location / {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $server_name;
proxy_set_header X-Real-IP $remote_addr;
@ -377,6 +391,7 @@ server {
location /status-page-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -392,6 +407,7 @@ server {
}
location /status-page-sso-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -407,6 +423,7 @@ server {
}
location /status-page-identity-api/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -423,6 +440,7 @@ server {
location /accounts {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -438,6 +456,7 @@ server {
location /otlp/ {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -455,11 +474,13 @@ server {
location ~ /opentelemetry.proto.collector* {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
grpc_pass grpc://opentelemetry-collector-grpc;
}
location /notification {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -474,6 +495,7 @@ server {
}
location /fluentd/logs {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -489,6 +511,7 @@ server {
}
location /ingestor {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -505,6 +528,7 @@ server {
}
location /server-monitor {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -521,6 +545,7 @@ server {
}
location /dashboard {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -536,6 +561,7 @@ server {
location /admin {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -550,6 +576,7 @@ server {
}
location /isolated-vm {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -564,6 +591,7 @@ server {
}
location /status-page {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -579,6 +607,7 @@ server {
}
location /identity {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -593,6 +622,7 @@ server {
}
location /reference {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -607,6 +637,7 @@ server {
}
location /docs {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -621,6 +652,7 @@ server {
}
location /file {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -637,6 +669,7 @@ server {
}
location /api {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -653,6 +686,7 @@ server {
}
location /realtime {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -669,6 +703,7 @@ server {
}
location /analytics-api {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -686,6 +721,7 @@ server {
location /heartbeat {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -703,6 +739,7 @@ server {
location /workflow {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -719,6 +756,7 @@ server {
}
location /l/ { # Short URL for Link Shortener
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
@ -735,6 +773,7 @@ server {
}
location /workers {
# This is for nginx not to crash when service is not available.
resolver 127.0.0.1 valid=30s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;