{
- "extends": "sonarqube",
+ "extends": ["sonarqube", "./.eslintrc-typescript"],
"rules": {
"camelcase": "off",
"promise/no-return-wrap": "warn",
--- /dev/null
+{
+ "extends": [
+ "plugin:@typescript-eslint/recommended",
+ "plugin:@typescript-eslint/recommended-requiring-type-checking",
+ "plugin:@typescript-eslint/strict"
+ ],
+ "parserOptions": { "project": "./tsconfig.json" },
+ "rules": {
+ "@typescript-eslint/adjacent-overload-signatures": "warn",
+ "@typescript-eslint/array-type": ["warn", { "default": "array-simple" }],
+ "@typescript-eslint/await-thenable": "off",
+ "@typescript-eslint/ban-ts-comment": "warn",
+ "@typescript-eslint/ban-types": "warn",
+ "@typescript-eslint/consistent-indexed-object-style": "off",
+ "@typescript-eslint/default-param-last": "warn",
+ "@typescript-eslint/no-array-constructor": "warn",
+ "@typescript-eslint/no-confusing-non-null-assertion": "off",
+ "@typescript-eslint/no-confusing-void-expression": "warn",
+ "@typescript-eslint/no-empty-function": "warn",
+ "@typescript-eslint/no-empty-interface": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-extra-non-null-assertion": "off",
+ "@typescript-eslint/no-floating-promises": "warn",
+ "@typescript-eslint/no-for-in-array": "warn",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-invalid-this": "warn",
+ "@typescript-eslint/no-loss-of-precision": "warn",
+ "@typescript-eslint/no-misused-new": "warn",
+ "@typescript-eslint/no-misused-promises": "warn",
+ "@typescript-eslint/no-namespace": "warn",
+ "@typescript-eslint/no-non-null-asserted-nullish-coalescing": "off",
+ "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+ "@typescript-eslint/no-redundant-type-constituents": "warn",
+ "@typescript-eslint/no-this-alias": "warn",
+ "@typescript-eslint/no-unnecessary-type-assertion": "off",
+ "@typescript-eslint/no-unnecessary-type-constraint": "warn",
+ "@typescript-eslint/no-unsafe-argument": "warn",
+ "@typescript-eslint/no-unsafe-assignment": "warn",
+ "@typescript-eslint/no-unsafe-call": "warn",
+ "@typescript-eslint/no-unsafe-member-access": "warn",
+ "@typescript-eslint/no-unsafe-return": "warn",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-var-requires": "warn",
+ "@typescript-eslint/non-nullable-type-assertion-style": "off",
+ "@typescript-eslint/prefer-as-const": "warn",
+ "@typescript-eslint/prefer-namespace-keyword": "warn",
+ "@typescript-eslint/require-await": "warn",
+ "@typescript-eslint/restrict-plus-operands": "warn",
+ "@typescript-eslint/restrict-template-expressions": "warn",
+ "@typescript-eslint/switch-exhaustiveness-check": "warn",
+ "@typescript-eslint/triple-slash-reference": "warn",
+ "@typescript-eslint/unbound-method": "off"
+ }
+}
{
- "extends": ["sonarqube"],
+ "extends": ["sonarqube", "../.eslintrc-typescript"],
"plugins": ["header", "typescript-sort-keys"],
"rules": {
// Custom SonarCloud config that differs from eslint-config-sonarqube
"scripts": {
"build": "yarn lint && yarn ts-check && vite build",
"build-release": "yarn install --immutable && yarn build",
- "lint": "eslint --ext js,ts,tsx,snap --quiet src",
+ "lint": "eslint --ext js,ts,tsx,snap src",
"lint-report-ci": "yarn install --immutable && eslint --ext js,ts,tsx -f json -o eslint-report/eslint-report.json src || yarn lint",
"test": "jest",
"ts-check": "tsc --noEmit",
<AccessibleCheckbox
aria-label={title}
checked={checked}
- disabled={disabled || loading}
+ disabled={disabled ?? loading}
id={id}
onChange={handleChange}
onClick={onClick}
import React from 'react';
export interface ClickEventBoundaryProps {
- children: React.ReactElement;
+ children: React.ReactElement<{ onClick?: (e: React.SyntheticEvent<MouseEvent>) => void }>;
}
export default function ClickEventBoundary({ children }: ClickEventBoundaryProps) {
return React.cloneElement(children, {
onClick: (e: React.SyntheticEvent<MouseEvent>) => {
e.stopPropagation();
+
if (typeof children.props.onClick === 'function') {
children.props.onClick(e);
}
state: State = { showSpinner: false };
componentDidMount() {
- if (this.props.loading == null || this.props.loading === true) {
+ if (this.props.loading == null || this.props.loading) {
this.startTimer();
}
}
}
startTimer = () => {
- this.timer = window.setTimeout(
- () => this.setState({ showSpinner: true }),
- this.props.timeout || DEFAULT_TIMEOUT
- );
+ this.timer = window.setTimeout(() => {
+ this.setState({ showSpinner: true });
+ }, this.props.timeout ?? DEFAULT_TIMEOUT);
};
stopTimer = () => {
${tw`sw-flex sw-gap-8 sw-items-center`}
`;
-export function MainMenu({ children }: React.PropsWithChildren<{}>) {
+export function MainMenu({ children }: React.PropsWithChildren<object>) {
return <MainMenuUl>{children}</MainMenuUl>;
}
if (this.mounted) {
// eslint-disable-next-line react/no-find-dom-node
const node = findDOMNode(this);
- if (!node || !node.contains(event.target as Node)) {
+
+ if (!node?.contains(event.target as Node)) {
this.props.onClickOutside();
}
}
const MILLISECONDS_IN_A_SECOND = 1000;
export interface TooltipProps {
- children: React.ReactElement<{}>;
+ children: React.ReactElement;
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
onHide?: VoidFunction;
constructor(props: TooltipProps) {
super(props);
+
this.state = {
flipped: false,
placement: props.placement,
visible: props.visible !== undefined ? props.visible : false,
};
+
this.throttledPositionTooltip = throttle(this.positionTooltip, THROTTLE_SCROLL_DELAY);
}
componentDidMount() {
this.mounted = true;
+
if (this.props.visible === true) {
this.positionTooltip();
this.addEventListeners();
componentDidUpdate(prevProps: TooltipProps, prevState: State) {
if (this.props.placement !== prevProps.placement) {
- this.setState({ placement: this.props.placement }, () =>
- this.onUpdatePlacement(this.hasVisibleChanged(prevState.visible, prevProps.visible))
- );
+ this.setState({ placement: this.props.placement }, () => {
+ this.onUpdatePlacement(this.hasVisibleChanged(prevState.visible, prevProps.visible));
+ });
} else if (this.hasVisibleChanged(prevState.visible, prevProps.visible)) {
this.onUpdateVisible();
} else if (!this.state.flipped && this.needsFlipping(this.state)) {
hasVisibleChanged = (prevStateVisible: boolean, prevPropsVisible?: boolean) => {
if (this.props.visible === undefined) {
- return prevPropsVisible || this.state.visible !== prevStateVisible;
+ return prevPropsVisible ?? this.state.visible !== prevStateVisible;
}
+
return this.props.visible !== prevPropsVisible;
};
- isVisible = () => {
- return this.props.visible ?? this.state.visible;
- };
+ isVisible = () => this.props.visible ?? this.state.visible;
- getPlacement = (): PopupPlacement => {
- return this.state.placement || PopupPlacement.Bottom;
- };
+ getPlacement = (): PopupPlacement => this.state.placement ?? PopupPlacement.Bottom;
tooltipNodeRef = (node: HTMLElement | null) => {
this.tooltipNode = node;
// eslint-disable-next-line react/no-find-dom-node
const toggleNode = findDOMNode(this);
+
if (toggleNode && toggleNode instanceof Element && this.tooltipNode) {
const { height, left, leftFix, top, topFix, width } = popupPositioning(
toggleNode,
) {
this.setState({ visible: true });
}
- }, (this.props.mouseEnterDelay || 0) * MILLISECONDS_IN_A_SECOND);
+ }, (this.props.mouseEnterDelay ?? 0) * MILLISECONDS_IN_A_SECOND);
if (this.props.onShow) {
this.props.onShow();
if (this.mounted && this.props.visible === undefined && !this.mouseIn) {
this.setState({ visible: false });
}
- }, (this.props.mouseLeaveDelay || 0) * MILLISECONDS_IN_A_SECOND);
+ }, (this.props.mouseLeaveDelay ?? 0) * MILLISECONDS_IN_A_SECOND);
if (this.props.onHide) {
this.props.onHide();
this.handlePointerEnter();
const { children } = this.props;
- if (typeof children.props.onPointerEnter === 'function') {
- children.props.onPointerEnter();
+
+ const props = children.props as { onPointerEnter?: VoidFunction };
+
+ if (typeof props.onPointerEnter === 'function') {
+ props.onPointerEnter();
}
};
this.handlePointerLeave();
const { children } = this.props;
- if (typeof children.props.onPointerLeave === 'function') {
- children.props.onPointerLeave();
+
+ const props = children.props as { onPointerLeave?: VoidFunction };
+
+ if (typeof props.onPointerLeave === 'function') {
+ props.onPointerLeave();
}
};
class TooltipPortal extends React.Component {
el: HTMLElement;
- constructor(props: {}) {
+ constructor(props: object) {
super(props);
this.el = document.createElement('div');
}
});
it('should attach ref', () => {
- const ref = jest.fn();
+ const ref = jest.fn() as jest.Mock<unknown, unknown[]>;
setupWithProps({ innerRef: ref });
expect(ref).toHaveBeenCalled();
expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLInputElement);
beforeAll(() => {
const { location } = window;
- delete (window as any).location;
+ delete (window as { location?: Location }).location;
window.location = { ...location, href: '' };
});
beforeAll(() => {
const { location } = window;
- delete (window as any).location;
+ delete (window as { location?: Location }).location;
window.location = { ...location, href: '' };
});
import Tooltip, { TooltipInner } from '../Tooltip';
jest.mock('react-dom', () => {
- const reactDom = jest.requireActual('react-dom');
+ const reactDom = jest.requireActual('react-dom') as object;
return { ...reactDom, findDOMNode: jest.fn().mockReturnValue(undefined) };
});
icon={icon}
innerRef={setCopyButton}
>
- {children || translate('copy')}
+ {children ?? translate('copy')}
</ButtonSecondary>
</Tooltip>
)}
);
}
- IconWrapper.displayName = displayName || WrappedOcticon.displayName || WrappedOcticon.name;
+ IconWrapper.displayName = displayName ?? WrappedOcticon.displayName ?? WrappedOcticon.name;
return IconWrapper;
}
<ClickEventBoundary>
<PopupWrapper
className={classNames(`is-${placement}`, className)}
- ref={ref || React.createRef()}
+ ref={ref ?? React.createRef()}
style={style}
zLevel={zLevel}
{...ariaProps}
class PortalWrapper extends React.Component {
el: HTMLElement;
- constructor(props: {}) {
+ constructor(props: object) {
super(props);
this.el = document.createElement('div');
}
width: 50,
height: 20,
}),
-} as any;
+} as Element & { getBoundingClientRect: jest.Mock };
const popupRect = {
getBoundingClientRect: jest.fn().mockReturnValue({
width: 200,
height: 100,
}),
-} as any;
+} as Element & { getBoundingClientRect: jest.Mock };
beforeAll(() => {
Object.defineProperties(document.documentElement, {
* - TopLeft = above the block, horizontally left-aligned
* - TopRight = above the block, horizontally right-aligned
*/
+
export enum PopupPlacement {
Bottom = 'bottom',
BottomLeft = 'bottom-left',
const toggleRect = toggleNode.getBoundingClientRect();
const popupRect = popupNode.getBoundingClientRect();
- let left = 0;
- let top = 0;
+ let { left, top } = toggleRect;
switch (placement) {
case PopupPlacement.Bottom:
- left = toggleRect.left + toggleRect.width / 2 - popupRect.width / 2;
- top = toggleRect.top + toggleRect.height;
+ left += toggleRect.width / 2 - popupRect.width / 2;
+ top += toggleRect.height;
break;
case PopupPlacement.BottomLeft:
- left = toggleRect.left;
- top = toggleRect.top + toggleRect.height;
+ top += toggleRect.height;
break;
case PopupPlacement.BottomRight:
- left = toggleRect.left + toggleRect.width - popupRect.width;
- top = toggleRect.top + toggleRect.height;
+ left += toggleRect.width - popupRect.width;
+ top += toggleRect.height;
break;
case PopupPlacement.Left:
- left = toggleRect.left - popupRect.width;
- top = toggleRect.top + toggleRect.height / 2 - popupRect.height / 2;
+ left -= popupRect.width;
+ top += toggleRect.height / 2 - popupRect.height / 2;
break;
case PopupPlacement.LeftTop:
- left = toggleRect.left - popupRect.width;
- top = toggleRect.top;
+ left -= popupRect.width;
break;
case PopupPlacement.LeftBottom:
- left = toggleRect.left - popupRect.width;
- top = toggleRect.top + toggleRect.height - popupRect.height;
+ left -= popupRect.width;
+ top += toggleRect.height - popupRect.height;
break;
case PopupPlacement.Right:
- left = toggleRect.left + toggleRect.width;
- top = toggleRect.top + toggleRect.height / 2 - popupRect.height / 2;
+ left += toggleRect.width;
+ top += toggleRect.height / 2 - popupRect.height / 2;
break;
case PopupPlacement.RightTop:
- left = toggleRect.left + toggleRect.width;
- top = toggleRect.top;
+ left += toggleRect.width;
break;
case PopupPlacement.RightBottom:
- left = toggleRect.left + toggleRect.width;
- top = toggleRect.top + toggleRect.height - popupRect.height;
+ left += toggleRect.width;
+ top += toggleRect.height - popupRect.height;
break;
case PopupPlacement.Top:
- left = toggleRect.left + toggleRect.width / 2 - popupRect.width / 2;
- top = toggleRect.top - popupRect.height;
+ left += toggleRect.width / 2 - popupRect.width / 2;
+ top -= popupRect.height;
break;
case PopupPlacement.TopLeft:
- left = toggleRect.left;
- top = toggleRect.top - popupRect.height;
+ top -= popupRect.height;
break;
case PopupPlacement.TopRight:
- left = toggleRect.left + toggleRect.width - popupRect.width;
- top = toggleRect.top - popupRect.height;
+ left += toggleRect.width - popupRect.width;
+ top -= popupRect.height;
break;
}
Math.max(left, getMinLeftPlacement(toggleRect)),
getMaxLeftPlacement(toggleRect, popupRect)
);
+
const inBoundariesTop = Math.min(
Math.max(top, getMinTopPlacement(toggleRect)),
getMaxTopPlacement(toggleRect, popupRect)
return render(ui, { ...options, wrapper: getContextWrapper() }, userEventOptions);
}
-type RenderRouterOptions = { additionalRoutes?: ReactNode };
+interface RenderRouterOptions {
+ additionalRoutes?: ReactNode;
+}
export function renderWithRouter(
ui: React.ReactElement,
) {
const { additionalRoutes, userEventOptions, ...renderOptions } = options;
- function RouterWrapper({ children }: React.PropsWithChildren<{}>) {
+ function RouterWrapper({ children }: React.PropsWithChildren<object>) {
return (
<HelmetProvider>
<MemoryRouter>
}
function getContextWrapper() {
- return function ContextWrapper({ children }: React.PropsWithChildren<{}>) {
+ return function ContextWrapper({ children }: React.PropsWithChildren<object>) {
return (
<HelmetProvider>
<IntlProvider defaultLocale="en" locale="en">
return MockedComponent;
}
-export const debounceTimer = jest.fn().mockImplementation((callback, timeout) => {
- let timeoutId: number;
- const debounced = jest.fn((...args) => {
- window.clearTimeout(timeoutId);
- timeoutId = window.setTimeout(() => callback(...args), timeout);
- });
- (debounced as any).cancel = jest.fn(() => {
- window.clearTimeout(timeoutId);
+export const debounceTimer = jest
+ .fn()
+ .mockImplementation((callback: (...args: unknown[]) => void, timeout: number) => {
+ let timeoutId: number;
+
+ const debounced = jest.fn((...args: unknown[]) => {
+ window.clearTimeout(timeoutId);
+
+ timeoutId = window.setTimeout(() => {
+ callback(...args);
+ }, timeout);
+ });
+
+ (debounced as typeof debounced & { cancel: () => void }).cancel = jest.fn(() => {
+ window.clearTimeout(timeoutId);
+ });
+
+ return debounced;
});
- return debounced;
-});
export function flushPromises(usingFakeTime = false): Promise<void> {
return new Promise((resolve) => {
}
// Is theme color overridden by a color name ?
const color = colorOverride ? theme.colors[colorOverride as ThemeColors] : [r, g, b];
+
if (typeof color === 'string') {
return color as CSSColor;
}
- return getRGBAString(color, opacityOverride ?? color[3] ?? a);
+ return getRGBAString(color, opacityOverride ?? (color[3] as number | string | undefined) ?? a);
}
// Simplified version of getColor for contrast colors, fallback to colors if contrast isn't found
function getContrast(theme: Theme, colorOverride: ThemeContrasts | ThemeColors | CSSColor) {
// Custom CSS property or rgb(a) color, return it directly
if (
- colorOverride?.startsWith('var(--') ||
- colorOverride?.startsWith('rgb(') ||
- colorOverride?.startsWith('rgba(')
+ colorOverride.startsWith('var(--') ||
+ colorOverride.startsWith('rgb(') ||
+ colorOverride.startsWith('rgba(')
) {
return colorOverride as CSSColor;
}
export class GlobalSearch extends React.PureComponent<Props, State> {
input?: HTMLInputElement | null;
node?: HTMLElement | null;
- nodes: Dict<HTMLElement>;
+ nodes: Dict<HTMLElement | undefined>;
mounted = false;
constructor(props: Props) {
handleFocus = () => {
if (!this.state.open) {
// simulate click to close any other dropdowns
- const body = document.documentElement;
- if (body) {
- body.click();
- }
+ document.documentElement.click();
}
+
this.openSearch();
};
getPlainComponentsList = (results: Results, more: More) =>
sortQualifiers(Object.keys(results)).reduce((components, qualifier) => {
- const next = [...components, ...results[qualifier].map((component) => component.key)];
+ const next = [...components, ...(results[qualifier] ?? []).map((component) => component.key)];
if (more[qualifier]) {
next.push('qualifier###' + qualifier);
}
more: { ...state.more, [qualifier]: 0 },
results: {
...state.results,
- [qualifier]: uniqBy([...state.results[qualifier], ...moreResults], 'key'),
+ [qualifier]: uniqBy([...(state.results[qualifier] ?? []), ...moreResults], 'key'),
},
selected: moreResults.length > 0 ? moreResults[0].key : state.selected,
}));
scrollToSelected = () => {
if (this.state.selected) {
const node = this.nodes[this.state.selected];
+
if (node && this.node) {
scrollToElement(node, {
topOffset: 30,
className={classNames('sw-flex sw-flex-col sw-items-start sw-space-y-1', {
active: selected,
})}
- innerRef={(node: HTMLAnchorElement | null) => this.props.innerRef(component.key, node)}
+ innerRef={(node: HTMLAnchorElement | null) => {
+ this.props.innerRef(component.key, node);
+ }}
key={component.key}
onClick={this.props.onClose}
onPointerEnter={this.doSelect}
more: More;
onMoreClick: (qualifier: string) => void;
onSelect: (componentKey: string) => void;
- renderNoResults: () => React.ReactElement<any>;
+ renderNoResults: () => React.ReactElement;
renderResult: (component: ComponentResult) => React.ReactNode;
results: Results;
selected?: string;
sortQualifiers(qualifiers).forEach((qualifier) => {
const components = props.results[qualifier];
- if (components.length > 0) {
+
+ if (components?.length) {
const more = props.more[qualifier];
+
renderedComponents.push(
<li key={`group-${qualifier}`}>
<ul key={`header-${qualifier}`} aria-labelledby={translate('qualifiers', qualifier)}>
<ItemButton
className={classNames({ active: selected })}
disabled={!allowMore}
- onClick={(e: React.MouseEvent<HTMLButtonElement>) => this.handleMoreClick(e, qualifier)}
+ onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+ this.handleMoreClick(e, qualifier);
+ }}
onPointerEnter={() => {
this.handleMouseEnter(qualifier);
}}
}
export interface Results {
- [qualifier: string]: ComponentResult[];
+ [qualifier: string]: ComponentResult[] | undefined;
}
export interface More {
- [qualifier: string]: number;
+ [qualifier: string]: number | undefined;
}
);
}
-export default function MainSonarQubeBar({ children }: React.PropsWithChildren<{}>) {
+export default function MainSonarQubeBar({ children }: React.PropsWithChildren<object>) {
return <MainAppBar Logo={LogoWithAriaText}>{children}</MainAppBar>;
}
<button onClick={addSuggestion} type="button">
add.suggestion
</button>
- <button onClick={() => setSuggestions([])} type="button">
+ <button
+ onClick={() => {
+ setSuggestions([]);
+ }}
+ type="button"
+ >
remove.suggestion
</button>
<EmbedDocsPopupHelper />
projects / sonarqube.git / commitdiff