Merge branch 'main' into PMM-11773-Templates-select-issues

# Conflicts:
#	public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx

.editorconfig

@@ -8,6 +8,13 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 max_line_length = 120
+ij_continuation_indent_size = 8
+ij_formatter_off_tag = @formatter:off
+ij_formatter_on_tag = @formatter:on
+ij_formatter_tags_enabled = false
+ij_smart_tabs = false
+ij_visual_guides = none
+ij_wrap_on_typing = false
 
 [*.go]
 indent_style = tab
@@ -28,3 +35,174 @@ indent_size = 2
 
 [*.star]
 indent_size = 4
+
+[{*.ats,*.cts,*.mts,*.ts,*.tsx}]
+ij_continuation_indent_size = 2
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx,node_modules/**,**/node_modules/**,@angular/material,@angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 0
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_field_in_interface = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_blank_lines_around_method_in_interface = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = keep
+ij_typescript_enum_constants_wrap = on_every_item
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = true
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = true
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = false
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsdoc_include_types = false
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = true
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = true
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false

.eslintrc

@@ -7,6 +7,7 @@
     "import/external-module-folders": ["node_modules", ".yarn"]
   },
   "rules": {
+    "@typescript-eslint/no-unnecessary-type-assertion": "off",
     "react/prop-types": "off",
     "@emotion/jsx-import": "error",
     "lodash/import-scope": [2, "member"],

package.json

@@ -279,7 +279,6 @@
     "@opentelemetry/api": "1.2.0",
     "@opentelemetry/exporter-collector": "0.25.0",
     "@opentelemetry/semantic-conventions": "1.7.0",
-    "@percona/platform-core": "^1.0.12",
     "@popperjs/core": "2.11.5",
     "@prometheus-io/lezer-promql": "^0.37.0-rc.1",
     "@react-aria/button": "3.6.1",

packages/grafana-data/src/types/icon.ts

@@ -153,6 +153,7 @@ export const availableIconsIndex = {
   search: true,
   'search-minus': true,
   'search-plus': true,
+  'server-network': true,
   'share-alt': true,
   shield: true,
   'shield-exclamation': true,
@@ -196,7 +197,6 @@ export const availableIconsIndex = {
   'percona-database-checks': true,
   'percona-database': true,
   'percona-disk': true,
-  'percona-inventory': true,
   'percona-kubernetes': true,
   'percona-memory': true,
   'percona-network': true,

packages/grafana-ui/src/components/Icon/cached.json

@@ -171,7 +171,6 @@
   "mono/percona-database-checks",
   "mono/percona-database",
   "mono/percona-disk",
-  "mono/percona-inventory",
   "mono/percona-kubernetes",
   "mono/percona-memory",
   "mono/percona-network",

packages/grafana-ui/src/components/Icon/iconBundle.ts

@@ -179,7 +179,6 @@ import u1168 from '../../../../../public/img/icons/mono/percona-dashboard.svg';
 import u1169 from '../../../../../public/img/icons/mono/percona-database-checks.svg';
 import u1170 from '../../../../../public/img/icons/mono/percona-database.svg';
 import u1171 from '../../../../../public/img/icons/mono/percona-disk.svg';
-import u1172 from '../../../../../public/img/icons/mono/percona-inventory.svg';
 import u1173 from '../../../../../public/img/icons/mono/percona-kubernetes.svg';
 import u1174 from '../../../../../public/img/icons/mono/percona-memory.svg';
 import u1175 from '../../../../../public/img/icons/mono/percona-network.svg';
@@ -402,7 +401,6 @@ export function initIconCache() {
   cacheItem(u1169, 'mono/percona-database-checks.svg');
   cacheItem(u1170, 'mono/percona-database.svg');
   cacheItem(u1171, 'mono/percona-disk.svg');
-  cacheItem(u1172, 'mono/percona-inventory.svg');
   cacheItem(u1173, 'mono/percona-kubernetes.svg');
   cacheItem(u1174, 'mono/percona-memory.svg');
   cacheItem(u1175, 'mono/percona-network.svg');

packages/grafana-ui/src/components/Icon/utils.ts

@@ -15,7 +15,6 @@ const alwaysMonoIcons: IconName[] = [
   'percona-dashboard',
   'percona-kubernetes',
   'percona-summary',
-  'percona-inventory',
   'percona-add',
   'percona-alert',
   'percona-disk',

packages/grafana-ui/src/components/Tags/TagList.tsx

@@ -21,27 +21,39 @@ export interface Props {
   getAriaLabel?: (name: string, i: number) => string;
   /** Icon to show next to tag label */
   icon?: IconName;
+  /** @Percona */
+  /** Set same color for all tags */
+  colorIndex?: number;
 }
 
 export const TagList = memo(
-  forwardRef<HTMLUListElement, Props>(({ displayMax, tags, icon, onClick, className, getAriaLabel }, ref) => {
-    const theme = useTheme2();
-    const styles = getStyles(theme, Boolean(displayMax && displayMax > 0));
-    const numTags = tags.length;
-    const tagsToDisplay = displayMax ? tags.slice(0, displayMax) : tags;
-    return (
-      <ul className={cx(styles.wrapper, className)} aria-label="Tags" ref={ref}>
-        {tagsToDisplay.map((tag, i) => (
-          <li className={styles.li} key={tag}>
-            <Tag name={tag} icon={icon} onClick={onClick} aria-label={getAriaLabel?.(tag, i)} data-tag-id={i} />
-          </li>
-        ))}
-        {displayMax && displayMax > 0 && numTags - displayMax > 0 && (
-          <span className={styles.moreTagsLabel}>+ {numTags - displayMax}</span>
-        )}
-      </ul>
-    );
-  })
+  forwardRef<HTMLUListElement, Props>(
+    ({ displayMax, tags, icon, onClick, className, getAriaLabel, colorIndex }, ref) => {
+      const theme = useTheme2();
+      const styles = getStyles(theme, Boolean(displayMax && displayMax > 0));
+      const numTags = tags.length;
+      const tagsToDisplay = displayMax ? tags.slice(0, displayMax) : tags;
+      return (
+        <ul className={cx(styles.wrapper, className)} aria-label="Tags" ref={ref}>
+          {tagsToDisplay.map((tag, i) => (
+            <li className={styles.li} key={tag}>
+              <Tag
+                colorIndex={colorIndex}
+                name={tag}
+                icon={icon}
+                onClick={onClick}
+                aria-label={getAriaLabel?.(tag, i)}
+                data-tag-id={i}
+              />
+            </li>
+          ))}
+          {displayMax && displayMax > 0 && numTags - displayMax > 0 && (
+            <span className={styles.moreTagsLabel}>+ {numTags - displayMax}</span>
+          )}
+        </ul>
+      );
+    }
+  )
 );
 
 TagList.displayName = 'TagList';

packages/grafana-ui/src/types/react-table-config.d.ts

@@ -106,6 +106,9 @@ declare module 'react-table' {
       UseSortByColumnProps<D> {
     className?: string;
     style?: CSSProperties;
+    // @PERCONA
+    // By default, cells with too much text get their content hidden using ellipsis. This allows to override that config.
+    noHiddenOverflow?: boolean;
   }
 
   export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>

public/app/features/dashboard/components/ShareModal/ShareLink.tsx

@@ -188,7 +188,7 @@ export class ShareLink extends PureComponent<Props, State> {
               {/* We modified this text and link */}
               To render a panel image, you must install the&nbsp;
               <a
-                href="https://www.percona.com/doc/percona-monitoring-and-management/2.x/how-to/render-dashboard-images.html"
+                href="https://docs.percona.com/percona-monitoring-and-management/how-to/share-dashboard.html#share-as-a-png-file"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="external-link"

public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx

@@ -1,5 +1,9 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
+
+import { configureStore } from 'app/store/configureStore';
+import { StoreState } from 'app/types';
 
 import { AddInstance } from './AddInstance';
 import { instanceList } from './AddInstance.constants';
@@ -8,7 +12,8 @@ jest.mock('app/percona/settings/Settings.service');
 
 describe('AddInstance page::', () => {
   it('should render a given number of links', async () => {
-    await waitFor(() => render(<AddInstance showAzure={false} onSelectInstanceType={() => {}} />));
+    const ui = withStore(<AddInstance showAzure={false} onSelectInstanceType={() => {}} />);
+    await waitFor(() => render(ui));
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length);
     instanceList.forEach((item) => {
@@ -17,7 +22,8 @@ describe('AddInstance page::', () => {
   });
 
   it('should render azure option', async () => {
-    await waitFor(() => render(<AddInstance showAzure onSelectInstanceType={() => {}} />));
+    const ui = withStore(<AddInstance showAzure onSelectInstanceType={() => {}} />);
+    await waitFor(() => render(ui));
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length + 1);
     instanceList.forEach((item) => {
@@ -29,7 +35,8 @@ describe('AddInstance page::', () => {
   it('should invoke a callback with a proper instance type', async () => {
     const onSelectInstanceType = jest.fn();
 
-    render(<AddInstance showAzure onSelectInstanceType={onSelectInstanceType} />);
+    const ui = withStore(<AddInstance showAzure onSelectInstanceType={onSelectInstanceType} />);
+    render(ui);
 
     expect(onSelectInstanceType).toBeCalledTimes(0);
 
@@ -40,3 +47,7 @@ describe('AddInstance page::', () => {
     expect(onSelectInstanceType.mock.calls[0][0]).toStrictEqual({ type: 'rds' });
   });
 });
+
+const withStore = (el: React.ReactElement): React.ReactElement => (
+  <Provider store={configureStore({} as StoreState)}>{el}</Provider>
+);