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 ( return (
<div className="mt-3 mb-3"> <div className="mt-3 mb-3">
<div <div
data-testid={`tab-${props.tab.name}`}
key={props.tab.name} key={props.tab.name}
onClick={props.onClick} onClick={props.onClick}
className={`${ className={`${

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

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

39
Nginx/default.conf.template
View File

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