@@ -104,7 +81,7 @@ const MessagesTable: React.FC = () => {
contentFilters={contentFilters}
/>
))}
- {isFetching && isLive && !messages.length && (
+ {isFetching && !messages.length && (
- ← Back
-
-
Next →
diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx
deleted file mode 100644
index 127a602f8..000000000
--- a/frontend/src/components/Topics/Topic/Messages/__test__/FiltersContainer.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import FiltersContainer from 'components/Topics/Topic/Messages/Filters/FiltersContainer';
-import { screen } from '@testing-library/react';
-import { render } from 'lib/testHelpers';
-
-jest.mock('components/Topics/Topic/Messages/Filters/Filters', () => () => (
- mock-Filters
-));
-
-describe('FiltersContainer', () => {
- it('renders Filters component', () => {
- render({mockMessagesTable}
+));
+
+jest.mock('components/Topics/Topic/Messages/Filters/Filters', () => () => (
+ {mockFilterComponents}
+));
describe('Messages', () => {
- const searchParams = `?filterQueryType=STRING_CONTAINS&attempt=0&limit=100&seekDirection=${SeekDirection.FORWARD}&seekType=${SeekType.OFFSET}&seekTo=0::9`;
- const renderComponent = (param: string = searchParams) => {
- const query = new URLSearchParams(param).toString();
- const path = `${clusterTopicMessagesPath()}?${query}`;
- return render(
-
- ,
- {
- initialEntries: [path],
- }
- );
+ const renderComponent = () => {
+ return render() => {
return render(
-
- ,
- {
- initialEntries: [`/messages?${customPath}`],
- preloadedState: {
- topicMessages: {
- messages,
- meta: {
- ...topicMessagesMetaPayload,
- },
- isFetching: !!isFetching,
- },
- },
- }
+ Promise;
}
-const CleanupPolicyOptions: Array = [
+const CleanupPolicyOptions = [
{ value: 'delete', label: 'Delete' },
{ value: 'compact', label: 'Compact' },
{ value: 'compact,delete', label: 'Compact,Delete' },
@@ -39,7 +39,7 @@ const CleanupPolicyOptions: Array = [
export const getCleanUpPolicyValue = (cleanUpPolicy?: string) => {
if (!cleanUpPolicy) return undefined;
- return CleanupPolicyOptions.find((option: SelectOption) => {
+ return CleanupPolicyOptions.find((option) => {
return (
option.value.toString().replace(/,/g, '_') ===
cleanUpPolicy?.toLowerCase()
@@ -47,7 +47,7 @@ export const getCleanUpPolicyValue = (cleanUpPolicy?: string) => {
})?.value.toString();
};
-const RetentionBytesOptions: Array = [
+const RetentionBytesOptions = [
{ value: NOT_SET, label: 'Not Set' },
{ value: BYTES_IN_GB, label: '1 GB' },
{ value: BYTES_IN_GB * 10, label: '10 GB' },
@@ -75,7 +75,7 @@ const TopicForm: React.FC = ({
getCleanUpPolicyValue(cleanUpPolicy) || CleanupPolicyOptions[0].value;
const getRetentionBytes =
- RetentionBytesOptions.find((option: SelectOption) => {
+ RetentionBytesOptions.find((option) => {
return option.value === retentionBytes;
})?.value || RetentionBytesOptions[0].value;
diff --git a/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx b/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
index f09eec6c5..8fd700c74 100644
--- a/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
+++ b/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
@@ -4,7 +4,7 @@ import { screen } from '@testing-library/react';
import TimeToRetainBtn, {
Props,
} from 'components/Topics/shared/Form/TimeToRetainBtn';
-import { useForm, FormProvider } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
import { theme } from 'theme/theme';
import userEvent from '@testing-library/user-event';
@@ -61,7 +61,7 @@ describe('TimeToRetainBtn', () => {
SetUpComponent({ value: 604800000 });
const buttonElement = screen.getByRole('button');
expect(buttonElement).toHaveStyle(
- `background-color:${theme.button.secondary.invertedColors.normal}`
+ `background-color:${theme.chips.backgroundColor.active}`
);
expect(buttonElement).toHaveStyle(`border:none`);
});
diff --git a/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx b/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
index 31c73982a..030546187 100644
--- a/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
+++ b/frontend/src/components/common/ActionComponent/ActionSelect/ActionSelect.tsx
@@ -8,15 +8,15 @@ import { useActionTooltip } from 'lib/hooks/useActionTooltip';
import { usePermission } from 'lib/hooks/usePermission';
import * as S from 'components/common/ActionComponent/ActionComponent.styled';
-interface Props extends SelectProps, ActionComponentProps {}
+interface Props extends SelectProps, ActionComponentProps {}
-const ActionSelect: React.FC = ({
+const ActionSelect = ({
message = getDefaultActionMessage(),
permission,
placement = 'bottom',
disabled,
...props
-}) => {
+}: Props) => {
const canDoAction = usePermission(
permission.resource,
permission.action,
diff --git a/frontend/src/components/common/Button/Button.styled.ts b/frontend/src/components/common/Button/Button.styled.ts
index a436d01e7..649719987 100644
--- a/frontend/src/components/common/Button/Button.styled.ts
+++ b/frontend/src/components/common/Button/Button.styled.ts
@@ -3,7 +3,6 @@ import styled from 'styled-components';
export interface ButtonProps {
buttonType: 'primary' | 'secondary' | 'danger';
buttonSize: 'S' | 'M' | 'L';
- isInverted?: boolean;
}
const StyledButton = styled.button`
@@ -11,44 +10,32 @@ const StyledButton = styled.button`
flex-direction: row;
align-items: center;
justify-content: center;
- padding: 0 12px;
+ padding: ${({ buttonSize }) => (buttonSize === 'S' ? '0 8px' : '0 12px')};
border: none;
border-radius: 4px;
white-space: nowrap;
- background: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? 'transparent'
- : theme.button[buttonType].backgroundColor.normal};
- color: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? theme.button[buttonType].invertedColors.normal
- : theme.button[buttonType].color.normal};
+ background: ${({ buttonType, theme }) =>
+ theme.button[buttonType].backgroundColor.normal};
+
+ color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
+ height: ${({ theme, buttonSize }) => theme.button.height[buttonSize]};
font-size: ${({ theme, buttonSize }) => theme.button.fontSize[buttonSize]};
font-weight: 500;
- height: ${({ theme, buttonSize }) => theme.button.height[buttonSize]};
&:hover:enabled {
- background: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? 'transparent'
- : theme.button[buttonType].backgroundColor.hover};
- color: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? theme.button[buttonType].invertedColors.hover
- : theme.button[buttonType].color};
+ background: ${({ buttonType, theme }) =>
+ theme.button[buttonType].backgroundColor.hover};
+ color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
cursor: pointer;
}
+
&:active:enabled {
- background: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? 'transparent'
- : theme.button[buttonType].backgroundColor.active};
- color: ${({ isInverted, buttonType, theme }) =>
- isInverted
- ? theme.button[buttonType].invertedColors.active
- : theme.button[buttonType].color};
+ background: ${({ buttonType, theme }) =>
+ theme.button[buttonType].backgroundColor.active};
+ color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
}
+
&:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -59,11 +46,11 @@ const StyledButton = styled.button`
}
& a {
- color: ${({ theme }) => theme.button.primary.color};
+ color: ${({ theme }) => theme.button.primary.color.normal};
}
& svg {
- margin-right: 7px;
+ margin-right: 4px;
fill: ${({ theme, disabled, buttonType }) =>
disabled
? theme.button[buttonType].color.disabled
diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
index fe330a5e4..46bf120fe 100644
--- a/frontend/src/components/common/Button/Button.tsx
+++ b/frontend/src/components/common/Button/Button.tsx
@@ -1,10 +1,9 @@
-import StyledButton, {
- ButtonProps,
-} from 'components/common/Button/Button.styled';
import React from 'react';
import { Link } from 'react-router-dom';
import Spinner from 'components/common/Spinner/Spinner';
+import StyledButton, { ButtonProps } from './Button.styled';
+
export interface Props
extends React.ButtonHTMLAttributes,
ButtonProps {
@@ -12,24 +11,27 @@ export interface Props
inProgress?: boolean;
}
-export const Button: React.FC = ({ to, ...props }) => {
+export const Button: React.FC = ({
+ to,
+ children,
+ disabled,
+ inProgress,
+ ...props
+}) => {
if (to) {
return (
- {props.children}
+
+ {children}
);
}
+
return (
-
- {props.children}{' '}
- {props.inProgress ? (
+
+ {children}{' '}
+ {inProgress ? (
diff --git a/frontend/src/components/common/Button/__tests__/Button.spec.tsx b/frontend/src/components/common/Button/__tests__/Button.spec.tsx
index 21919eb0d..ced6d0af4 100644
--- a/frontend/src/components/common/Button/__tests__/Button.spec.tsx
+++ b/frontend/src/components/common/Button/__tests__/Button.spec.tsx
@@ -50,14 +50,6 @@ describe('Button', () => {
);
});
- it('renders inverted color Button', () => {
- render(`
+ display: flex;
+ flex-direction: ${(props) => props.flexDirection || 'row'};
+ align-items: ${(props) => props.alignItems};
+ align-self: ${(props) => props.alignSelf};
+ justify-content: ${(props) => props.justifyContent};
+ justify-items: ${(props) => props.justifyItems};
+ gap: ${(props) => props.gap};
+ margin: ${(props) => props.margin};
+ padding: ${(props) => props.padding};
+ flex-grow: ${(props) => props.flexGrow};
+ width: ${(props) => props.width};
+ color ${(props) => props.color};
+`;
+
+const Flexbox: React.FC = ({ children, ...rest }) => {
+ return {children} ;
+};
+
+export default Flexbox;
diff --git a/frontend/src/components/common/Icons/GitIcon.tsx b/frontend/src/components/common/Icons/GitHubIcon.tsx
similarity index 90%
rename from frontend/src/components/common/Icons/GitIcon.tsx
rename to frontend/src/components/common/Icons/GitHubIcon.tsx
index daecb611f..e9132c76f 100644
--- a/frontend/src/components/common/Icons/GitIcon.tsx
+++ b/frontend/src/components/common/Icons/GitHubIcon.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
-const GitIcon: React.FC<{ className?: string }> = ({ className }) => (
+const GitHubIcon: React.FC<{ className?: string }> = ({ className }) => (
= ({ className }) => (
);
-export default styled(GitIcon)``;
+export default styled(GitHubIcon)``;
diff --git a/frontend/src/components/common/Icons/ProductHuntIcon.tsx b/frontend/src/components/common/Icons/ProductHuntIcon.tsx
new file mode 100644
index 000000000..b0f660491
--- /dev/null
+++ b/frontend/src/components/common/Icons/ProductHuntIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ProductHuntIcon: React.FC<{ className?: string }> = ({ className }) => (
+
+
+);
+
+export default styled(ProductHuntIcon)``;
diff --git a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
index b22e7c0ec..266276379 100644
--- a/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/frontend/src/components/common/NewTable/__test__/Table.spec.tsx
@@ -7,7 +7,7 @@ import Table, {
LinkCell,
TagCell,
} from 'components/common/NewTable';
-import { screen, waitFor } from '@testing-library/dom';
+import { screen } from '@testing-library/dom';
import { ColumnDef, Row } from '@tanstack/react-table';
import userEvent from '@testing-library/user-event';
import { formatTimestamp } from 'lib/dateTimeHelpers';
@@ -94,7 +94,7 @@ const columns: ColumnDef[] = [
const ExpandedRow: React.FC = () => I am expanded row
;
-interface Props extends TableProps {
+interface Props extends TableProps {
path?: string;
}
@@ -276,7 +276,7 @@ describe('Table', () => {
describe('Sorting', () => {
it('sort rows', async () => {
- await renderComponent({
+ renderComponent({
path: '/?sortBy=text&&sortDirection=desc',
enableSorting: true,
});
@@ -293,7 +293,7 @@ describe('Table', () => {
expect(rows[1].textContent?.indexOf('sit')).toBeGreaterThan(-1);
// Disable sorting by text column
- await waitFor(() => userEvent.click(th));
+ await userEvent.click(th);
rows = screen.getAllByRole('row');
expect(rows[1].textContent?.indexOf('lorem')).toBeGreaterThan(-1);
expect(rows[2].textContent?.indexOf('ipsum')).toBeGreaterThan(-1);
@@ -301,7 +301,7 @@ describe('Table', () => {
expect(rows[4].textContent?.indexOf('sit')).toBeGreaterThan(-1);
// Sort by text column ascending
- await waitFor(() => userEvent.click(th));
+ await userEvent.click(th);
rows = screen.getAllByRole('row');
expect(rows[1].textContent?.indexOf('dolor')).toBeGreaterThan(-1);
expect(rows[2].textContent?.indexOf('ipsum')).toBeGreaterThan(-1);
diff --git a/frontend/src/components/common/Search/Search.tsx b/frontend/src/components/common/Search/Search.tsx
index 72b5d1d54..3fa7d27ac 100644
--- a/frontend/src/components/common/Search/Search.tsx
+++ b/frontend/src/components/common/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { ComponentRef, useRef } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import Input from 'components/common/Input/Input';
import { useSearchParams } from 'react-router-dom';
@@ -29,7 +29,8 @@ const Search: React.FC = ({
onChange,
}) => {
const [searchParams, setSearchParams] = useSearchParams();
- const ref = useRef(null);
+ const ref = useRef>(null);
+
const handleChange = useDebouncedCallback((e) => {
if (ref.current != null) {
ref.current.value = e.target.value;
@@ -44,8 +45,11 @@ const Search: React.FC = ({
setSearchParams(searchParams);
}
}, 500);
+
const clearSearchValue = () => {
- if (searchParams.get('q')) {
+ if (onChange) {
+ onChange('');
+ } else if (searchParams.get('q')) {
searchParams.set('q', '');
setSearchParams(searchParams);
}
diff --git a/frontend/src/components/common/Select/ControlledSelect.tsx b/frontend/src/components/common/Select/ControlledSelect.tsx
index 1ea90c356..54174fd4c 100644
--- a/frontend/src/components/common/Select/ControlledSelect.tsx
+++ b/frontend/src/components/common/Select/ControlledSelect.tsx
@@ -6,24 +6,24 @@ import { ErrorMessage } from '@hookform/error-message';
import Select, { SelectOption } from './Select';
-interface ControlledSelectProps {
+interface ControlledSelectProps {
name: string;
label: React.ReactNode;
hint?: string;
- options: SelectOption[];
- onChange?: (val: string | number) => void;
+ options: SelectOption[];
+ onChange?: (val: T) => void;
disabled?: boolean;
placeholder?: string;
}
-const ControlledSelect: React.FC = ({
+const ControlledSelect = ({
name,
label,
onChange,
options,
disabled = false,
placeholder,
-}) => {
+}: ControlledSelectProps) => {
const id = React.useId();
return (
diff --git a/frontend/src/components/common/Select/Select.tsx b/frontend/src/components/common/Select/Select.tsx
index a72660d2c..72bf358ba 100644
--- a/frontend/src/components/common/Select/Select.tsx
+++ b/frontend/src/components/common/Select/Select.tsx
@@ -3,123 +3,113 @@ import useClickOutside from 'lib/hooks/useClickOutside';
import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
import * as S from './Select.styled';
-import LiveIcon from './LiveIcon.styled';
-export interface SelectProps {
- options?: Array;
+export interface SelectProps {
+ options?: SelectOption[];
id?: string;
name?: string;
selectSize?: 'M' | 'L';
- isLive?: boolean;
minWidth?: string;
- value?: string | number;
- defaultValue?: string | number;
+ value?: T;
+ defaultValue?: T;
placeholder?: string;
disabled?: boolean;
- onChange?: (option: string | number) => void;
+ onChange?: (option: T) => void;
isThemeMode?: boolean;
}
-export interface SelectOption {
+export interface SelectOption {
label: string | number | React.ReactElement;
- value: string | number;
+ value: T;
disabled?: boolean;
- isLive?: boolean;
}
-const Select = React.forwardRef(
- (
- {
- options = [],
- value,
- defaultValue,
- selectSize = 'L',
- placeholder = '',
- isLive,
- disabled = false,
- onChange,
- isThemeMode,
- ...props
- },
- ref
- ) => {
- const [selectedOption, setSelectedOption] = useState(value);
- const [showOptions, setShowOptions] = useState(false);
+// Use the generic type T for forwardRef
+const Select = (
+ {
+ options = [],
+ value,
+ defaultValue,
+ selectSize = 'L',
+ placeholder = '',
+ disabled = false,
+ onChange,
+ isThemeMode,
+ ...props
+ }: SelectProps,
+ ref?: React.Ref
+) => {
+ const [selectedOption, setSelectedOption] = useState(value);
+ const [showOptions, setShowOptions] = useState(false);
- const showOptionsHandler = () => {
- if (!disabled) setShowOptions(!showOptions);
- };
+ const showOptionsHandler = () => {
+ if (!disabled) setShowOptions(!showOptions);
+ };
- const selectContainerRef = useRef(null);
- const clickOutsideHandler = () => setShowOptions(false);
- useClickOutside(selectContainerRef, clickOutsideHandler);
+ const selectContainerRef = useRef(null);
+ const clickOutsideHandler = () => setShowOptions(false);
+ useClickOutside(selectContainerRef, clickOutsideHandler);
- const updateSelectedOption = (option: SelectOption) => {
- if (!option.disabled) {
- setSelectedOption(option.value);
+ const updateSelectedOption = (option: SelectOption 
+
+
+
+
+
+
+ 