feat:M.2 Optimization project

package.json

@@ -23,7 +23,7 @@
     "@mui/material": "^5.11.1",
     "@primer/octicons-react": "^17.10.0",
     "@react-icons/all-files": "^4.1.0",
-    "@types/react-bootstrap": "^0.32.35",
+    "@types/react-bootstrap": "^0.32.36",
     "bootstrap": "^5.3.1",
     "dayjs": "^1.11.7",
     "http-proxy-middleware": "^1.1.1",

src/lib/components/interface/comp_interface.ts

@@ -2,11 +2,13 @@ import {  ComponentType, Dispatch, JSXElementConstructor, MutableRefObject, Reac
 import { FormControlProps } from "react-bootstrap";
 import { OverlayTriggerRenderProps } from "react-bootstrap/esm/OverlayTrigger";
 import { Placement } from "react-bootstrap/esm/types";
-import { Commit, Reference, Run } from "../../../pages/repositories/interface/repo_interface";
-import { Branch, QueryParams, RepositoryParams } from "../../api/interface";
+import { Commit} from "../../../lib/api/interface/Api";
+import { Branch, Repository } from "../../api/interface/Api";
 import { Link as RouterLink } from 'react-router-dom';
 import { Entry } from "../../../util/otfUtil";
 import { RowAction } from "../repository/treeRows";
+import { urlProps } from "../../hooks/interface";
+import { Reference, Run } from "../../../pages/repositories/interface/repo_interface";
 
 export interface SimpleModalProps {
     children: React.ReactNode;
@@ -84,7 +86,7 @@ export interface CheckboxProps {
 }
 export interface DataTableProps {
     headers: string[];
-    results: Run[] | Commit[] |RepositoryParams[];
+    results: Run[] | Commit[] |Repository[];
     rowFn: (row: any) => React.ReactNode[];
     keyFn?: (row: any) => string;
     actions?: { key: string, buttonFn: (row: any) => React.ReactNode }[];
@@ -120,7 +122,7 @@ export interface TooltipButtonProps {
     size?:'md'| 'sm' | 'lg' | undefined;
 }
 export interface LinkButtonProps {
-    href?: { pathname: string; params?: { repoId: string; commitId?:string}; } | string;
+    href?: { pathname: string; params?:Object;query?:Object; };
     children: React.ReactNode;
     buttonVariant: string;
     tooltip?: string;
@@ -157,7 +159,7 @@ export interface ResponseProps extends Response {
     blockstore_namespace_ValidityRegex: string;
     blockstore_namespace_example: string;
     pagination:Pagination;
-    results: Run[] | Commit[] |RepositoryParams[];
+    results: any;
     size_bytes:number
     diff_type:DiffType
     upgrade_recommended?:boolean;
@@ -168,13 +170,13 @@ export interface PromiseFunction {
 export interface PaginatorProps {
     onPaginate: (page: string | boolean | null) => void;
     nextPage: string | boolean | null | undefined;
-    after?: QueryParams;
+    after?: any;
 }
 export interface InitialPaginationState{
     loading: boolean,
     error: Error | null,
     nextPage?: string | null  | boolean,
-    results?: Run[] | Commit[] |RepositoryParams[]
+    results?: any
 }
 export interface ActionStatusIconProps {
     status: 'completed' | 'failed' | 'running' | 'skipped';
@@ -191,7 +193,7 @@ export interface Config {
 export interface RepositoryCreateFormProps {
     id: string;
     config: Config;
-    onSubmit: ((values: RepositoryParams) => void )| (() => void) |((values: RepositoryParams) => Promise<boolean>);
+    onSubmit: ((values: Repository) => void )| (() => void) |((values: Repository) => Promise<boolean>);
     formValid: boolean;
     setFormValid: (valid: boolean) => void;
     error: Error | null;
@@ -210,7 +212,7 @@ export interface CredentialsTableProps {
     userId: string;
     currentAccessKey: string;
     refresh: boolean;
-    after: QueryParams; 
+    after: any; 
     onPaginate: (page: string | boolean | null) => void; 
 }
 interface Credentials {
@@ -299,12 +301,12 @@ export type WrappedComponentProps = WrapLinkProps & {
 export type WrappedComponent = ComponentType<WrappedComponentProps>;
 
 export interface CompLinkProps extends Omit<React.ComponentProps<typeof RouterLink>, 'to'> {
-    href?: { pathname: string; params?: { repoId: string; commitId?:string; user?:string }; } | string;
+    href?:urlProps | string;
     to?: string;
     children?: ReactNode;
-    components?: any;
+    components?: ReactNode;
     component?: ComponentType<any>;
-    [key: string]: any;
+    active?:boolean
 }
 export interface NavItemProps {
     href: string;
@@ -351,7 +353,7 @@ export interface PolicyDisplayProps {
 }
 
 interface GetMoreResult {
-    results: Run[] | Commit[] |RepositoryParams[];
+    results: Run[] | Commit[] |Repository[];
     pagination: ChangeSummaryPagination
 }
 export interface ChangeSummaryPagination {
@@ -363,12 +365,12 @@ export interface ChangeSummaryProps {
     getMore?: (next_offset: string, prefix: string, arg1: boolean, pageSize: number) => Promise<GetMoreResult>;
 }
 export interface CommitActionsProps {
-    repo: RepositoryParams;
+    repo: Repository;
     commit: Commit;
 }
 export  interface TreeItemRowProps {
     entry: Entry;
-    repo: RepositoryParams;
+    repo: Repository;
     reference: Reference;
     leftDiffRefID: string;
     rightDiffRefID: string;
@@ -393,13 +395,13 @@ export interface TreeEntryPaginatorProps {
 }
 export interface UseTreeItemTypeProps {
     entry: Entry; 
-    repo: RepositoryParams; 
+    repo: Repository; 
     leftDiffRefID: string | Branch; 
     rightDiffRefID: string | Branch; 
     isDeltaEnabled: boolean;
 }
 export interface GetMoreChanges {
-    (repo: RepositoryParams, leftRefId: string, rightRefId: string, delimiter: string): (afterUpdated: QueryParams, path: string, useDelimiter?: boolean, amount?: number) => any;
+    (repo: Repository, leftRefId: string, rightRefId: string, delimiter: string): (afterUpdated: any, path: string, useDelimiter?: boolean, amount?: number) => any;
 }
 
 export interface TableDiffState {
@@ -489,7 +491,7 @@ export enum RefType {
 }
 
 export interface RefSelectorProps {
-    repo: RepositoryParams;
+    repo: Repository;
     selected: ref | string;
     selectRef: (ref: ref) => void;
     withCommits: boolean;
@@ -510,7 +512,7 @@ export interface CommitListProps {
     withWorkspace: boolean;
 }
 export interface RefEntryProps {
-    repo: RepositoryParams;
+    repo: Repository;
     namedRef: string;
     refType: RefType;
     selectRef: (ref: ref) => void;
@@ -526,12 +528,12 @@ export interface Pagination {
 export interface RepoPaginatorProps {
     pagination: Pagination;
     onPaginate: (next: string) => void;
-    results: Run[] | Commit[] |RepositoryParams[];
+    results: Run[] | Commit[] |Repository[];
     from: string;
 }
 export interface RefDropdownProps {
-    repo: RepositoryParams;
-    selected: ref;
+    repo: Repository;
+    selected: { name: string,type: string};
     selectRef: (ref: ref) => void;
     onCancel?: () => void;
     variant?: string;
@@ -542,7 +544,7 @@ export interface RefDropdownProps {
     withTags?: boolean;
 }
 export interface DeltaLakeDiffProps {
-    repo: RepositoryParams;
+    repo: Repository;
     leftRef: string;
     rightRef: string;
     tablePath: string;
@@ -597,7 +599,7 @@ export interface PrefixExpansionSectionProps {
     onClick: () => void;
 }
 export interface OperationMetadataRowProps {
-    otfDiff: RepositoryParams | Run | Commit;
+    otfDiff: Repository | Run | Commit;
     operationExpanded: boolean;
     onExpand: () => void;
     [key: string]: any; 

src/lib/components/nav.tsx

@@ -25,15 +25,15 @@ const wrapComponent = (component:WrappedComponent):React.FC<WrapLinkProps> => {
                 if (onClick && typeof onClick === "function") {
                     onClick(event);
                 }
-
                 if (!event.defaultPrevented) {
                     handleClick(event);
                 }
             },
             target,
             replace,
             navigate,
-        };
+            to
+        }
         return React.createElement(component, props);
     });
     linkWrapper.displayName = "linkWrapper";

src/lib/components/navbar.tsx

@@ -17,8 +17,8 @@ const NavUserInfo = () => {
     const NavBarTitle = () => {
         return (
         <>
-            {<div className="user-menu-notification-indicator"></div>}
-            <FeedPersonIcon size={28} verticalAlign={"middle"}/>
+            {/* {<div className="user-menu-notification-indicator"></div>} */}
+            <FeedPersonIcon size={28} verticalAlign={"middle"}/><strong >{user} </strong>
         </>
         )
     }
@@ -32,11 +32,6 @@ const NavUserInfo = () => {
                 }}>
                 Logout
             </NavDropdown.Item>
-            <NavDropdown.Divider/>
-            {<>
-            <NavDropdown.Item disabled={true}>
-                <small>JiaoziFS</small>
-            </NavDropdown.Item></>}
         </NavDropdown>
     );
 };
@@ -75,7 +70,9 @@ const TopNav = ({logged = true}) => {
                 <Link component={Navbar.Brand} href="/">
                     <img src="/jiaozifs3.png" alt="JiaoziFS" className="logo"/>
                     <TopNavLink href="/repositories"><strong>JiaoziFS Cloud</strong></TopNavLink>
+
                 </Link>
+                <NavUserInfo/>
             </Container>
         </Navbar>
     );

src/lib/components/repoCreateForm.tsx

@@ -1,9 +1,10 @@
 import React, {useEffect, useRef, useState} from 'react';
 import { FloatingLabel } from 'react-bootstrap';
 import Form from "react-bootstrap/Form";
+import { RepositoryCreateFormProps } from '../../pages/repositories/interface/repos_interface';
 
 
-export const RepositoryCreateForm = ( {id, onSubmit,setFormValid} ) => {
+export const RepositoryCreateForm:React.FC<RepositoryCreateFormProps> = ( {id, onSubmit,setFormValid} ) => {
     const [repoName, setRepoName] = useState('');
     const [description, setDescription] = useState('');
 
@@ -23,21 +24,21 @@ export const RepositoryCreateForm = ( {id, onSubmit,setFormValid} ) => {
         setFormValid(false);
       }
     }, [repoName, description]);
-    const handleRepoNameChange = (e) => {
+    const handleRepoNameChange:React.ChangeEventHandler<HTMLInputElement> = (e) => {
         setRepoName(e.target.value);
       };
 
-      const handleDescriptionChange = (e) => {
+      const handleDescriptionChange:React.ChangeEventHandler<HTMLInputElement> = (e) => {
         setDescription(e.target.value);
       };
 
     return (
         <Form id={id} onSubmit={(e) => {
             e.preventDefault();
             onSubmit({
-                name: repoNameField.current? repoNameField.current.value :'',
-                Description: DescriptionField.current ?DescriptionField.current.value : '',
-              });
+              name: repoNameField.current ? repoNameField.current.value : '',
+              description: DescriptionField.current ? DescriptionField.current.value : ''
+            });
         }}>
             <h4 className="mb-3">Create A New Repository</h4>
             <FloatingLabel label="Repository Name" controlId="repositryIdControl">

src/lib/components/repository/layout.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React from "react";
 // import { useLocalStorage } from "usehooks-ts";
 
 import Container from "react-bootstrap/Container";
@@ -11,7 +11,7 @@ import {Link} from "../nav";
 // import { config } from "../../api";
 // import { useAPI } from "../../hooks/api";
 // import RepoOnboardingChecklistSlider from "./repoOnboardingChecklistSlider";
-import { RepositoryPageLayoutProps, ResponseProps } from "../interface/comp_interface";
+import { RepositoryPageLayoutProps } from "../interface/comp_interface";
 import { cache } from "../../api";
 
 const RepoNav = () => {
@@ -32,43 +32,11 @@ const RepoNav = () => {
 };
 
 export const RepositoryPageLayout:React.FC<RepositoryPageLayoutProps> = ({ activePage, children, fluid = "sm" }) => {
-    // const [showChecklist, setShowChecklist] = useLocalStorage(
-    //     "showChecklist",
-    //     false
-    // );
-    // const [dismissedChecklistForRepo, setDismissedChecklistForRepo] =
-    //     useLocalStorage(`dismissedChecklistForRepo`, false);
-    // const [configRes, setConfigRes] = useState<ResponseProps | null>(null);
-    // const { response } = useAPI(() => {
-    //     return config.getStorageConfig();
-    // }, []);
-
-    // const dismissChecklist = useCallback(() => {
-    //     setShowChecklist(false);
-    //     setTimeout(() => setDismissedChecklistForRepo(true), 700);
-    // }, [setDismissedChecklistForRepo]);
-
-    // // useEffect(() => {
-    //     if (response) {
-    //         setConfigRes(response);
-    //     }
-    // }, [response, setConfigRes]);
-
     return (
 <Layout>
             <div>
-                {/* {configRes && !dismissedChecklistForRepo && (
-                    <RepoOnboardingChecklistSlider
-                        show={showChecklist}
-                        showChecklist={setShowChecklist}
-                        blockstoreType={configRes.blockstore_type}
-                        dismissChecklist={dismissChecklist}
-                    />
-                )} */}
                 <RepoNav/>
-
                 <RepositoryNavTabs active={activePage}/>
-
                 <Container fluid={fluid}>
                     <div className="mt-4">{children}</div>
                 </Container>

src/lib/components/repository/refDropdown.tsx

@@ -4,7 +4,7 @@ import {cache} from '../../api';
 import {Nav, Badge,Form,Button,Alert,Overlay,Popover } from "react-bootstrap";
 import {RefTypeBranch, RefTypeCommit, RefTypeTag} from "../../../constants";
 import { CommitListProps, RefDropdownProps, RefEntryProps, RefSelectorProps, ref, RepoPaginatorProps, ResponseProps } from "../interface/comp_interface";
-import { Commit } from "../../../pages/repositories/interface/repo_interface";
+import { Commit } from "../../../lib/api/interface/Api"
 import { repos } from "../../api/interface";
 
 

src/lib/hooks/api.tsx

@@ -1,5 +1,4 @@
 import {DependencyList, useEffect, useState} from 'react';
-import { AuthenticationError, AuthorizationError} from "../api";
 import {useRouter} from "./router";
 import { APIState, InitialPaginationState, PromiseFunction,} from '../components/interface/comp_interface';
 
@@ -84,7 +83,7 @@ export const useAPI = (promise: PromiseFunction, deps: DependencyList = []) => {
                     response,
                     responseHeaders:null,
                 });
-            } catch (error: unknown | Error | null) {         
+            } catch (error:any) {         
 
                 if (error.status == 401) {