Configuration page in ReactJS

Done till before bringing config in alignment

styling changes

fixing checks

newly added

WIP

WIP

WIP

Renaming

Linting fixed

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: $cdl-input-height-default;
+  }
+
+   .input-filter{
+    margin: $font-size-sm;
+    width: 25%;
+
+    input {
+      box-shadow: none;
+      -webkit-box-shadow: none;
+    }
+  }
+
+  .config-file-address-value {
+    color: $cdl-blue-600;
+    display: block;
+  }
+}

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

@@ -0,0 +1,133 @@
+// 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(); // Mock function for select dropdown change
+const mockOnFilterChange = jest.fn(); // Mock function for filter input change
+
+// 1. Render the component and verify the dropdown and input filter render correctly
+test('renders AdminHeader with correct dropdown and input filter', () => {
+  render(
+    <AdminHeader
+      options={options}
+      selectedValue="Option 1"
+      onSelectChange={mockOnSelectChange}
+      filterValue=""
+      onFilterChange={mockOnFilterChange}
+      placeholder="Filter data..."
+    />
+  );
+
+  // Verify that the Select dropdown renders with the correct default value
+  expect(screen.getByText('Option 1')).toBeInTheDocument();
+
+  // Verify that the input filter renders with the correct placeholder
+  expect(screen.getByPlaceholderText('Filter data...')).toBeInTheDocument();
+});
+
+// 2. Selecting a new option from the select dropdown and verify the callback
+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');
+});
+
+// 3. When user is typing in the input filter, callback must be triggered
+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' } }); // Simulate typing in the input
+
+  // Verify that the onFilterChange function was called with the new input event
+  expect(mockOnFilterChange).toHaveBeenCalledWith('new filter');
+});
+
+// 4. Verify the configAddress is displayed correctly when passed as a prop
+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}
+    />
+  );
+
+  // Verify that the config address text is rendered correctly
+  expect(screen.getByText('Configuration files location:')).toBeInTheDocument();
+  expect(screen.getByText(configAddressValue)).toBeInTheDocument();
+});
+
+// 5. Verify that configAddress is not rendered when it is not provided
+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..."
+    />
+  );
+
+  // Ensure the config address section is not rendered
+  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 AdminHeaderComponentProps {
+  options: string[];
+  selectedValue: string;
+  onSelectChange: (value: string) => void;
+  filterValue: string;
+  onFilterChange: (value: string) => void;
+  placeholder: string;
+  configAddress?: string;
+}
+
+const AdminHeader: React.FC<AdminHeaderComponentProps> = ({
+  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,92 @@
+// 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: 0 24px 24px 24px;
+
+  .config-section-header {
+    padding-top: 15px;
+    color: $cdl-gray-700;
+}
+
+  .main-config-item {
+      padding: 16px 0 8px 16px;
+      border-bottom: solid 1px $cdl-gray-300;
+      background-color: $cdl-white;
+  }
+
+  .main-config-item-heading {
+      font-size: $font-size-xl;
+      font-weight: 300;
+  }
+
+  .main-config-item  .last-config-heading {
+    font-size: $font-size-xl;
+  }
+
+  .main-config-item .child-config-item .last-config-heading {
+    font-size: $font-size-base;
+  }
+
+  .child-config-item {
+    font-size: $font-size-base;
+    color: $cdl-black;
+    font-weight: 400;
+    margin-left: 40px;
+  }
+
+  .last-config-helpText {
+    color: $cdl-gray-700;
+    padding: 4px 8px 12px 21px;
+  }
+
+  .default-section-text {
+    padding: 8px 0 16px 0;
+    display: block;
+    font-size: $font-size-base;
+    color: $cdl-black;
+    font-weight: 400;
+  }
+
+  .default-value {
+    color: $cdl-gray-500;
+    font-style: italic;
+  }
+
+  .config-value {
+    color: $cdl-gray-900;
+    padding: 0 4px;
+    font-size: $font-size-sm;
+    border-radius: 20px;
+    background-color: $cdl-gray-200;
+    border: 1px solid $hue-border-color;
+    margin-left: 8px;
+  }
+
+  .last-config-heading {
+    padding: 4px 0 8px 0;
+  }
+
+  .config-tooltip {
+      margin-left: 8px;
+      cursor: pointer;
+      color: $cdl-blue-600;
+      font-size: $font-size-base;
+  }
+}