mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-10-04 01:49:13 +03:00
fix(frontend): notion integration in front end (#3175)
# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
69e2f1be34
commit
4c7dedce80
@ -13,7 +13,7 @@ module.exports = {
|
||||
"import/no-unresolved": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"import/no-duplicates": "error",
|
||||
complexity: ["error", 10],
|
||||
complexity: ["error", 12],
|
||||
"max-lines": ["error", 300],
|
||||
"max-depth": ["error", 3],
|
||||
"max-params": ["error", 5],
|
||||
|
@ -5,13 +5,15 @@ interface FolderLineProps {
|
||||
selectable: boolean;
|
||||
id: string;
|
||||
icon?: string;
|
||||
isAlsoFile?: boolean;
|
||||
}
|
||||
|
||||
export const FolderLine = ({
|
||||
name,
|
||||
selectable,
|
||||
id,
|
||||
icon
|
||||
icon,
|
||||
isAlsoFile,
|
||||
}: FolderLineProps): JSX.Element => {
|
||||
return (
|
||||
<SyncElementLine
|
||||
@ -19,7 +21,8 @@ export const FolderLine = ({
|
||||
selectable={selectable}
|
||||
id={id}
|
||||
isFolder={true}
|
||||
icon= {icon}
|
||||
isAlsoFile={isAlsoFile}
|
||||
icon={icon}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -20,6 +20,7 @@ export const FromConnections = (): JSX.Element => {
|
||||
currentSyncId,
|
||||
loadingFirstList,
|
||||
setCurrentSyncId,
|
||||
currentProvider,
|
||||
} = useFromConnectionsContext();
|
||||
const [currentFiles, setCurrentFiles] = useState<SyncElement[]>([]);
|
||||
const [currentFolders, setCurrentFolders] = useState<SyncElement[]>([]);
|
||||
@ -114,9 +115,10 @@ export const FromConnections = (): JSX.Element => {
|
||||
>
|
||||
<FolderLine
|
||||
name={folder.name ?? ""}
|
||||
selectable={!!isPremium}
|
||||
selectable={!!isPremium || currentProvider === "Notion"}
|
||||
id={folder.id}
|
||||
icon= {folder.icon}
|
||||
icon={folder.icon}
|
||||
isAlsoFile={currentProvider === "Notion"}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@ -126,15 +128,18 @@ export const FromConnections = (): JSX.Element => {
|
||||
name={file.name ?? ""}
|
||||
selectable={true}
|
||||
id={file.id}
|
||||
icon= {file.icon}
|
||||
icon={file.icon}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{!currentFiles.length && !currentFolders.length && (
|
||||
<span className={styles.empty_folder}>Empty folder</span>
|
||||
)}
|
||||
{!currentFiles.length &&
|
||||
!currentFolders.length &&
|
||||
!loading &&
|
||||
!loadingFirstList && (
|
||||
<span className={styles.empty_folder}>Empty folder</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { createContext, useState } from "react";
|
||||
|
||||
import { OpenedConnection, SyncElements } from "@/lib/api/sync/types";
|
||||
import { OpenedConnection, Provider, SyncElements } from "@/lib/api/sync/types";
|
||||
|
||||
export type FromConnectionsContextType = {
|
||||
currentSyncElements: SyncElements | undefined;
|
||||
@ -17,6 +17,8 @@ export type FromConnectionsContextType = {
|
||||
setHasToReload: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
loadingFirstList: boolean;
|
||||
setLoadingFirstList: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
currentProvider: Provider | null;
|
||||
setCurrentProvider: React.Dispatch<React.SetStateAction<Provider | null>>;
|
||||
};
|
||||
|
||||
export const FromConnectionsContext = createContext<
|
||||
@ -37,6 +39,7 @@ export const FromConnectionsProvider = ({
|
||||
const [openedConnections, setOpenedConnections] = useState<
|
||||
OpenedConnection[]
|
||||
>([]);
|
||||
const [currentProvider, setCurrentProvider] = useState<Provider | null>(null);
|
||||
const [hasToReload, setHasToReload] = useState<boolean>(false);
|
||||
const [loadingFirstList, setLoadingFirstList] = useState<boolean>(false);
|
||||
|
||||
@ -55,6 +58,9 @@ export const FromConnectionsProvider = ({
|
||||
|
||||
loadingFirstList,
|
||||
setLoadingFirstList,
|
||||
|
||||
currentProvider,
|
||||
setCurrentProvider,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
@ -14,6 +14,7 @@ interface SyncElementLineProps {
|
||||
id: string;
|
||||
isFolder: boolean;
|
||||
icon?: string;
|
||||
isAlsoFile?: boolean;
|
||||
}
|
||||
|
||||
export const SyncElementLine = ({
|
||||
@ -21,7 +22,8 @@ export const SyncElementLine = ({
|
||||
selectable,
|
||||
id,
|
||||
isFolder,
|
||||
icon
|
||||
icon,
|
||||
isAlsoFile,
|
||||
}: SyncElementLineProps): JSX.Element => {
|
||||
const [isCheckboxHovered, setIsCheckboxHovered] = useState(false);
|
||||
const { currentSyncId, openedConnections, setOpenedConnections } =
|
||||
@ -39,6 +41,8 @@ export const SyncElementLine = ({
|
||||
|
||||
const [checked, setChecked] = useState<boolean>(initialChecked);
|
||||
|
||||
const showCheckbox: boolean = isAlsoFile ?? !isFolder;
|
||||
|
||||
const handleSetChecked = () => {
|
||||
setOpenedConnections((prevState) => {
|
||||
return prevState.map((connection) => {
|
||||
@ -78,8 +82,12 @@ export const SyncElementLine = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className={`${styles.left} ${isFolder ? styles.folder : ""}`}>
|
||||
{!isFolder && (
|
||||
<div
|
||||
className={`${styles.left} ${
|
||||
!isAlsoFile && isFolder ? styles.folder : ""
|
||||
}`}
|
||||
>
|
||||
{showCheckbox && (
|
||||
<div
|
||||
onMouseEnter={() => setIsCheckboxHovered(true)}
|
||||
onMouseLeave={() => setIsCheckboxHovered(false)}
|
||||
@ -92,13 +100,16 @@ export const SyncElementLine = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
icon ?
|
||||
<div>{icon}</div> :
|
||||
|
||||
<Icon name={isFolder? "folder" : "file"} color="black" size="normal" />
|
||||
}
|
||||
<span className={styles.element_name}>{name}</span>
|
||||
{icon ? (
|
||||
<div>{icon}</div>
|
||||
) : (
|
||||
<Icon
|
||||
name={isFolder ? "folder" : "file"}
|
||||
color="black"
|
||||
size="normal"
|
||||
/>
|
||||
)}
|
||||
<span className={styles.element_name}>{name}</span>
|
||||
</div>
|
||||
{isFolder && (
|
||||
<Icon
|
||||
|
@ -9,6 +9,7 @@ import "prismjs/components/prism-css";
|
||||
import "prismjs/components/prism-dart";
|
||||
import "prismjs/components/prism-go";
|
||||
import "prismjs/components/prism-java";
|
||||
import "prismjs/components/prism-jsx";
|
||||
import "prismjs/components/prism-kotlin";
|
||||
import "prismjs/components/prism-markup";
|
||||
import "prismjs/components/prism-python";
|
||||
@ -17,6 +18,7 @@ import "prismjs/components/prism-rust";
|
||||
import "prismjs/components/prism-scss";
|
||||
import "prismjs/components/prism-sql";
|
||||
import "prismjs/components/prism-swift";
|
||||
import "prismjs/components/prism-tsx";
|
||||
import "prismjs/components/prism-typescript";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BlockMath, InlineMath } from "react-katex";
|
||||
|
@ -31,16 +31,17 @@ div:focus {
|
||||
|
||||
.scrollbar::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: var(--background-3);
|
||||
background-color: var(--background-0);
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: var(--text-4);
|
||||
background-color: var(--background-3);
|
||||
border-radius: 4px;
|
||||
max-height: 30px;
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--text-3);
|
||||
background-color: var(--background-2);
|
||||
}
|
||||
|
||||
.h-fill-available {
|
||||
|
@ -2,12 +2,36 @@
|
||||
@use "styles/Spacings.module.scss";
|
||||
|
||||
.connection_cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: Spacings.$spacing05;
|
||||
width: 100%;
|
||||
column-count: 3;
|
||||
column-gap: Spacings.$spacing05;
|
||||
padding-bottom: Spacings.$spacing05;
|
||||
margin-bottom: -(Spacings.$spacing05);
|
||||
|
||||
> * {
|
||||
margin-bottom: Spacings.$spacing05;
|
||||
}
|
||||
|
||||
&.spaced {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (min-width: ScreenSizes.$large) {
|
||||
column-count: 4;
|
||||
}
|
||||
|
||||
@media screen and (max-width: ScreenSizes.$medium) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: ScreenSizes.$small) {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
&.spaced {
|
||||
column-count: 2;
|
||||
|
||||
@media screen and (max-width: ScreenSizes.$small) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,12 +10,14 @@ interface ConnectionCardsProps {
|
||||
export const ConnectionCards = ({
|
||||
fromAddKnowledge,
|
||||
}: ConnectionCardsProps): JSX.Element => {
|
||||
const { syncGoogleDrive, syncSharepoint, syncDropbox } = useSync();
|
||||
const { syncGoogleDrive, syncSharepoint, syncDropbox, syncNotion } =
|
||||
useSync();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.connection_cards} ${fromAddKnowledge ? styles.spaced : ""
|
||||
}`}
|
||||
className={`${styles.connection_cards} ${
|
||||
fromAddKnowledge ? styles.spaced : ""
|
||||
}`}
|
||||
>
|
||||
<ConnectionSection
|
||||
label="Google Drive"
|
||||
@ -35,12 +37,12 @@ export const ConnectionCards = ({
|
||||
callback={(name) => syncDropbox(name)}
|
||||
fromAddKnowledge={fromAddKnowledge}
|
||||
/>
|
||||
{/* <ConnectionSection
|
||||
<ConnectionSection
|
||||
label="Notion"
|
||||
provider="Notion"
|
||||
callback={(name) => syncNotion(name)}
|
||||
fromAddKnowledge={fromAddKnowledge}
|
||||
/> */}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -55,11 +55,13 @@ const renderExistingConnections = ({
|
||||
fromAddKnowledge,
|
||||
handleGetSyncFiles,
|
||||
openedConnections,
|
||||
setCurrentProvider,
|
||||
}: {
|
||||
existingConnections: Sync[];
|
||||
folded: boolean;
|
||||
setFolded: (folded: boolean) => void;
|
||||
fromAddKnowledge: boolean;
|
||||
setCurrentProvider: (provider: Provider) => void;
|
||||
handleGetSyncFiles: (
|
||||
userSyncId: number,
|
||||
currentProvider: Provider
|
||||
@ -96,9 +98,10 @@ const renderExistingConnections = ({
|
||||
openedConnection.submitted
|
||||
);
|
||||
})}
|
||||
onClick={() =>
|
||||
void handleGetSyncFiles(connection.id, connection.provider)
|
||||
}
|
||||
onClick={() => {
|
||||
void handleGetSyncFiles(connection.id, connection.provider);
|
||||
setCurrentProvider(connection.provider);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@ -124,6 +127,7 @@ export const ConnectionSection = ({
|
||||
hasToReload,
|
||||
setHasToReload,
|
||||
setLoadingFirstList,
|
||||
setCurrentProvider,
|
||||
} = useFromConnectionsContext();
|
||||
const [existingConnections, setExistingConnections] = useState<Sync[]>([]);
|
||||
const [folded, setFolded] = useState<boolean>(!fromAddKnowledge);
|
||||
@ -251,6 +255,7 @@ export const ConnectionSection = ({
|
||||
fromAddKnowledge: !!fromAddKnowledge,
|
||||
handleGetSyncFiles,
|
||||
openedConnections,
|
||||
setCurrentProvider,
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user