Merge branch 'main' into add-new-icons2

DagsHub · Jul 3, 2023 · cae42b9 · cae42b9
2 parents 1744558 + 0eaed82
commit cae42b9
Show file tree

Hide file tree

Showing 35 changed files with 742 additions and 609 deletions.
diff --git a/.github/workflows/license-check.yml b/.github/workflows/license-check.yml
@@ -0,0 +1,21 @@
+name: License check
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: actions/setup-node@v3
+
+    - name: Download node_modules
+      run: npm ci --ignore-scripts
+
+    - uses: dagshub/node-license-checker-action@v1
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/dagshub/design-system.git"
   },
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "A component library for consuming dagshub user interfaces.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/components/dagshub/data-engine/dataset-settings-modal/index.tsx b/src/components/dagshub/data-engine/dataset-settings-modal/index.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { Icon } from '../../../icons';
 import { Input } from '../../../forms';
-import {GenericModal} from "../../organization";
-import { ButtonVariant, Button} from "../../../elements";
+import { GenericModal } from '../../organization';
+import { ButtonVariant, Button } from '../../../elements';
 import './dataset-settings-modal.scss';
 
 export interface DatasetSettingsModal {
   name: string;
   onDelete: (args?: any) => void;
   onEdit: (args: any) => void;
   onClose: () => void;
-  existingNames:string[];
-  isDataset:boolean; //true- dataset; false- datasource
+  existingNames: string[];
+  isDataset: boolean; //true- dataset; false- datasource
   onlyRemove?: boolean;
 }
 
@@ -31,77 +31,86 @@ export function DatasetSettingsModal({
   const [errNameExist, setErrNameExist] = useState<boolean>(false);
   const [errNameRequired, setErrNameRequired] = useState<boolean>(false);
 
-  const nameWithIllegalCharactersErrText=`${isDataset?"Dataset":"Datasource"} name must be valid alpha or numeric or dash(-_) or dot characters.`;
-  const nameLengthErrText=`${isDataset?"Dataset":"Datasource"} name cannot be empty and must contain at most 30 characters.`;
-  const nameRequiredErrText=`${isDataset?"Dataset":"Datasource"} name cannot be empty.`;
-  const nameExistErrText=`${isDataset?"Dataset":"Datasource"} name has already been taken.`;
+  const nameWithIllegalCharactersErrText = `${
+    isDataset ? 'Dataset' : 'Datasource'
+  } name must be valid alpha or numeric or dash(-_) or dot characters.`;
+  const nameLengthErrText = `${
+    isDataset ? 'Dataset' : 'Datasource'
+  } name cannot be empty and must contain at most 30 characters.`;
+  const nameRequiredErrText = `${isDataset ? 'Dataset' : 'Datasource'} name cannot be empty.`;
+  const nameExistErrText = `${isDataset ? 'Dataset' : 'Datasource'} name has already been taken.`;
 
   const [nameInputText, setNameInputText] = useState<string>(name);
 
   const onNameInputChange = (e: { target: { value: React.SetStateAction<string> } }) => {
     setNameInputText(e.target.value);
   };
 
-  useEffect(
-    function checkNameInput() {
-      const regexChars = /^$|^[a-zA-Z0-9-_.]+$/;
-      const regexLength = /^.{0,30}$/;
-      setErrNameChars(nameInputText.search(regexChars) == -1)
-      setErrNameLength(nameInputText.search(regexLength) == -1)
-      setErrNameExist(existingNames.includes(nameInputText.toLowerCase()))
-      const regexp = /^(?!\s* $).+/;
-      if(nameInputText.search(regexp) != -1) {
-        setErrNameRequired(false)
-      }
-    },
-    [nameInputText]
-  );
+  // useEffect(
+  //   function checkNameInput() {
+  //     const regexChars = /^$|^[a-zA-Z0-9-_.]+$/;
+  //     const regexLength = /^.{0,30}$/;
+  //     setErrNameChars(nameInputText.search(regexChars) == -1)
+  //     setErrNameLength(nameInputText.search(regexLength) == -1)
+  //     setErrNameExist(existingNames.includes(nameInputText.toLowerCase()))
+  //     const regexp = /^(?!\s* $).+/;
+  //     if(nameInputText.search(regexp) != -1) {
+  //       setErrNameRequired(false)
+  //     }
+  //   },
+  //   [nameInputText]
+  // );
 
   let elements: JSX.Element[];
   elements = [
     <Input
-      label={onlyRemove?`${isDataset?"Dataset":"Datasource"} name`:`Edit ${isDataset?"dataset":"datasource"} name`}
+      label={
+        onlyRemove
+          ? `${isDataset ? 'Dataset' : 'Datasource'} name`
+          : `Edit ${isDataset ? 'dataset' : 'datasource'} name`
+      }
       rootMaxWidth={600}
       value={nameInputText}
       onChange={onNameInputChange}
       disabled={onlyRemove}
     />,
-      <>{errNameChars&&<div style={{color:"red"}}>{nameWithIllegalCharactersErrText}</div>}
-      </>,
-    <>{errNameLength&&<div style={{color:"red"}}>{nameLengthErrText}</div>}
-    </>,
-    <>{errNameExist&&<div style={{color:"red"}}>{nameExistErrText}</div>}
-    </>,
-    <>{errNameRequired&&<div style={{color:"red", fontSize:"12px"}}>{nameRequiredErrText}</div>}
+    <>{errNameChars && <div style={{ color: 'red' }}>{nameWithIllegalCharactersErrText}</div>}</>,
+    <>{errNameLength && <div style={{ color: 'red' }}>{nameLengthErrText}</div>}</>,
+    <>{errNameExist && <div style={{ color: 'red' }}>{nameExistErrText}</div>}</>,
+    <>
+      {errNameRequired && (
+        <div style={{ color: 'red', fontSize: '12px' }}>{nameRequiredErrText}</div>
+      )}
     </>,
     <>
       {!displayDeleteBtns ? (
         <div className="dataset-settings-modal__buttons">
           <Button
             width={152}
-            label={`Delete ${isDataset?"dataset":"datasource"}`}
+            label={`Delete ${isDataset ? 'dataset' : 'datasource'}`}
             variant={ButtonVariant.Error}
             onClick={() => setDisplayDeleteBtns(true)}
           />
-          {!onlyRemove&&<Button
-            width={120}
-            disabled={errNameLength||errNameChars||errNameExist}
-            label="Save changes"
-            onClick={() => {
-              const regexp = /^(?!\s* $).+/;
-              if (nameInputText.search(regexp) == -1) {
-                setErrNameRequired(true)
-              } else {
-                onEdit({
-                  originalName: name,
-                  newName: nameInputText,
-                });
-                onClose();
-              }
-            }
-            }
-            variant={ButtonVariant.Primary}
-          />}
+          {!onlyRemove && (
+            <Button
+              width={120}
+              disabled={errNameLength || errNameChars || errNameExist}
+              label="Save changes"
+              onClick={() => {
+                const regexp = /^(?!\s* $).+/;
+                if (nameInputText.search(regexp) == -1) {
+                  setErrNameRequired(true);
+                } else {
+                  onEdit({
+                    originalName: name,
+                    newName: nameInputText
+                  });
+                  onClose();
+                }
+              }}
+              variant={ButtonVariant.Primary}
+            />
+          )}
         </div>
       ) : (
         <div className="dataset-settings-modal__buttons">
@@ -125,5 +134,11 @@ export function DatasetSettingsModal({
       )}
     </>
   ];
-  return <GenericModal title={onlyRemove?`Delete ${isDataset?"dataset":"datasource"}`:"Settings"} elements={elements} onClose={onClose} />;
+  return (
+    <GenericModal
+      title={onlyRemove ? `Delete ${isDataset ? 'dataset' : 'datasource'}` : 'Settings'}
+      elements={elements}
+      onClose={onClose}
+    />
+  );
 }
diff --git a/src/components/dagshub/data-engine/generic-card/generic-card.scss b/src/components/dagshub/data-engine/generic-card/generic-card.scss
@@ -1,4 +1,4 @@
-.generic-card-content{
+.generic-card-content {
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/src/components/dagshub/data-engine/generic-card/index.tsx b/src/components/dagshub/data-engine/generic-card/index.tsx
@@ -8,19 +8,13 @@ export interface GenericCardProps {
   elements: JSX.Element[];
 }
 
-export function GenericCard({
-  width,
-  height,
- backgroundImg,
-    elements
-}: GenericCardProps) {
-
+export function GenericCard({ width, height, backgroundImg, elements }: GenericCardProps) {
   const cardStyle = {
-    backgroundImage: backgroundImg?`url(${backgroundImg})`:undefined,
+    backgroundImage: backgroundImg ? `url(${backgroundImg})` : undefined,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
-    maxWidth:width,
-    height:height,
+    maxWidth: width,
+    height: height
   };
 
   return (

diff --git a/src/components/dagshub/data-engine/index.ts b/src/components/dagshub/data-engine/index.ts
@@ -1,3 +1,3 @@
 export * from './dataset-settings-modal';
 export * from './react-table';
-export * from './generic-card'
+export * from './generic-card';
diff --git a/src/components/dagshub/data-engine/react-table/index.tsx b/src/components/dagshub/data-engine/react-table/index.tsx
@@ -34,7 +34,7 @@ export function BasicTable({
   enableColumnOrdering = false,
   enableColumnHiding = false,
   enableRowSelection = false,
-    enableResizing=false,
+  enableResizing = false,
   enableVirtualization = false,
   virtualizationTableHeight,
   rowHeight,
@@ -47,7 +47,7 @@ export function BasicTable({
     () => ({
       width: cellWidth,
       maxWidth: cellWidth,
-      height:rowHeight
+      height: rowHeight
     }),
     []
   );
@@ -90,8 +90,8 @@ export function BasicTable({
               Cell: ({ row }) => <Checkbox {...row.getToggleRowSelectedProps()} />,
               width: 52,
               minWidth: 30,
-              maxWidth: 400,
-        },
+              maxWidth: 400
+            },
             ...columns
           ];
         }
@@ -139,11 +139,18 @@ export function BasicTable({
       return (
         <tr {...row.getRowProps({ style })}>
           {row.cells.map((cell) => {
-            return <td {...cell.getCellProps({
-              style: {
-                minWidth: cell.column.minWidth,
-                width: cell.column.width,
-              }})}>{cell.render('Cell')}</td>;
+            return (
+              <td
+                {...cell.getCellProps({
+                  style: {
+                    minWidth: cell.column.minWidth,
+                    width: cell.column.width
+                  }
+                })}
+              >
+                {cell.render('Cell')}
+              </td>
+            );
           })}
         </tr>
       );
@@ -177,7 +184,7 @@ export function BasicTable({
   }
 
   return (
-    <div className={"dagshub-react-table"}>
+    <div className={'dagshub-react-table'}>
       {enableColumnHiding && (
         <div>
           <div>
@@ -214,15 +221,17 @@ export function BasicTable({
         </div>
       )}
 
-      {enableResizing&&<button onClick={resetResizing}>Reset Resizing</button>}
+      {enableResizing && <button onClick={resetResizing}>Reset Resizing</button>}
       <table {...getTableProps()}>
         <thead>
           {headerGroups.map((headerGroup) => (
             <tr className={'header'} {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
-                <th {...column.getHeaderProps({
-                  style: { minWidth: column.minWidth, width: column.width },
-                })}>
+                <th
+                  {...column.getHeaderProps({
+                    style: { minWidth: column.minWidth, width: column.width }
+                  })}
+                >
                   {column.render('Header')}
                   <div
                     {...column.getResizerProps()}
@@ -273,7 +282,8 @@ export function BasicTable({
               itemCount={rows.length}
               itemSize={rowHeight}
               width={totalColumnsWidth} //need to add scroller width like in the example
-              style={{overflow:"none"}}>
+              style={{ overflow: 'none' }}
+            >
               {RenderRow}
             </FixedSizeList>
           )}

diff --git a/src/components/dagshub/data-engine/react-table/react-table.scss b/src/components/dagshub/data-engine/react-table/react-table.scss
@@ -1,18 +1,17 @@
-.dagshub-react-table{
+.dagshub-react-table {
   table {
     max-width: 1216px;
     font-family: 'Inter';
     font-style: normal;
     width: 100%;
     display: flex;
     flex-direction: column;
-    border-collapse:collapse;
+    border-collapse: collapse;
     border-radius: 6px;
   }
   thead tr {
     background: var(--secondary-state-50);
-    width: 100%!important;
-
+    width: 100% !important;
   }
   tbody tr {
     justify-content: space-between;
@@ -59,7 +58,9 @@
     flex-direction: row;
   }
 
-  table, th, td{
+  table,
+  th,
+  td {
     border: 1px solid #e2e8f0;
   }
 
@@ -84,7 +85,6 @@
     box-sizing: border-box;
   }
 
-
   th,
   td {
     .resizer {
@@ -106,18 +106,20 @@
     }
   }
 
-
-  th:first-of-type, tr:first-of-type {
+  th:first-of-type,
+  tr:first-of-type {
     border-top-left-radius: 6px;
   }
-  th:last-of-type, tr:last-of-type {
+  th:last-of-type,
+  tr:last-of-type {
     border-top-right-radius: 6px;
   }
-  tr:last-of-type td:first-of-type, tr:last-of-type {
+  tr:last-of-type td:first-of-type,
+  tr:last-of-type {
     border-bottom-left-radius: 6px;
   }
-  tr:last-of-type td:last-of-type, tr:last-of-type {
+  tr:last-of-type td:last-of-type,
+  tr:last-of-type {
     border-bottom-right-radius: 6px;
   }
-
 }