Merge pull request #886 from KelvinTegelaar/dev

Dev to release

Author: KelvinTegelaar

.stylelintrc.json

@@ -2,7 +2,7 @@
   "extends": "stylelint-config-sass-guidelines",
   "rules": {
     "selector-class-pattern": null,
-    "max-nesting-depth": 5,
+    "max-nesting-depth": 6,
     "selector-no-qualifying-type": [
       true,
       {

package-lock.json

@@ -68,6 +68,7 @@
     "react-papaparse": "^3.18.2",
     "react-redux": "^7.2.5",
     "react-router-dom": "^6.1.1",
+    "react-select": "^5.3.0",
     "react-select-search": "^3.0.8",
     "react-syntax-highlighter": "^15.4.5",
     "redux": "4.1.1",

package.json

@@ -1 +1 @@
-2.4.0
+2.5.0

public/version_latest.txt

@@ -16,6 +16,7 @@ const Page403 = React.lazy(() => import('./views/pages/page403/Page403'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 const Login = React.lazy(() => import('./views/pages/login/Login'))
+const Logout = React.lazy(() => import('./views/pages/login/Logout'))
 
 const App = () => {
   return (
@@ -31,6 +32,7 @@ const App = () => {
             <Route exact path="/404" name="Page 404" element={<Page404 />} />
             <Route exact path="/500" name="Page 500" element={<Page500 />} />
             <Route exact path="/login" name="Login" element={<Login />} />
+            <Route exact path="/logout" name="Logout" element={<Logout />} />
             <Route
               path="/"
               element={

src/App.js

@@ -7,11 +7,10 @@ import {
   CFormSwitch,
   CFormTextarea,
 } from '@coreui/react'
-import SelectSearch, { fuzzySearch } from 'react-select-search'
+import Select from 'react-select'
 import { Field } from 'react-final-form'
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
 /*
   wrapper classes for React Final Form with CoreUI
@@ -273,22 +272,6 @@ Condition.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 }
 
-const RFFSelectSearchClasses = {
-  container: 'form-select is-valid',
-  value: 'select-search__value',
-  input: 'select-search__input form-select',
-  select: 'select-search__select',
-  row: 'select-search__row',
-  options: 'select-search__options',
-  option: 'select-search__option',
-  group: 'select-search__group',
-  'group-header': 'select-search__group-header',
-  'is-selected': 'select-search.is-selected',
-  'is-highlighted': 'select-search.is-highlighted',
-  'is-loading': 'select-search.is-loading',
-  'has-focus': 'select-search.has-focus',
-}
-
 export const RFFSelectSearch = ({
   name,
   label,
@@ -298,35 +281,26 @@ export const RFFSelectSearch = ({
   onChange,
   disabled = false,
 }) => {
+  const selectSearchvalues = values.map((val) => ({
+    value: val.value,
+    label: val.name,
+  }))
+
   return (
     <Field name={name} validate={validate}>
       {({ meta, input }) => {
         return (
           <div>
             <CFormLabel htmlFor={name}>{label}</CFormLabel>
-            <SelectSearch
+            <Select
+              className="react-select-container"
+              classNamePrefix="react-select"
               {...input}
-              valid={!meta.error && meta.touched}
-              invalid={meta.error && meta.touched}
-              search
+              isClearable={true}
               name={name}
               id={name}
-              // @todo fix this override so the styling is the same as coreui or override render?
-              className={(key) => {
-                if (key === 'container') {
-                  return classNames('form-select', {
-                    'is-valid': !meta.error && meta.touched,
-                    'is-invalid': meta.error && meta.touched,
-                  })
-                }
-                return RFFSelectSearchClasses[key]
-              }}
               disabled={disabled}
-              options={values}
-              filterOptions={fuzzySearch}
-              value={input.value}
-              //commented out this on change, because even when it was not set it was using the value, causing issues with the event.
-              onChange={input.onChange}
+              options={selectSearchvalues}
               placeholder={placeholder}
             />
             <RFFCFormFeedback meta={meta} />

src/components/forms/RFFComponents.js

@@ -148,8 +148,20 @@ export default function CippTable({
       ])
     }
     if (!disableCSVExport) {
+      const keys = []
+      columns.map((col) => {
+        if (col.exportSelector) keys.push(col.exportSelector)
+        return null
+      })
+
+      console.log(keys)
+      const filtered = data.map((obj) =>
+        // eslint-disable-next-line no-sequences
+        keys.reduce((acc, curr) => ((acc[curr] = obj[curr]), acc), {}),
+      )
+      console.log(filtered)
       defaultActions.push([
-        <ExportCsvButton key="export-csv-action" csvData={data} reportName={reportName} />,
+        <ExportCsvButton key="export-csv-action" csvData={filtered} reportName={reportName} />,
       ])
     }
     return (

src/components/tables/CippTable.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useListTenantsQuery } from 'src/store/api/tenants'
-import SelectSearch, { fuzzySearch } from 'react-select-search'
+import Select from 'react-select'
 import PropTypes from 'prop-types'
 
 const TenantSelectorMultiple = React.forwardRef(
@@ -17,23 +17,25 @@ const TenantSelectorMultiple = React.forwardRef(
     } else if (error) {
       placeholder = 'Error loading tenants'
     }
-
+    const mappedValue = values.map((val) => val.value)
     return (
-      <SelectSearch
+      <Select
+        className="react-select-container"
+        classNamePrefix="react-select"
         ref={ref}
-        search
+        isMulti={true}
         onChange={onChange}
-        filterOptions={fuzzySearch}
         placeholder={placeholder}
-        value={values}
+        value={mappedValue.value}
+        getOptionLabel={(option) => option.label}
+        getOptionValue={(option) => option.value}
         disabled={isLoading}
         options={tenants.map(({ customerId, defaultDomainName, displayName }) => ({
           value: customerId,
-          name: [displayName] + [` (${defaultDomainName})`],
+          label: [displayName] + [` (${defaultDomainName})`],
         }))}
         multiple
         printOptions="on-focus"
-        closeOnSelect={false}
         {...rest}
       />
     )

src/components/utilities/TenantSelectorMultiple.js

@@ -395,3 +395,38 @@
 .sidebar-nav .nav-link {
   margin: 0.25rem 0;
 }
+.react-select-container {
+  .react-select__control {
+    background-color: var(--cipp-search-bg);
+    border-color: var(--cipp-search-border-color);
+    transition: none;
+
+    &:hover {
+      border-color: var(--cipp-search-border-color);
+    }
+  }
+
+  .react-select__menu {
+    background-color: var(--cipp-search-bg);
+    border: 1px solid var(--cipp-search-border-color);
+  }
+
+  .react-select__option {
+    background-color: var(--cipp-search-bg);
+
+    &:hover {
+      background-color: var(--cipp-search-border-color);
+    }
+  }
+  .react-select__indicator {
+    color: var(--cipp-search-border-color);
+  }
+  .react-select__indicator-separator {
+    background-color: var(--cipp-search-border-color);
+  }
+
+  .react-select__placeholder,
+  .react-select__single-value {
+    color: var(--text-primary);
+  }
+}

src/scss/_custom.scss

@@ -107,25 +107,16 @@ const GeneralSettings = () => {
   const [selectedTenants, setSelectedTenants] = useState([])
   const [showMaxSelected, setShowMaxSelected] = useState(false)
   const [tokenOffcanvasVisible, setTokenOffcanvasVisible] = useState(false)
-  const maxSelected = 3
+  const maxSelected = 2
   const tenantSelectorRef = useRef(null)
 
-  const handleSetSelectedTenants = (values) => {
-    if (values.length <= maxSelected) {
-      setSelectedTenants(values)
+  const handleSetSelectedTenants = (value) => {
+    if (value.length <= maxSelected) {
+      setSelectedTenants(value)
       setShowMaxSelected(false)
     } else {
+      setSelectedTenants(value)
       setShowMaxSelected(true)
-      // close the tenant selector, hacky but no other way to do this
-      // without making a fully custom selector
-      // https://github.com/tbleckert/react-select-search#headless-mode-with-hooks
-      tenantSelectorRef.current?.firstChild?.firstChild?.blur()
-
-      // re-set selected tenants to force a re-render? nope doesnt work
-      // https://github.com/tbleckert/react-select-search/issues/221
-      const temp = selectedTenants
-      setSelectedTenants([])
-      setSelectedTenants(temp)
     }
   }
 
@@ -320,22 +311,31 @@ const GeneralSettings = () => {
             </CCardHeader>
             <CCardBody>
               <div className="mb-3">
-                Click the button below to start a tenant access check. You can select multiple
-                tenants up to a maximum of {maxSelected} tenants at one time.
+                Click the button below to start a tenant access check. You can select multiple a
+                maximum of {maxSelected + 1} tenants is recommended.
               </div>
 
               <TenantSelectorMultiple
                 ref={tenantSelectorRef}
                 values={selectedTenants}
-                onChange={handleSetSelectedTenants}
+                onChange={(value) =>
+                  handleSetSelectedTenants(
+                    value.map((val) => {
+                      return val.value
+                    }),
+                  )
+                }
               />
               {showMaxSelected && (
                 <CCallout color="warning">
-                  A maximum of {maxSelected} tenants can be selected at once.
+                  A maximum of {maxSelected + 1} tenants is recommended.
                 </CCallout>
               )}
               <br />
-              <CButton onClick={() => handleCheckAccess()} disabled={accessCheckResult.isFetching}>
+              <CButton
+                onClick={() => handleCheckAccess()}
+                disabled={accessCheckResult.isFetching || selectedTenants.length < 1}
+              >
                 {accessCheckResult.isFetching && (
                   <FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
                 )}
@@ -523,7 +523,7 @@ const SecuritySettings = () => {
                 <CCardTitle>Static Web App (Role Management)</CCardTitle>
               </CCardHeader>
               <CCardBody className="equalheight">
-                The Statis Web App role management allows you to invite other users to the
+                The Static Web App role management allows you to invite other users to the
                 application.
                 <br /> <br />
                 <a