Configuration page in ReactJS

Done till before bringing config in alignment

styling changes

fixing checks

newly added

WIP

WIP

WIP

Renaming

Linting fixed

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

hey

WIP

WIP

WIP

desktop/core/src/desktop/js/apps/admin/AdminHeader.scss

@@ -0,0 +1,45 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you 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 '../../components/styles/variables';
+
+.admin-header-actions.antd.cuix{
+  display: flex;
+  align-items: center;
+
+  .select-dropDown{
+    border: 1px solid $fluidx-gray-600;
+    border-radius: $border-radius-base;
+    background-color: $fluidx-white;
+    width: 25%;
+    height: 32px;
+  }
+
+   .input-filter{
+    margin: $font-size-sm;
+    width: 25%;
+
+    input {
+      box-shadow: none;
+      -webkit-box-shadow: none;
+    }
+  }
+
+  .config-file-address-value {
+    color: $fluidx-blue-600;
+    display: block;
+  }
+}

desktop/core/src/desktop/js/apps/admin/AdminHeader.test.tsx

@@ -0,0 +1,123 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you 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 { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AdminHeader from './AdminHeader';
+
+// Mock data for the component
+const options = ['Option 1', 'Option 2', 'Option 3'];
+const mockOnSelectChange = jest.fn();
+const mockOnFilterChange = jest.fn();
+
+test('renders AdminHeader with correct dropdown and input filter', () => {
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+    />
+  );
+
+  expect(screen.getByText('Option 1')).toBeInTheDocument();
+
+  expect(screen.getByPlaceholderText('Filter data...')).toBeInTheDocument();
+});
+
+test('Selecting a new option from the dropdown', async () => {
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+    />
+  );
+
+  const selectDropdown = screen.getByTestId('AdminHeaderSelect').firstElementChild;
+
+  if (selectDropdown) {
+    fireEvent.mouseDown(selectDropdown);
+  }
+
+  const dropdown = document.querySelector('.ant-select');
+
+  const secondOption = dropdown?.querySelectorAll('.ant-select-item')[1];
+  if (secondOption) {
+    fireEvent.click(secondOption);
+  }
+
+  expect(mockOnSelectChange).toHaveBeenCalledWith('Option 2');
+});
+
+test('Typing in the input filter should trigger a callback', async () => {
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+    />
+  );
+
+  const inputFilter = screen.getByPlaceholderText('Filter data...');
+
+  fireEvent.change(inputFilter, { target: { value: 'new filter' } });
+
+  expect(mockOnFilterChange).toHaveBeenCalledWith('new filter');
+});
+
+test('renders configAddress correctly when passed as prop', () => {
+  const configAddressValue = 'path/to/config';
+
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+      configAddress={configAddressValue}
+    />
+  );
+
+  expect(screen.getByText('Configuration files location:')).toBeInTheDocument();
+  expect(screen.getByText(configAddressValue)).toBeInTheDocument();
+});
+
+test('does not render configAddress when not passed as prop', () => {
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+    />
+  );
+
+  expect(screen.queryByText('Configuration files location:')).not.toBeInTheDocument();
+});

desktop/core/src/desktop/js/apps/admin/AdminHeader.tsx

@@ -0,0 +1,77 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you 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 { Select, Input } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import './AdminHeader.scss';
+
+const { Option } = Select;
+
+interface AdminHeaderProps {
+  options: string[];
+  selectedValue: string;
+  onSelectChange: (value: string) => void;
+  filterValue: string;
+  onFilterChange: (value: string) => void;
+  placeholder: string;
+  configAddress?: string;
+}
+
+const AdminHeader: React.FC<AdminHeaderProps> = ({
+  options,
+  selectedValue,
+  onSelectChange,
+  filterValue,
+  onFilterChange,
+  placeholder,
+  configAddress
+}) => {
+  return (
+    <div className="cuix antd admin-header-actions">
+      <Select
+        value={selectedValue}
+        onChange={value => onSelectChange(value)}
+        className="select-dropDown"
+        getPopupContainer={triggerNode => triggerNode.parentElement}
+        data-testid="AdminHeaderSelect"
+      >
+        {options.map(option => (
+          <Option key={option} value={option}>
+            {option}
+          </Option>
+        ))}
+      </Select>
+
+      <Input
+        className="input-filter"
+        placeholder={placeholder}
+        prefix={<SearchOutlined />}
+        value={filterValue}
+        onChange={e => onFilterChange(e.target.value)}
+      />
+
+      {configAddress && (
+        <span>
+          Configuration files location:
+          <span className="config-file-address-value">{configAddress}</span>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AdminHeader;

desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss

@@ -0,0 +1,88 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you 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 '../../../components/styles/variables';
+
+.config-component.antd.cuix {
+  background-color: $fluidx-gray-100;
+  padding: 24px;
+
+  .config-section-header {
+    color: $fluidx-gray-700;
+}
+
+  .main-config-item {
+    .last-config-heading,
+    .main-config-item-heading {
+        font-size: $font-size-xl;
+        font-weight: 300;
+    }
+
+    .last-config-heading {
+      padding: 4px 0 8px 0;
+    }
+
+      padding: 16px 0 8px 16px;
+      border-bottom: solid 1px $fluidx-gray-300;
+      background-color: $fluidx-white;
+  }
+
+  .main-config-item .child-config-item .last-config-heading {
+    font-size: $font-size-base;
+  }
+
+  .child-config-item {
+    font-size: $font-size-base;
+    color: $fluidx-black;
+    font-weight: 400;
+    margin-left: 40px;
+  }
+
+  .last-config-helpText {
+    color: $fluidx-gray-700;
+    padding: 4px 8px 12px 21px;
+  }
+
+  .default-section-text {
+    padding: 8px 0 16px 0;
+    display: block;
+    font-size: $font-size-base;
+    color: $fluidx-black;
+    font-weight: 400;
+  }
+
+  .default-value {
+    color: $fluidx-gray-500;
+    font-style: italic;
+  }
+
+  .config-value {
+    color: $fluidx-gray-900;
+    padding: 0 4px;
+    font-size: $font-size-sm;
+    border-radius: 20px;
+    background-color: $fluidx-gray-200;
+    border: 1px solid $hue-border-color;
+    margin-left: 8px;
+  }
+
+  .config-tooltip {
+      margin-left: 8px;
+      cursor: pointer;
+      color: $fluidx-blue-600;
+      font-size: $font-size-base;
+  }
+}