implement linked test cases content

app/src/components/fields/searchField/searchField.jsx

@@ -31,6 +31,7 @@
   placeholder,
   isLoading,
   event,
+  className,
 }) => {
   const { trackEvent } = useTracking();
   const [isSearchActive, setIsSearchActive] = useState(false);
@@ -56,7 +57,7 @@
     if (searchValue === null && filter) {
       setSearchValue(filter);
     }
   }, []);
 
   const handleBlur = (e) => {
     setIsSearchActive(false);
@@ -80,7 +81,7 @@
       placeholder={placeholder}
       loading={isSearchActive && isLoading}
       startIcon={<SearchIcon />}
-      className={cx('search-field')}
+      className={cx('search-field', className)}
       maxLength={256}
       collapsible
       clearable
@@ -92,6 +93,7 @@
   searchValue: PropTypes.string || null,
   setSearchValue: PropTypes.func.isRequired,
   filter: PropTypes.string,
+  className: PropTypes.string,
   onFilterChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
   isLoading: PropTypes.bool,

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.jsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { useIntl } from 'react-intl';
+
+import { Button, PlusIcon, CloseIcon } from '@reportportal/ui-kit';
+
+import { messages } from './messages';
+
+import styles from './filterBlock.scss';
+
+const cx = classNames.bind(styles);
+
+export const FilterBlock = ({ filters, clearAllFilters }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className={cx('filter-block')}>
+      {filters.status && (
+        <div className={cx('filter-block__status')}>
+          {filters.status}
+          <div className={cx('filter-block__status-icon')} onClick={clearAllFilters}>
+            <CloseIcon />
+          </div>
+        </div>
+      )}
+      <Button className={cx('filter-block__add-button')} icon={<PlusIcon />} variant={'text'}>
+        {formatMessage(messages.addNew)}
+      </Button>
+      <Button
+        className={cx('filter-block__clear-button')}
+        icon={<CloseIcon />}
+        variant="text"
+        onClick={clearAllFilters}
+      >
+        {formatMessage(messages.clearAll)}
+      </Button>
+    </div>
+  );
+};
+
+FilterBlock.propTypes = {
+  filters: PropTypes.shape({
+    status: PropTypes.string,
+  }).isRequired,
+  clearAllFilters: PropTypes.func.isRequired,
+};

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/filterBlock.scss

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.filter-block {
+  display: flex;
+  gap: 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: var(--rp-ui-base-bg-000);
+  box-shadow: var(--rp-ui-base-shadow);
+
+  &__status {
+    position: relative;
+    padding: 4px 32px 4px 8px;
+    border-radius: 6px;
+    font-family: $FONT-ROBOTO-REGULAR;
+    font-size: 13px;
+    line-height: 20px;
+    text-indent: 1px;
+    letter-spacing: 0;
+    color: var(--rp-ui-base-almost-black);
+    background-color: var(--rp-ui-base-bg-200);
+
+    &-icon {
+      position: absolute;
+      top: 6px;
+      right: 8px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+
+      svg {
+        width: 8px;
+        height: 8px;
+
+        path {
+          fill: var(--rp-ui-base-dark-e-200);
+        }
+      }
+    }
+  }
+
+  &__clear-button {
+    margin-left: auto;
+
+    i {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+}

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/index.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { FilterBlock } from './filterBlock';

app/src/pages/inside/productVersionPage/linkedTestCasesTab/filterBlock/messages.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  addNew: {
+    id: 'LinkedTestCasesTab.addNew',
+    defaultMessage: 'Add new',
+  },
+  clearAll: {
+    id: 'LinkedTestCasesTab.clearAll',
+    defaultMessage: 'Clear All',
+  },
+});

app/src/pages/inside/productVersionPage/linkedTestCasesTab/headerConfig/headerConfig.jsx

@@ -0,0 +1,128 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Fragment, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { useIntl } from 'react-intl';
+import { FilterFilledIcon, FilterOutlineIcon, Popover, Toggle } from '@reportportal/ui-kit';
+
+import { SearchField } from 'components/fields/searchField';
+
+import { messages } from './messages';
+
+import styles from './headerConfig.scss';
+
+const cx = classNames.bind(styles);
+
+export const HeaderConfig = ({ filters, setFilters }) => {
+  const { formatMessage } = useIntl();
+  const [isShowFolders, setIsShowFolders] = useState(false);
+  const [appliedFiltersCount, setAppliedFiltersCount] = useState(0);
+  const [isMainFilterOpen, setIsMainFilterOpen] = useState(false);
+  const [isInnerFilterOpen, setIsInnerFilterOpen] = useState(false);
+
+  useEffect(() => {
+    setAppliedFiltersCount(Object.keys(filters).length);
+  }, [filters]);
+
+  const handleFilters = () => {
+    setFilters((prevState) => ({ ...prevState, status: 'Executed' }));
+    setIsMainFilterOpen(false);
+    setIsInnerFilterOpen(false);
+  };
+
+  return (
+    <div className={cx('header-config')}>
+      <div className={cx('header-config__filters')}>
+        <SearchField
+          searchValue=""
+          setSearchValue={() => {}}
+          placeholder={formatMessage(messages.searchPlaceholder)}
+          className={cx('header-config__filters--search-input')}
+        />
+        <Popover
+          content={
+            <>
+              <Popover
+                content={
+                  <>
+                    <div className={cx('filter-popover__item')} onClick={handleFilters}>
+                      {formatMessage(messages.executed)}
+                    </div>
+                    <div className={cx('filter-popover__item')}>
+                      {formatMessage(messages.notExecuted)}
+                    </div>
+                  </>
+                }
+                placement="left-start"
+                className={cx('filter-popover', 'filter-popover--inner')}
+                isOpened={isInnerFilterOpen}
+                setIsOpened={setIsInnerFilterOpen}
+              >
+                <div
+                  className={cx('filter-popover__item', 'filter-popover__item--popover', {
+                    'filter-popover__item--popover-open': isInnerFilterOpen,
+                  })}
+                  tabIndex={0}
+                >
+                  <span>{formatMessage(messages.executionStatus)}</span>
+                </div>
+              </Popover>
+              <div className={cx('filter-popover__item')}>{formatMessage(messages.tag)}</div>
+              <div className={cx('filter-popover__item')}>
+                {formatMessage(messages.defaultVersion)}
+              </div>
+            </>
+          }
+          placement="bottom-end"
+          className={cx('filter-popover')}
+          isOpened={isMainFilterOpen}
+          setIsOpened={setIsMainFilterOpen}
+        >
+          <div
+            className={cx('filters-icon-container', {
+              'with-applied': appliedFiltersCount,
+              opened: isMainFilterOpen,
+            })}
+            tabIndex={0}
+          >
+            <div className={cx('header-config__filters--filter-icon-wrapper')}>
+              <i className={cx('filter-icon')}>
+                {appliedFiltersCount ? <FilterFilledIcon /> : <FilterOutlineIcon />}
+              </i>
+            </div>
+            {appliedFiltersCount ? (
+              <span className={cx('filters-count')}>{appliedFiltersCount}</span>
+            ) : null}
+          </div>
+        </Popover>
+      </div>
+      <div className={cx('header-config__toggle')}>
+        <Toggle value={isShowFolders} onChange={(e) => setIsShowFolders(e.target.checked)}>
+          <span className={cx('name-wrapper')}>{formatMessage(messages.showFolders)}</span>
+        </Toggle>
+      </div>
+    </div>
+  );
+};
+
+HeaderConfig.propTypes = {
+  filters: PropTypes.shape({
+    status: PropTypes.string,
+  }),
+  setFilters: PropTypes.func,
+};