Merge pull request #155 from GitDataAI/dev/m.2

update

src/lib/components/repoCreateForm.tsx

@@ -7,11 +7,13 @@ import { RepositoryCreateFormProps } from '../../pages/repositories/interface/re
 export const RepositoryCreateForm:React.FC<RepositoryCreateFormProps> = ( {id, onSubmit,setFormValid} ) => {
     const [repoName, setRepoName] = useState('');
     const [description, setDescription] = useState('');
+    const [config, setConfig] = useState('');
 
     const repoNameField = useRef<HTMLInputElement>(null);
     const DescriptionField = useRef<HTMLInputElement>(null);
+    const ConfigField = useRef<HTMLInputElement>(null);
+
     const [visible, setVisible] = useState(true);
-    console.log(visible);
 
     const handleChange = (e:any) => {
       setVisible(e.target.value === 'public');
@@ -25,12 +27,12 @@ export const RepositoryCreateForm:React.FC<RepositoryCreateFormProps> = ( {id, o
     }, []);
 
     useEffect(() => {
-      if (repoName || repoName && description) {
+      if (repoName || repoName && description && config) {
         setFormValid(true);
       } else  {
         setFormValid(false);
       }
-    }, [repoName, description]);
+    }, [repoName, description,config]);
     const handleRepoNameChange:React.ChangeEventHandler<HTMLInputElement> = (e) => {
         setRepoName(e.target.value);
       };
@@ -39,22 +41,30 @@ export const RepositoryCreateForm:React.FC<RepositoryCreateFormProps> = ( {id, o
         setDescription(e.target.value);
       };
 
+      const handleConfigChange:React.ChangeEventHandler<HTMLInputElement> = (e) => {
+        setConfig(e.target.value);
+      };
+
     return (
         <Form id={id}  className='repo-create' onSubmit={(e) => {
             e.preventDefault();
             onSubmit({
               name: repoNameField.current ? repoNameField.current.value : '',
               description: DescriptionField.current ? DescriptionField.current.value : '',
-              visible: visible
+              visible: visible,
+              blockstore_config: ConfigField.current ? ConfigField.current.value: ''
             });
         }}>
             <h4 className="mb-3">Create A New Repository</h4>
             <FloatingLabel label="Repository Name" controlId="repositryIdControl">
             <Form.Control type="text" ref={repoNameField}  placeholder="my-data-lake" onChange={handleRepoNameChange}/>               
             </FloatingLabel>
-            <FloatingLabel label="Description" controlId="repositryIdControl">
+            <FloatingLabel label="Description" controlId="repositryDesControl">
             <Form.Control type="text" ref={DescriptionField}  placeholder="my-data-lake" onChange={handleDescriptionChange}/>               
             </FloatingLabel>
+            <FloatingLabel label="Repository Config" controlId="repositryCfgControl">
+            <Form.Control type="text" ref={ConfigField}  placeholder="my-data-lake" onChange={handleConfigChange}/>               
+            </FloatingLabel>
             <Form.Group controlId="repositryIdControl" className='repo-Visable'>
             <code>Do You want your repository to be discovered by others?</code>
             <Form.Check

src/lib/components/repository/layout.tsx

@@ -21,10 +21,10 @@ const RepoNav = () => {
     return (
         <Breadcrumb className="to-repo">
             <Link href={{pathname: '/repositories'}} component={Breadcrumb.Item}>
-                Repositories
+                <strong>Repositories</strong>
             </Link>
             <Link href={{pathname: '/repositories/:user/:repoId/objects', params: {repoId,user}}} component={Breadcrumb.Item}>
-                {repoId}
+                <code>{repoId}</code>
             </Link>
         </Breadcrumb>
 

src/lib/components/repository/refDropdown.tsx

@@ -95,9 +95,9 @@ const RefSelector:React.FC<RefSelectorProps> = ({ repo, selected, selectRef, wit
                     setCommitList(initialCommitList);
                 }}/>
         )}
-
-
-    const results = refList.payload? refList.payload.results: '';
+                
+    const results = refList.payload ? refList.payload.data ? refList.payload.data.results : refList.payload.results : '';
+
 
     return (
         <div className="ref-selector">
@@ -112,9 +112,6 @@ const RefSelector:React.FC<RefSelectorProps> = ({ repo, selected, selectRef, wit
                                 />
                             ))}
                         </ul>
-                        <Paginator results={refList.payload? refList.payload.results : []} pagination={refList.payload? refList.payload.pagination:{}} from={pagination.after} onPaginate={(after) => {
-                            setPagination({after , prefix: "", amount})
-                        }}/>
                     </>
                 ) : (
                     <p className="text-center mt-3"><small>No references found</small></p>

src/pages/repositories/index.tsx

@@ -1,6 +1,9 @@
 
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { ButtonToolbar, Card, Container, Form, FormControl } from "react-bootstrap";
+import { ButtonToolbar, Card, Container, Dropdown, Form, FormControl } from "react-bootstrap";
+import { GoRepoPush } from "react-icons/go";
+import { HiSortAscending  } from "react-icons/hi";
+import { PiSortAscendingBold } from "react-icons/pi";
 
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -9,13 +12,15 @@ import Layout from "../../lib/components/layout";
 import { ActionsBar } from "../../lib/components/controls";
 import { cache } from '../../lib/api';
 import { useRouter } from "../../lib/hooks/router";
+import { PiTextAaBold } from "react-icons/pi";
 
 import { Route, Routes } from "react-router-dom";
 import { CreateRepositoryButton, CreateRepositoryModal, RepositoryList } from "./repos-comp";
 import { users } from "../../lib/api/interface/index";
 import { ActivepageContext } from "../../lib/hooks/conf";
 import { activepage } from "../../lib/hooks/interface";
-
+type Order = 'asc' | 'desc';
+type SortBy = 'name' | 'created_at';
 const RepositoryPage = React.lazy(() => import('./repository'));
 
 
@@ -31,6 +36,8 @@ const RepositoriesPage = () => {
     const [repoamount, setRepoAmount] = useState(0);
     const [search,setSearch] = useState('')
     const [filter, setFilter] = useState('')
+    const [sortBy, setSortBy] = useState<SortBy>('name');
+    const [order, setOrder] = useState<Order>('asc');
     function debounce(func: Function, delay: number) {
         let timer: NodeJS.Timeout;
         return  (...args: any[]) => {
@@ -52,7 +59,7 @@ const RepositoriesPage = () => {
     useEffect(() => {
         activepageL.setPage('repositories')
     })
-    const createRepo = async (repo: { name: string, description: string ,visible:boolean}, presentRepo = true) => {
+    const createRepo = async (repo: { name: string, description: string ,visible:boolean,blockstore_config:string}, presentRepo = true) => {
         const owner = cache.get('user')
         try {
             setCreatingRepo(true);
@@ -96,12 +103,27 @@ const RepositoriesPage = () => {
                 <Card className="repo-card">
                     <Card.Header className="repo-card-header">
                         <strong>{repoamount} repositories</strong>
+                        <Dropdown>
+        <Dropdown.Toggle variant="outline-primary" className="sortType"  id="dropdown-basic">
+          {order=='asc'?<HiSortAscending />:<PiSortAscendingBold />}
+          {sortBy=='name'?'Name':'Last Pushed'}
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="sortMenu">
+          <Dropdown.Item onClick={() => setSortBy('name')}><PiTextAaBold />Name</Dropdown.Item>
+          <Dropdown.Item onClick={() => setSortBy('created_at')} className="UpsplitDropdown"><GoRepoPush />Last Pushed</Dropdown.Item>
+          <Dropdown.Item onClick={() => setOrder('asc')} className="DownsplitDropdown"><HiSortAscending />Ascending</Dropdown.Item>
+          <Dropdown.Item onClick={() => setOrder('desc')}><PiSortAscendingBold />Descending</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
                     </Card.Header>
                 <RepositoryList
                     refresh={refresh}
                     setRepoAmount={setRepoAmount}
                     search={search}
                     filter={filter}
+                    sortBy={sortBy}
+                    order={order}
                 />
                 </Card>
 

src/pages/repositories/interface/repos_interface.tsx

@@ -22,7 +22,7 @@ export interface GettingStartedCreateRepoButtonProps {
 export interface CreateRepositoryModalProps {
     show: boolean;
     error: null | undefined;
-    onSubmit:(repo:{ name: string, description: string ,visible:boolean}) => Promise<boolean>;
+    onSubmit:(repo:{ name: string, description: string ,visible:boolean,blockstore_config:string}) => Promise<boolean>;
     onCancel:()=>void;
     inProgress: boolean;
     samlpleRepoChecked?: boolean;
@@ -57,6 +57,6 @@ export interface SQLEditorProps {
 
 export interface RepositoryCreateFormProps{
     id:string, 
-    onSubmit:(repo: { name: string, description: string ,visible:boolean}) => Promise<boolean> ,
+    onSubmit:(repo: { name: string, description: string ,visible:boolean,blockstore_config:string}) => Promise<boolean> ,
     setFormValid:React.Dispatch<React.SetStateAction<boolean>>
 }

src/pages/repositories/repos-comp/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Button,Card,Modal} from "react-bootstrap";
 
 import {RepoIcon} from "@primer/octicons-react";
@@ -14,7 +14,8 @@ import { CreateRepositoryButtonProps, CreateRepositoryModalProps} from "../inter
 import {users } from "../../../lib/api/interface/index";
 import { useRouter } from "../../../lib/hooks/router";
 import { Repository } from "../../../lib/api/interface/Api";
-
+type Order = 'asc' | 'desc';
+type SortBy = 'name' | 'created_at';
 dayjs.extend(relativeTime);
 
 export const CreateRepositoryButton: React.FC<CreateRepositoryButtonProps> = ({variant = "success", enabled = false, onClick,word= 'New Repository',style={}}) => {
@@ -38,29 +39,65 @@ export const CreateRepositoryModal: React.FC<CreateRepositoryModalProps> = ({sho
                 />
             </Modal.Body>
             <Modal.Footer>
-              <Button variant="success" type="submit" form="repository-create-form" className="me-2" disabled={!formValid || inProgress} onClick={()=>{setShow(false),setRefresh(refresh)}}>
-                { inProgress ? 'Creating...' : 'Create Repository' }
-              </Button>
-              <Button variant="secondary" onClick={(e) => {
+            <Button variant="secondary" onClick={(e) => {
                 e.preventDefault();
                 onCancel();
               }}>Cancel</Button>
+              <Button variant="primary" type="submit" form="repository-create-form" className="me-2" disabled={!formValid || inProgress} onClick={()=>{setShow(false),setRefresh(refresh)}}>
+                { inProgress ? 'Creating...' : 'Create Repository' }
+              </Button>
             </Modal.Footer>
         </Modal>
     );
 };
 
-export const RepositoryList = ({refresh,setRepoAmount,search,filter=''}:{refresh:boolean,setRepoAmount:React.Dispatch<React.SetStateAction<number>>,search:string,filter:string}) => {
+export const RepositoryList = ({refresh,setRepoAmount,search,filter='',sortBy,order}:{refresh:boolean,setRepoAmount:React.Dispatch<React.SetStateAction<number>>,search:string,filter:string}) => {
     const user = cache.get('user')
     const router = useRouter()
+    const [repoArr,setRepoArr] = useState<Repository[]>([])
+    function sortData(data:Repository[], order:Order, sortBy:SortBy) {        
+        if (!Array.isArray(data) || data.length === 0) {
+            console.error("Invalid data array provided.");
+            return [];
+        }
+        let sortField;
+        if (sortBy == "name") {
+        } else if (sortBy == "created_at") {
+            sortField = "created_at"; 
+        } else {
+            console.error("Invalid order parameter. Use 'name' or 'created_at'.");
+            return [];
+        }
+
+        const sortOrder = order === "asc" ? 1 : order === "desc" ? -1 : 0;
+        if (sortOrder === 0) {
+            console.error("Invalid sortBy parameter. Use 'asc' or 'desc'.");
+            return [];
+        }
 
+        return data.sort((a, b) => {
+            const valueA = a[sortField];
+            const valueB = b[sortField];
+            if (valueA < valueB) {
+                return -sortOrder;
+            } else if (valueA > valueB) {
+                return sortOrder;
+            }
+            return 0;
+        });
+    }
+    useEffect(()=>{
+        sortData(repoArr,order,sortBy)     
+        setRepoArr(repoArr)   
+    }, [refresh,search,filter,sortBy,order])
+
     const Storage = ({storage})=>{
         return(
         <span className="storage">{storage?'public':'private'}</span>
         )
     }
     if(user){
-        const {results, loading, error} = useAPIWithPagination( async() => {
+        const {loading, error} = useAPIWithPagination( async() => {
                 return  await users.listRepository(user).then((results)=>{
                     if(search && !filter ){
                         results.data.results = results.data.results.filter((item)=>{
@@ -72,16 +109,17 @@ export const RepositoryList = ({refresh,setRepoAmount,search,filter=''}:{refresh
                         })
                     }
                     setRepoAmount(results.data.results.length)
+                    setRepoArr(results.data.results)
                     return results
                 })
         }, [refresh,search,filter]);
         if (loading) return <Loading/>;
         if (error) { 
             return <AlertError error={error}/>;}
-            if(results){                
+            if(repoArr){                
                 return (
                     <div>
-                        {results.map((repo:Repository)=>{   
+                        {repoArr.map((repo:Repository)=>{   
                                 return(  
                                     <Card key={repo.id}>
                                         <Card.Body>

src/pages/repositories/repository/repo-comp/objects/objects.tsx

@@ -5,7 +5,6 @@ import {
     ActionGroup,
     ActionsBar,
     Loading,
-    RefreshButton,
 } from "../../../../../lib/components/controls";
 import {useRefs} from "../../../../../lib/hooks/repo";
 import {useRouter} from "../../../../../lib/hooks/router";
@@ -297,15 +296,17 @@ const ObjectsBrowser = () => {
 
       </Row>
     </Form>
+
             </Modal.Body>
             <Modal.Footer>
-            <Button variant="primary" type="submit" onClick={handleSubmit}>
-              Create Tag
-            </Button>
-              <Button variant="secondary" onClick={(e) => {
+            <Button variant="secondary" onClick={(e) => {
                 e.preventDefault();
                 ShowTagForm();
               }}>Cancel</Button>
+            <Button variant="primary" type="submit" onClick={handleSubmit}>
+              Create Tag
+            </Button>
+
             </Modal.Footer>
         </Modal>
 

src/styles/index.css

@@ -332,6 +332,13 @@ a {
 }
 .repo-card .repo-card-header {
   border-radius: 5px 5px 0 0;
+  display: flex;
+  justify-content: space-between;
+  line-height: 2.5rem;
+}
+.repo-card .repo-card-header svg {
+  font-size: 18px;
+  margin: 0 0.2rem 0.2rem 0;
 }
 .repo-card .repo-card-header strong {
   font-size: 0.9rem;
@@ -341,7 +348,7 @@ a {
   border: 0.5px solid #eeeeee;
 }
 .Navtittle {
-  margin: 2rem 2rem 1.3rem 2rem;
+  margin: 2.5rem 2rem 0.7rem 2rem;
   font-size: 20px;
 }
 .AKSK-List .row button {
@@ -361,11 +368,12 @@ a {
   margin-right: 4rem;
 }
 .to-repo {
-  margin: 0.9rem;
+  margin-top: 1.35rem;
   font-size: 18px;
 }
 .repoTittle {
   font-size: 20px;
+  padding-top: 0.5rem;
 }
 .repo-create .form-floating {
   margin: 5px 0;
@@ -375,3 +383,33 @@ a {
   padding: 5px;
   border-radius: 5px;
 }
+.sortMenu {
+  font-size: 14px;
+}
+.sortMenu .dropdown-item {
+  padding-right: 1rem;
+  padding-left: 2rem;
+}
+.sortMenu .UpsplitDropdown {
+  border-bottom: 1px solid #dbe0fc;
+}
+.sortType {
+  border: none;
+  background-color: rgba(188, 188, 188, 0.1);
+  color: #434343;
+}
+.sortType:active {
+  border: none;
+  background-color: rgba(188, 188, 188, 0.1) !important;
+  color: #434343 !important;
+}
+.sortType:hover {
+  border: none;
+  background-color: rgba(188, 188, 188, 0.1) !important;
+  color: #434343 !important;
+}
+.show .sortType {
+  border: none;
+  background-color: rgba(188, 188, 188, 0.1) !important;
+  color: #434343 !important;
+}