Merge pull request #14 from DagsHub/add-no-result-custom-message

feature | add support of custom no result message
DagsHub · Jul 13, 2023 · e2d782c · e2d782c
2 parents 92c246f + 1bb9ad3
commit e2d782c
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 20 deletions.
diff --git a/src/components/dagshub/data-engine/file-tree/FileList.tsx b/src/components/dagshub/data-engine/file-tree/FileList.tsx
@@ -8,6 +8,7 @@ interface FileListInterface {
   selected: string | null;
   getFilesCb: (id: string) => Promise<any>;
   setSelected: (id: string) => void;
+  emptyMessage?: string;
 }
 
 const Loader = () => (
@@ -29,18 +30,24 @@ export const FileList = ({
   loading,
   setSelected,
   getFilesCb,
-  selected
+  selected,
+  emptyMessage
 }: FileListInterface) => {
   if (loading) {
     return <Loader />;
   }
   if (!children?.length) {
-    return <Box p={1}>This file is empty</Box>;
+    if (emptyMessage) {
+      return <Box ml={2} p={1}>{emptyMessage}</Box>;
+    }
+    // fallback
+    return <Box p={1}>This directory is empty</Box>;
   }
   return (
     <Box>
       {children?.map((child: FileListItemType) => (
         <FileTreeItem
+            emptyMessage={emptyMessage}
           href={child?.href}
           setSelected={setSelected}
           getFilesCb={getFilesCb}

diff --git a/src/components/dagshub/data-engine/file-tree/FileTreeItem.tsx b/src/components/dagshub/data-engine/file-tree/FileTreeItem.tsx
@@ -9,6 +9,7 @@ export interface FileItemInterface {
   selected: string | null;
   label: string;
   type: string;
+  emptyMessage?: string;
   id: string;
   href?: string;
   getFilesCb: (id: string) => Promise<any>;
@@ -29,7 +30,8 @@ export function FileTreeItem({
   getFilesCb,
   setSelected,
   type,
-  href
+  href,
+  emptyMessage,
 }: FileItemInterface) {
   const [open, setOpen] = useState(false);
   const [children, setChildren] = useState<FileListItemType[] | null>(null);
@@ -136,6 +138,7 @@ export function FileTreeItem({
       <Collapse sx={{ ml: 2 }} in={open}>
         <Stack>
           <FileList
+              emptyMessage={emptyMessage}
             children={children}
             loading={loading}
             setSelected={setSelected}

diff --git a/src/components/dagshub/data-engine/file-tree/index.tsx b/src/components/dagshub/data-engine/file-tree/index.tsx
@@ -6,11 +6,18 @@ import { FileList } from './FileList';
 export interface FileTreeInterface {
   list: FileListItemType[];
   loading: boolean;
+  emptyMessage?: string;
   onSelect: (id: string | null) => void;
   getFilesCb: (id: string) => Promise<any>;
 }
 
-export const FileTree = ({ list, loading, getFilesCb, onSelect }: FileTreeInterface) => {
+export const FileTree = ({
+  list,
+  loading,
+  getFilesCb,
+  onSelect,
+  emptyMessage
+}: FileTreeInterface) => {
   const [selected, setSelected] = useState<string | null>(null);
 
   const handleSetSelected = (id: string) => {
@@ -34,6 +41,7 @@ export const FileTree = ({ list, loading, getFilesCb, onSelect }: FileTreeInterf
         }}
       >
         <FileList
+          emptyMessage={emptyMessage}
           children={list}
           loading={loading}
           setSelected={handleSetSelected}

diff --git a/src/components/dagshub/organization/header/index.tsx b/src/components/dagshub/organization/header/index.tsx
@@ -9,14 +9,14 @@ export interface HeaderProps {
   orgSite?: string;
   orgPlan: string;
   orgLink: string;
-  badgeLink?:string;
+  badgeLink?: string;
 }
 
 export function Header(props: HeaderProps) {
   return (
     <div className="organization-header">
-      <a href={props.badgeLink??undefined}className="organization-header__org-image">
-          <img src={props.orgImageSource}></img>
+      <a href={props.badgeLink ?? undefined} className="organization-header__org-image">
+        <img src={props.orgImageSource}></img>
       </a>
       <div className="org-info">
         <div className={'org-upper-info'}>

diff --git a/src/components/dagshub/organization/modals/add-member-modal/index.tsx b/src/components/dagshub/organization/modals/add-member-modal/index.tsx
@@ -137,8 +137,8 @@ export function AddMemberModal({
         label={`Add new ${isTeam ? 'team' : 'organization'} ${
           isOrg && isAdmin ? 'admin' : 'member'
         }`}
-          fullWidth={true}
-          onClick={() =>
+        fullWidth={true}
+        onClick={() =>
           addMembers({
             team,
             access,

diff --git a/src/components/dagshub/organization/tables/teams-table/index.tsx b/src/components/dagshub/organization/tables/teams-table/index.tsx
@@ -66,7 +66,7 @@ export interface TeamTableProps {
   copyInvitationAction: (args?: any) => void;
   existingTeamNames: string[];
   addTeamReposLink: string;
-  addTeamReposAnalyticsEventAction:()=>void;
+  addTeamReposAnalyticsEventAction: () => void;
 }
 
 export interface OnEditTeamInput {
@@ -399,7 +399,11 @@ export function TeamTable({
       columns: [
         <span>
           This team doesn't have repositories yet{' '}
-          <a onClick={addTeamReposAnalyticsEventAction} style={{ textDecoration: 'underline', color: 'black' }} href={addTeamReposLink}>
+          <a
+            onClick={addTeamReposAnalyticsEventAction}
+            style={{ textDecoration: 'underline', color: 'black' }}
+            href={addTeamReposLink}
+          >
             Add team repositories
           </a>
         </span>

diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -1660,7 +1660,7 @@ export const icons = {
       />
     </svg>
   ),
-  'beaker': ({ fill, width, height, onClick = () => {} }: IconProp) => (
+  beaker: ({ fill, width, height, onClick = () => {} }: IconProp) => (
     <svg
       width={width}
       height={height}
@@ -1729,13 +1729,23 @@ export const icons = {
       />
     </svg>
   ),
-    'annotations': ({fill, width, height, onClick = () => {}}: IconProp) => (
-        <svg width={width} height={height} viewBox="0 0 25 25" fill={fill} xmlns="http://www.w3.org/2000/svg">
-            <g id="Icon/Outline/annotations">
-                <path id="Icon" d="M3.5 3.50781H8.9V5.30781H16.1V3.50781H21.5V8.90781H19.7V16.1078H21.5V21.5078H16.1V19.7078H8.9V21.5078H3.5V16.1078H5.3V8.90781H3.5V3.50781ZM16.1 8.90781V7.10781H8.9V8.90781H7.1V16.1078H8.9V17.9078H16.1V16.1078H17.9V8.90781H16.1ZM5.3 5.30781V7.10781H7.1V5.30781H5.3ZM17.9 5.30781V7.10781H19.7V5.30781H17.9ZM5.3 17.9078V19.7078H7.1V17.9078H5.3ZM17.9 17.9078V19.7078H19.7V17.9078H17.9Z" fill="#23414D"/>
-            </g>
-        </svg>
-    ),
+  annotations: ({ fill, width, height, onClick = () => {} }: IconProp) => (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 25 25"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Icon/Outline/annotations">
+        <path
+          id="Icon"
+          d="M3.5 3.50781H8.9V5.30781H16.1V3.50781H21.5V8.90781H19.7V16.1078H21.5V21.5078H16.1V19.7078H8.9V21.5078H3.5V16.1078H5.3V8.90781H3.5V3.50781ZM16.1 8.90781V7.10781H8.9V8.90781H7.1V16.1078H8.9V17.9078H16.1V16.1078H17.9V8.90781H16.1ZM5.3 5.30781V7.10781H7.1V5.30781H5.3ZM17.9 5.30781V7.10781H19.7V5.30781H17.9ZM5.3 17.9078V19.7078H7.1V17.9078H5.3ZM17.9 17.9078V19.7078H19.7V17.9078H17.9Z"
+          fill="#23414D"
+        />
+      </g>
+    </svg>
+  )
 };
 
 export type IconType = keyof typeof icons;

diff --git a/src/stories/dagshub/data-engine/file-tree/FileTree.stories.tsx b/src/stories/dagshub/data-engine/file-tree/FileTree.stories.tsx
@@ -28,7 +28,7 @@ const generateRandOption = (l: number) => {
 };
 
 const getFilesCb = (value: string) => {
-  const rndInt = randomIntFromInterval(0, 6);
+  const rndInt = randomIntFromInterval(0, 2);
 
   // mock api call
   return new Promise((resolve, reject) => {
@@ -59,6 +59,7 @@ FileTreeWithFiles.args = {
       href: '/'
     }
   ],
+  emptyMessage: 'no files here',
   onSelect,
   getFilesCb,
   loading: false