Merge branch 'main' into 652/fix-report-large-cells

okfn · Dec 26, 2024 · 7754bfa · 7754bfa
2 parents dad8a66 + a2565f5
commit 7754bfa
Show file tree

Hide file tree

Showing 20 changed files with 144 additions and 102 deletions.
diff --git a/client/assets/delete_icon.svg b/client/assets/delete_icon.svg
diff --git a/client/components/Application/Browser.tsx b/client/components/Application/Browser.tsx
@@ -1,22 +1,22 @@
+import * as store from '@client/store'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 import { ErrorBoundary } from 'react-error-boundary'
+import { Trans, useTranslation } from 'react-i18next'
+import createFolderIcon from '../../assets/create_folder_icon.svg'
 import SpinnerCard from '../Parts/Cards/Spinner'
 import FileTree from '../Parts/Trees/File'
-import Button from '@mui/material/Button'
-import * as store from '@client/store'
-import createFolderIcon from '../../assets/create_folder_icon.svg'
-import { useTranslation, Trans } from 'react-i18next'
 
 export default function Browser() {
   const files = store.useStore((state) => state.files)
   const loading = store.useStore((state) => state.loading)
 
-  return loading ? (
-    <LoadingBrowser />
-  ) : files.length ? (
-    <DefaultBrowser />
-  ) : (
-    <EmptyBrowser />
+  const Browser = loading ? LoadingBrowser : files.length ? DefaultBrowser : EmptyBrowser
+
+  return (
+    <Box sx={{ height: '100%' }}>
+      <Browser />
+    </Box>
   )
 }
 

diff --git a/client/components/Application/Dialogs/UploadFile/UploadFile.tsx b/client/components/Application/Dialogs/UploadFile/UploadFile.tsx
@@ -2,9 +2,9 @@ import uploadFilesDialogImg from '@client/assets/dialog_upload_files.png'
 import iconUploadFolderImg from '@client/assets/folder-open-big-plus.png'
 import iconLinkTextField from '@client/assets/icon_link_textfield.svg'
 import iconUploadFileImg from '@client/assets/icon_upload_file.png'
-import SimpleTabs from '@client/components/Parts/Tabs/SimpleTabs'
 import SimpleButton from '@client/components/Parts/Buttons/SimpleButton'
 import Columns from '@client/components/Parts/Grids/Columns'
+import SimpleTabs from '@client/components/Parts/Tabs/SimpleTabs'
 import { LinearProgress } from '@client/components/Progress'
 import * as appStore from '@client/store'
 import CloseIcon from '@mui/icons-material/Close'
@@ -108,7 +108,7 @@ function LocalFileForm(props: { isFolder?: boolean }) {
           webkitdirectory={props.isFolder ? '' : undefined}
           onChange={(ev) => {
             if (ev.target.files) {
-              store.ingestFiles({ source: ev.target.files }, t)
+              store.ingestFiles({ source: ev.target.files })
             }
           }}
         />
@@ -153,7 +153,7 @@ function RemoteFileForm() {
         hoverBgColor="OKFNBlue"
         color="OKFNBlack"
         disabled={!url}
-        onClick={() => store.ingestFiles({ source: url }, t)}
+        onClick={() => store.ingestFiles({ source: url })}
       />
     </Box>
   )

diff --git a/client/components/Application/Dialogs/UploadFile/store.tsx b/client/components/Application/Dialogs/UploadFile/store.tsx
@@ -24,14 +24,14 @@ export function closeDialog() {
   }
 }
 
-export async function ingestFiles(props: { source: FileList | string }, t: any) {
+export async function ingestFiles(props: { source: FileList | string }) {
   const files =
     props.source instanceof FileList
       ? await uploadLocalFiles({ source: props.source })
-      : await uploadRemoteFile({ source: props.source }, t)
+      : await uploadRemoteFile({ source: props.source })
 
   if (files) {
-    await validateAndSelectFiles({ files }, t)
+    await validateAndSelectFiles({ files })
   }
 }
 
@@ -57,7 +57,7 @@ async function uploadLocalFiles(props: { source: FileList }) {
   return files
 }
 
-async function uploadRemoteFile(props: { source: string }, t: any) {
+async function uploadRemoteFile(props: { source: string }) {
   state.progress = { type: 'loading', title: t('loading'), blocking: true }
 
   if (!props.source) {
@@ -74,9 +74,10 @@ async function uploadRemoteFile(props: { source: string }, t: any) {
   const result = await client.fileFetch({ folder, url: props.source, deduplicate: true })
 
   if (result instanceof client.Error) {
+    console.log(result)
     const message = props.source.includes('docs.google.com/spreadsheets')
       ? t('error-google-sheets-address-invalid')
-      : t('error-url-not-table')
+      : t(result.detail as any)
     state.progress = { type: 'error', message }
     return
   }
@@ -85,7 +86,7 @@ async function uploadRemoteFile(props: { source: string }, t: any) {
   return [result]
 }
 
-async function validateAndSelectFiles(props: { files: IFile[] }, t: any) {
+async function validateAndSelectFiles(props: { files: IFile[] }) {
   state.progress = { type: 'validating', title: t('checking-errors'), blocking: true }
 
   const totalSize = props.files.reduce((acc, file) => acc + file.size, 0)

diff --git a/client/components/Application/Sidebar.tsx b/client/components/Application/Sidebar.tsx
@@ -25,9 +25,13 @@ export default function Sidebar() {
         borderRight: 'solid 1px #ddd',
       }}
     >
-      <SidebarLogo />
-      <SidebarControls />
-      <Browser />
+      <Stack sx={{ flexGrow: 1 }}>
+        <SidebarLogo />
+        <SidebarControls />
+        <Box sx={{ flexGrow: 1 }}>
+          <Browser />
+        </Box>
+      </Stack>
       <SidebarMenu />
     </Stack>
   )

diff --git a/client/components/Editors/Base/ListItem.tsx b/client/components/Editors/Base/ListItem.tsx
@@ -4,7 +4,7 @@ import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { useTheme } from '@mui/material/styles'
 import { useTranslation } from 'react-i18next'
-import deleteIcon from '../../../assets/delete_icon.svg'
+import DeleteIcon from '../../Parts/Icons/DeleteIcon'
 
 interface EditorListItemProps {
   kind: string
@@ -31,16 +31,19 @@ export default function EditorListItem(props: EditorListItemProps) {
         component="span"
         title={`${t('remove')} ${capitalize(props.kind)}`}
         sx={{
-          '& img': {
+          '& svg': {
             width: '22px',
+            '&:hover': {
+              fill: (theme) => theme.palette.OKFNRed500.main,
+            },
           },
         }}
         onClick={(ev) => {
           ev.stopPropagation()
           props.onRemoveClick?.()
         }}
       >
-        <img src={deleteIcon} alt="" />
+        <DeleteIcon color="OKFNGray700" />
       </Button>
     )
   }
@@ -70,6 +73,15 @@ export default function EditorListItem(props: EditorListItemProps) {
         padding: '12px 16px',
         whiteSpace: 'nowrap',
         borderColor: '#E6E7EB',
+        animation: 'highlight 3s ease-in-out',
+        '@keyframes highlight': {
+          '0%': {
+            borderColor: (theme) => theme.palette.OKFNBlue.main,
+          },
+          '100%': {
+            borderColor: '#E6E7EB',
+          },
+        },
         '&:hover': {
           borderColor: (theme) => theme.palette.OKFNBlue.main,
         },

diff --git a/client/components/Editors/Resource/Sections/Licenses.tsx b/client/components/Editors/Resource/Sections/Licenses.tsx
@@ -37,7 +37,11 @@ function LicenseList() {
 
   return (
     <>
-      <EditorList kind="license" query={query}>
+      <EditorList
+        kind="license"
+        query={query}
+        onAddClick={licenseItems.length > 0 ? () => setDialogOpen(true) : null}
+      >
         <EditorHelp helpItem={helpItem} withIcon />
         {licenseItems.length > 0 ? (
           licenseItems.map(({ index, license }) => (
@@ -53,7 +57,9 @@ function LicenseList() {
         ) : (
           <NothingToSee
             buttonText={t('add-license')}
-            onAddClick={() => setDialogOpen(true)}
+            onAddClick={() => {
+              setDialogOpen(true)
+            }}
           />
         )}
       </EditorList>

diff --git a/client/components/Parts/Buttons/SimpleButton.tsx b/client/components/Parts/Buttons/SimpleButton.tsx
@@ -15,7 +15,7 @@ interface SimpleButtonProps extends ButtonProps {
 }
 
 export default function SimpleButton(props: SimpleButtonProps) {
-  const { label, small, hoverBgColor, ...others } = props
+  const { label, small, hoverBgColor, sx, ...others } = props
 
   const buttonTextColor = props.color === 'OKFNWhite' ? 'gray' : 'white'
   return (
@@ -24,13 +24,14 @@ export default function SimpleButton(props: SimpleButtonProps) {
       color={props.color}
       {...others}
       sx={{
+        ...sx,
         padding: '14px 24px',
         borderRadius: '9px',
-        border: props.label === 'Cancel' ? '1px solid #D3D7D8' : 0,
         boxShadow: 'none',
         '&:hover': {
           backgroundColor: (theme) =>
             hoverBgColor ? theme.palette[hoverBgColor].main : 'unset',
+            borderColor: 'white'
         },
       }}
     >

diff --git a/client/components/Parts/Cards/NothingToSee.tsx b/client/components/Parts/Cards/NothingToSee.tsx
@@ -14,8 +14,8 @@ export default function NothingToSee(props: any){
             textTransform: 'capitalize',
             marginTop: '10px',
             '&:hover': {
-            backgroundColor: (theme) => theme.palette.OKFNBlue.main,
-            color: 'white'
+                backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+                color: 'white'
             }
         } }}>
             {props.buttonText}

diff --git a/client/components/Parts/Dialogs/TwoButton.tsx b/client/components/Parts/Dialogs/TwoButton.tsx
@@ -95,7 +95,7 @@ export default function TwoButtonDialog(props: TwoButtonDialogProps) {
               <SimpleButton
                 small
                 label={t('cancel')}
-                sx={{ my: 0.5 }}
+                sx={{ my: 0.5, border: (theme) => `1px solid ${theme.palette.OKFNCoolGray400.main}`}}
                 onClick={handleCancel}
                 aria-label={t('cancel')}
                 variant="contained"

diff --git a/client/components/Parts/Fields/Input.tsx b/client/components/Parts/Fields/Input.tsx
@@ -32,43 +32,44 @@ export default function InputField(props: InputFieldProps) {
   const onFocus = props.onFocus || noop
   const onBlur = props.onBlur || noop
   return (
-    <div>
-      <InputLabel
-        shrink={false}>
-          {props.label}
-    </InputLabel>
-    <StyledTextField
-      name={props.name || props.label}
-      type={props.type}
-      margin="normal"
-      value={props.value}
-      size={props.size || 'small'}
-      style={{  maxWidth: '350px', marginTop: '5px' }}
-      disabled={props.disabled}
-      inputProps={props.inputProps}
-      onChange={(ev) => onChange(ev.target.value)}
-      error={props.error}
-      required={props.required}
-      helperText={props.helperText}
-      onKeyDown={onKeyDown}
-      placeholder={props.placeholder}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      autoFocus={props.autoFocus}
-    />
+    <div style={{ flexGrow: 1, width: '100%' }}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
+      <StyledTextField
+        name={props.name || props.label}
+        type={props.type}
+        margin="normal"
+        value={props.value}
+        size={props.size || 'small'}
+        style={{  maxWidth: '350px', marginTop: '5px' }}
+        disabled={props.disabled}
+        inputProps={props.inputProps}
+        onChange={(ev) => onChange(ev.target.value)}
+        error={props.error}
+        required={props.required}
+        helperText={props.helperText}
+        onKeyDown={onKeyDown}
+        placeholder={props.placeholder}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        autoFocus={props.autoFocus}
+      />
     </div>
   )
 }
 
 
-export const StyledTextField = styled(TextField)(() => ({
-  width: '100%', 
+export const StyledTextField = styled(TextField, {
+})(() => ({
+  width: '100%',
   '& label.Mui-focused': {
     color: '#00D1FF',
   },
   '& .MuiInput-underline:after': {
     borderBottomColor: '#00D1FF',
   },
+  '& .MuiTextField-root': {
+    width: '100%'
+  },
   '& .MuiOutlinedInput-root': {
     '& fieldset': {
       borderColor: 'gray',

diff --git a/client/components/Parts/Fields/Multiline.tsx b/client/components/Parts/Fields/Multiline.tsx
@@ -21,27 +21,23 @@ interface MultilineFieldProps {
 export default function MultilineField(props: MultilineFieldProps) {
   const onFocus = props.onFocus || noop
   return (
-    <div>
-    <InputLabel
-          shrink={false}>
-            {props.label}
-      </InputLabel>
-    <StyledTextField
-      multiline
-      fullWidth
-      placeholder={props.placeholder}
-      name={props.name || props.label}
-      rows={props.rows}
-      type={props.type}
-      margin="normal"
-      style={{ maxWidth: '350px', marginTop: '5px' }}
-      value={props.value}
-      size={props.size || 'small'}
-      onChange={(ev) => props.onChange(ev.target.value as any)}
-      onFocus={onFocus}
-      autoFocus={props.autoFocus}
-      required={props.required}
-    />
+    <div style={{ flexGrow: 1, width: '100%'}}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
+      <StyledTextField
+        multiline
+        placeholder={props.placeholder}
+        name={props.name || props.label}
+        rows={props.rows}
+        type={props.type}
+        margin="normal"
+        style={{ maxWidth: '350px', marginTop: '5px' }}
+        value={props.value}
+        size={props.size || 'small'}
+        onChange={(ev) => props.onChange(ev.target.value as any)}
+        onFocus={onFocus}
+        autoFocus={props.autoFocus}
+        required={props.required}
+      />
     </div>
   )
 }
diff --git a/client/components/Parts/Fields/YesNo.tsx b/client/components/Parts/Fields/YesNo.tsx
@@ -14,14 +14,11 @@ interface YesNoFieldProps {
 export default function YesNoField(props: YesNoFieldProps) {
   const onFocus = props.onFocus || noop
   return (
-    <div>
-    <InputLabel
-          shrink={false}>
-            {props.label}
-      </InputLabel>
+    <div style={{ flexGrow: 1, width: '100%'}}>
+      <InputLabel shrink={false}>{props.label}</InputLabel>
       <StyledTextField
         select
-        style= {{ maxWidth: '350px', marginTop: '5px' }}
+        style= {{ flexGrow: 1, maxWidth: '350px', marginTop: '5px' }}
         margin="normal"
         size={props.size || 'small'}
         value={props.value ? 'yes' : 'no'}

diff --git a/client/components/Parts/Icons/DeleteIcon.tsx b/client/components/Parts/Icons/DeleteIcon.tsx
@@ -0,0 +1,10 @@
+import { createSvgIcon } from '@mui/material/utils'
+
+const DeleteIcon : any = createSvgIcon(
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4.47869 5.99921C4.47869 5.73411 4.26379 5.51921 3.99869 5.51921C3.7336 5.51921 3.51869 5.73411 3.51869 5.99921H4.47869ZM12.482 5.99921C12.482 5.73411 12.2671 5.51921 12.002 5.51921C11.7369 5.51921 11.522 5.73411 11.522 5.99921H12.482ZM9.81434 6.66615C9.81434 6.40105 9.59943 6.18615 9.33434 6.18615C9.06924 6.18615 8.85434 6.40105 8.85434 6.66615H9.81434ZM8.85434 11.3348C8.85434 11.5999 9.06924 11.8148 9.33434 11.8148C9.59943 11.8148 9.81434 11.5999 9.81434 11.3348H8.85434ZM7.14642 6.66615C7.14642 6.40105 6.93152 6.18615 6.66642 6.18615C6.40133 6.18615 6.18642 6.40105 6.18642 6.66615H7.14642ZM6.18642 11.3348C6.18642 11.5999 6.40133 11.8148 6.66642 11.8148C6.93152 11.8148 7.14642 11.5999 7.14642 11.3348H6.18642ZM2.99826 3.51839C2.73316 3.51839 2.51826 3.73329 2.51826 3.99839C2.51826 4.26349 2.73316 4.47839 2.99826 4.47839V3.51839ZM13.0024 4.47839C13.2675 4.47839 13.4824 4.26349 13.4824 3.99839C13.4824 3.73329 13.2675 3.51839 13.0024 3.51839V4.47839ZM4.87715 3.84658C4.79332 4.09808 4.92923 4.36991 5.18073 4.45374C5.43222 4.53757 5.70405 4.40165 5.78788 4.15016L4.87715 3.84658ZM5.69533 2.90992L6.1507 3.06171L6.15074 3.0616L5.69533 2.90992ZM6.96119 1.99754L6.96108 2.47754H6.96119V1.99754ZM9.03939 1.99754V2.47754L9.03999 2.47754L9.03939 1.99754ZM10.3066 2.90992L10.7621 2.75863L10.762 2.75824L10.3066 2.90992ZM10.2125 4.14966C10.2961 4.40124 10.5678 4.53746 10.8194 4.45391C11.0709 4.37035 11.2072 4.09867 11.1236 3.84708L10.2125 4.14966ZM3.51869 5.99921V12.6686H4.47869V5.99921H3.51869ZM3.51869 12.6686C3.51869 13.6704 4.3308 14.4825 5.33258 14.4825V13.5225C4.86099 13.5225 4.47869 13.1402 4.47869 12.6686H3.51869ZM5.33258 14.4825H10.6681V13.5225H5.33258V14.4825ZM10.6681 14.4825C11.6699 14.4825 12.482 13.6704 12.482 12.6686H11.522C11.522 13.1402 11.1397 13.5225 10.6681 13.5225V14.4825ZM12.482 12.6686V5.99921H11.522V12.6686H12.482ZM8.85434 6.66615V11.3348H9.81434V6.66615H8.85434ZM6.18642 6.66615V11.3348H7.14642V6.66615H6.18642ZM2.99826 4.47839H13.0024V3.51839H2.99826V4.47839ZM5.78788 4.15016L6.1507 3.06171L5.23997 2.75813L4.87715 3.84658L5.78788 4.15016ZM6.15074 3.0616C6.26693 2.71275 6.59339 2.47745 6.96108 2.47754L6.96131 1.51754C6.18024 1.51735 5.48675 2.01719 5.23993 2.75824L6.15074 3.0616ZM6.96119 2.47754H9.03939V1.51754H6.96119V2.47754ZM9.03999 2.47754C9.40799 2.47708 9.73489 2.71245 9.85118 3.0616L10.762 2.75824C10.515 2.01655 9.82054 1.51657 9.0388 1.51754L9.03999 2.47754ZM9.85105 3.06121L10.2125 4.14966L11.1236 3.84708L10.7621 2.75863L9.85105 3.06121Z"/>
+    </svg>,
+    'Delete',
+  )
+
+export default DeleteIcon