CORE-4906: test add minor files

components/application/repository-select.jsx

@@ -1,19 +1,26 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback, useState, useEffect, useRef } from 'react'
 import { AppBar, Select } from '@oacore/design'
 import { useRouter } from 'next/router'
 
 import styles from './repository-select.module.css'
+import { TextField } from '../../design'
 
+import close from 'components/upload/assets/closeLight.svg'
 import { withGlobalStore } from 'store'
 
 const RepositorySelect = ({ store }) => {
   const router = useRouter()
   const [suggestions, setSuggestions] = useState(store.user.dataProviders)
   const [value, setValue] = useState(store.dataProvider.name)
+  const [showSecondDropdown, setShowSecondDropdown] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedItem, setSelectedItem] = useState(null)
+  const [inputValue, setInputValue] = useState('')
+  const providerId = router.query['data-provider-id']
+  const setsRef = useRef(null)
 
   const handleOnChange = useCallback(
     (data) => {
-      if (data.value === store.dataProvider.name) return
       if (!data.id) {
         setValue(store.dataProvider.name)
         return
@@ -22,6 +29,8 @@ const RepositorySelect = ({ store }) => {
       const actualPath = `/data-providers/${data.id}`
 
       router.push(routePath, actualPath)
+      setShowSecondDropdown(true)
+      store.updateSelectedSetSpec(null)
     },
     [router, store.dataProvider.name]
   )
@@ -36,19 +45,73 @@ const RepositorySelect = ({ store }) => {
     setValue(data.value)
   }, [])
 
+  const handleDropdownClick = async () => {
+    setIsOpen(!isOpen)
+  }
+
+  const handleSelect = (item) => {
+    setSelectedItem(item)
+    setIsOpen(false)
+    setInputValue(item.setName)
+    store.updateSelectedSetSpec(item)
+    store.dataProvider?.getDeduplicationData(providerId)
+    store.dataProvider?.getRrslistData(providerId)
+    store.dataProvider?.doi?.doiRecords.load()
+    store.dataProvider.works.resetWorks()
+    store.dataProvider.depositDates.resetCompliance()
+    store.dataProvider.doi.resetDoiRecords()
+    store.dataProvider?.depositDates?.publicReleaseDatesPages?.load()
+    store.dataProvider.retrieve()
+  }
+
+  useEffect(() => {
+    store.getSetsEnabledList()
+  }, [providerId])
+
   useEffect(() => {
     setValue(store.dataProvider.name)
   }, [store.dataProvider.name])
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (setsRef.current && !setsRef.current.contains(event.target))
+        setIsOpen(false)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [setsRef])
+
+  const handleSelectClick = () => {
+    if (value === store.dataProvider.name) setShowSecondDropdown(true)
+  }
+
+  const handleClear = () => {
+    // eslint-disable-next-line no-console
+    console.log('reset')
+  }
+
+  const handleSetInputChange = (event) => {
+    setInputValue(event.target.value)
+  }
+
+  const filteredData = store.enabledList.filter((item) =>
+    item.setName.toLowerCase().includes(inputValue.toLowerCase())
+  )
+
   return (
     <AppBar.Item className={styles.container}>
       <Select
         id="repository"
         className={styles.repositorySelect}
         label="Repository"
-        value={value}
+        value={value.length > 100 ? `${value.substring(0, 110)}...` : value}
         onInput={handleOnInput}
         onChange={handleOnChange}
+        onClick={handleSelectClick}
         placeholder="Search repositories"
         clearButton={false}
         clearOnFocus
@@ -61,6 +124,50 @@ const RepositorySelect = ({ store }) => {
           </Select.Option>
         ))}
       </Select>
+      {store.enabledList.length > 0 && showSecondDropdown && (
+        <div className={styles.dropdownMenuWrapper} ref={setsRef}>
+          <div className={styles.selectFormWrapper}>
+            <div className={styles.selectWrapper}>
+              {selectedItem ? (
+                <div className={styles.selectedItem}>
+                  {selectedItem?.setName.length > 25
+                    ? `${selectedItem?.setName.substring(0, 25)}...`
+                    : inputValue}
+                  {/* eslint-disable-next-line max-len */}
+                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */}
+                  <img onClick={handleClear} src={close} alt="close" />
+                </div>
+              ) : (
+                <TextField
+                  id="secondInput"
+                  label="Sets"
+                  onClick={handleDropdownClick}
+                  onChange={handleSetInputChange}
+                  value={inputValue}
+                  className={styles.selectInput}
+                />
+              )}
+            </div>
+          </div>
+          {isOpen && (
+            <div className={styles.dropdownMenu}>
+              <ul>
+                {filteredData.map((item) => (
+                  // eslint-disable-next-line max-len
+                  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+                  <li
+                    key={item.id}
+                    onClick={() => handleSelect(item)}
+                    className={styles.selectItem}
+                  >
+                    {item.setName}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
     </AppBar.Item>
   )
 }

components/application/repository-select.module.css

@@ -8,6 +8,7 @@
   display: flex;
   flex: 2 2 60%;
   align-items: center;
+  gap: 20px;
 }
 
 .repository-select {
@@ -40,3 +41,64 @@
 .repository-select ul {
   font-weight: initial;
 }
+
+.select-form-wrapper {
+  display: flex;
+  width: 100%;
+  gap: 24px;
+}
+
+.select-wrapper {
+  width: 100%;
+}
+
+.select-input input {
+  background: #fff;
+  border: 1px solid #b75400;
+  border-radius: 2px;
+}
+
+/* stylelint-disable declaration-no-important */
+.select-input label {
+  color: #9e9e9e !important;
+}
+
+.dropdown-menu-wrapper {
+  position: relative;
+  flex: 1;
+}
+
+.dropdown-menu {
+  position: absolute;
+  padding: 10px;
+  background: #fff;
+  border-radius: 2px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.select-item {
+  padding: 10px;
+  margin: 4px 0;
+  color: #b75400;
+  cursor: pointer;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: max-content;
+  max-width: 290px;
+  padding: 2px 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+  color: #fff;
+  letter-spacing: 0.01px;
+  background: #5a9216;
+  border-radius: 4px;
+  gap: 24px;
+}

components/textWithTooltip/styles.module.css

@@ -0,0 +1,12 @@
+.container {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.pure {
+  color: var(--gray-600);
+}
+
+.popover {
+  max-width: 20rem;
+}

components/textWithTooltip/textWithtooltip.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Popover } from '@oacore/design'
+import classNames from '@oacore/design/lib/utils/class-names'
+
+import styles from './styles.module.css'
+
+const TextWithTooltip = ({ tag: Tag = 'div', className, text }) => (
+  <Tag className={classNames.use(styles.container).join(className)}>
+    <Popover className={styles.popover} placement="top" content={text}>
+      <div title={text.length > 25 ? text : ''}>
+        {text.length > 25 ? `${text.substring(0, 25)}..` : text}
+      </div>
+    </Popover>
+  </Tag>
+)
+
+export default TextWithTooltip

pages/data-providers/[data-provider-id]/content.jsx

@@ -6,7 +6,7 @@ import ContentTemplate from 'templates/content'
 const Content = ({ store: { dataProvider }, ...props }) => (
   <ContentTemplate
     exportUrl={dataProvider?.works?.contentExportUrl}
-    works={dataProvider?.works}
+    works={dataProvider?.works?.workRecords}
     changeVisibility={dataProvider?.works?.changeVisibility}
     {...props}
   />

pages/data-providers/[data-provider-id]/doi.jsx

@@ -9,8 +9,8 @@ const DoiPage = ({ store: { dataProvider, organisation }, ...props }) => (
     doiUrl={dataProvider?.doi?.doiUrl}
     isExportDisabled={
       dataProvider?.doi?.enrichmentSize === 0 ||
-      dataProvider?.doi?.doiRecords.error != null ||
-      dataProvider?.doi?.doiRecords.data.length === 0
+      dataProvider?.doi?.doiRecords?.error != null ||
+      dataProvider?.doi?.doiRecords?.data.length === 0
     }
     doiCount={dataProvider?.doi?.originCount}
     dataProviderName={dataProvider.name}

pages/data-providers/[data-provider-id]/repository.jsx

@@ -11,6 +11,20 @@ const RepositoryPage = ({ store, ...restProps }) => (
     dataProviderLogo={store.dataProvider.logo}
     updateDataProvider={store.updateDataProvider}
     updateLogo={store.updateLogo}
+    setsList={store.setsList}
+    loadingSets={store.loadingSets}
+    enableSet={store.enableSet}
+    getSetsEnabledList={store.getSetsEnabledList}
+    enabledList={store.enabledList}
+    disabledList={store.disabledList}
+    deleteSet={store.deleteSet}
+    getSetsWholeList={store.getSetsWholeList}
+    wholeSetData={store.wholeSetData}
+    loadingWholeSets={store.loadingWholeSets}
+    loadingWholeSetsBtn={store.loadingWholeSetsBtn}
+    setLoadingWholeSetsBtn={store.setLoadingWholeSetsBtn}
+    loadingRemoveItem={store.loadingRemoveItem}
+    setLoadingRemoveAction={store.setLoadingRemoveAction}
     oaiMapping={store.dataProvider.oaiMapping}
     setGlobalRorName={store.dataProvider.setGlobalRorName}
     setGlobalRorId={store.dataProvider.setGlobalRorId}