Configuration page in ReactJS

Done till before bringing config in alignment

styling changes

fixing checks

newly added

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: $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,16 @@
+// 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.
+

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

@@ -0,0 +1,76 @@
+// 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 FilterSelectProps {
+  options: string[];
+  selectedValue: string;
+  onSelectChange: (value: string) => void;
+  filterValue: string;
+  onFilterChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
+  configAddress?: string;
+}
+
+const FilterSelect: React.FC<FilterSelectProps> = ({
+  options,
+  selectedValue,
+  onSelectChange,
+  filterValue,
+  onFilterChange,
+  placeholder,
+  configAddress,
+}) => {
+  return (
+    <div className='cuix antd admin-header-actions'>
+      <Select
+        value={selectedValue}
+        onChange={onSelectChange}
+        className="select-dropDown"
+        getPopupContainer={triggerNode => triggerNode.parentElement}
+      >
+        {options.map(option => (
+          <Option key={option} value={option}>
+            {option}
+          </Option>
+        ))}
+      </Select>
+
+      <Input
+        className="input-filter"
+        placeholder={placeholder}
+        prefix={<SearchOutlined />}
+        value={filterValue}
+        onChange={onFilterChange}
+      />
+
+      {configAddress && (
+        <span>
+          Configuration files location:<span className='config-file-address-value'>{configAddress}</span>
+        </span>
+      )}
+
+    </div>
+  );
+};
+
+export default FilterSelect;

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;
+  }
+}

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

@@ -0,0 +1,15 @@
+// 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.

desktop/core/src/desktop/js/apps/admin/Configuration/ConfigurationKey.tsx

@@ -0,0 +1,62 @@
+// 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 { Tooltip } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { ConfigValue } from './ConfigurationTab';
+import './Configuration.scss';
+
+export const ConfigurationKey: React.FC<{ record: ConfigValue }> = ({ record }) => {
+  if (record.is_anonymous) {
+    return (
+      <div>
+        Default section
+        {record.help && (
+          <Tooltip title={record.help}>
+            <InfoCircleOutlined className="config-tooltip" />
+          </Tooltip>
+        )}
+      </div>
+    );
+  } 
+  if(record?.values) {
+    return (
+      <span>
+        <span className="main-config-item-heading">{record.key}</span>
+        {record.help && (
+          <Tooltip title={record.help}>
+            <InfoCircleOutlined className="config-tooltip" />
+          </Tooltip>
+        )}
+      </span>
+    );
+  } else {
+    return (
+      <span>
+        <span className='last-config-heading'>{record.key}</span>
+        {record.value && <span className="config-value">{record.value}</span>}
+        <div>
+          <span className='last-config-helpText'>{record.help}</span>
+          <span className="last-config-key">
+          {record.default && <span className="default-value">Default: {record.default}</span>}
+          </span>
+       </div>
+      </span>
+    );
+  }
+
+};