Merge pull request #109 from zenml-io/UAT

Latest release

Author: htahir1

src/api/endpoints.ts

@@ -36,7 +36,7 @@ export const endpoints = {
   StackComponents: {
     types: '/component-types',
     my: (type: string, project: string): string =>
-      `/projects/${project}/components?type=${type}`,
+      `/projects/${project}/components?scope_type=${type}`,
     get: (stackComponentId: TId): string => `/components/${stackComponentId}`,
   },
   runs: {

src/redux/reducers/runsReducer.ts

@@ -59,10 +59,10 @@ const newState = (state: State, runs: TRun[], pagination?: any): State => ({
   ids: idsInsert(state.ids, runs),
   byId: byKeyInsert(state.byId, runs),
   paginated: {
-    page: pagination.page,
-    size: pagination.size,
-    totalPages: pagination.total_pages,
-    totalitem: pagination.total,
+    page: pagination?.page,
+    size: pagination?.size,
+    totalPages: pagination?.total_pages,
+    totalitem: pagination?.total,
   },
 });
 const newStateForGraph = (state: State, graph: any): State => ({

src/ui/components/forms/index.tsx

@@ -178,26 +178,28 @@ export const SearchInputField = (
   return (
     <FlexBox.Column fullWidth style={{ height: '100px' }}>
       <FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
-
-      <LinkBox style={{ position: 'absolute', left: '7px', top: '30px' }} onClick={() => {}}>
+        <LinkBox
+          style={{ position: 'absolute', left: '7px', top: '30px' }}
+          onClick={() => {}}
+        >
           <icons.search color={iconColors.grey} />
-      </LinkBox>
-
-      <InputWithLabel
-        name={props.name}
-        label={props.label}
-        labelColor={props.labelColor}
-        InputComponent={
-          <TextInput
-            {...props}
-            style={{ paddingLeft: '40px' }}
-            value={props.value}
-            onChangeText={props.onChange}
-            placeholder={props.placeholder}
-          />
-        }
-      />
+        </LinkBox>
 
+        <InputWithLabel
+          name={props.name}
+          label={props.label}
+          labelColor={props.labelColor}
+          InputComponent={
+            <TextInput
+              type="search"
+              {...props}
+              style={{ paddingLeft: '40px' }}
+              value={props.value}
+              onChangeText={props.onChange}
+              placeholder={props.placeholder}
+            />
+          }
+        />
       </FlexBox>
     </FlexBox.Column>
   );

src/ui/components/icons/assets/ImageBuilder.svg

@@ -58,6 +58,7 @@ import { ReactComponent as Graph } from './assets/Graph.svg';
 import { ReactComponent as GitCommit } from './assets/GitCommit.svg';
 import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
 import { ReactComponent as Run } from './assets/Run.svg';
+import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -187,6 +188,10 @@ const icons = {
     Component: ChartBarHorizontal,
     useStroke: true,
   }),
+  image_builder: createIcon({
+    Component: ImageBuilder,
+    useStroke: true,
+  }),
 
   // paginations
   paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -10,6 +10,7 @@ export const CollapseTable: React.FC<TableProps & CollapseTableProps> = ({
   headerCols,
   tableRows,
   activeSorting,
+  activeSortingDirection,
   showHeader = true,
   pagination = true,
   loading = false,
@@ -22,6 +23,7 @@ export const CollapseTable: React.FC<TableProps & CollapseTableProps> = ({
   // console.log('activeSorting', activeSorting);
   return (
     <Table
+      activeSortingDirection={activeSortingDirection}
       activeSorting={activeSorting}
       headerCols={headerCols}
       tableRows={tableRows}

src/ui/layouts/common/CollapseTable/index.tsx

@@ -131,7 +131,7 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           dispatchStackRunsData(id, page, size, filters as any, activeSorting);
           break;
         } else {
-          dispatchStackData(1, size, filters as any, activeSorting);
+          dispatchStackData(page, size, filters as any, activeSorting);
           break;
         }
       case 'components':
@@ -145,7 +145,12 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
           );
           break;
         } else {
-          dispatchStackComponentsData(1, size, filters as any, activeSorting);
+          dispatchStackComponentsData(
+            page,
+            size,
+            filters as any,
+            activeSorting,
+          );
           break;
         }
       case 'pipelines':

src/ui/layouts/common/Pagination/index.tsx

@@ -40,6 +40,7 @@ export interface HeaderCol {
 export interface TableProps {
   headerCols: HeaderCol[];
   tableRows: any[];
+  activeSortingDirection?: any;
   activeSorting?: any;
   paginated?: any;
   filters?: any[];
@@ -58,6 +59,7 @@ export const Table: React.FC<TableProps> = ({
   tableRows,
   paginated,
   activeSorting,
+  activeSortingDirection,
   filters,
   showHeader = true,
   pagination = true,
@@ -160,7 +162,11 @@ export const Table: React.FC<TableProps> = ({
   //   itemsPerPage: itemPerPage,
   //   items: tableRows,
   // });
-  const isValidFilter = filters?.map((f) => f.value).join('');
+
+  const isValidFilterFroValue: any = filters?.map((f) => f.value).join('');
+  const isValidFilterForCategory: any =
+    isValidFilterFroValue && filters?.map((f) => f.type.value).join('');
+  const checkValidFilter = isValidFilterFroValue + isValidFilterForCategory;
 
   const { dispatchStackData } = callActionForStacksForPagination();
   const {
@@ -183,87 +189,89 @@ export const Table: React.FC<TableProps> = ({
     componentName === 'components'
       ? locationPath.pathname.split('/')[5]
       : locationPath.pathname.split('/')[4];
-  // console.log(check, '333');
+  const checkForLocationPath = locationPath.pathname.split('/')[4];
   useEffect(() => {
     // console.log(locationPath.pathname.split('/')[4], 'locationPath1');
     setItemPerPage(itemPerPage);
     if (filters) {
       setPageIndex(0);
     }
-    switch (componentName) {
-      case 'stacks':
-        if (CheckIfRun) {
-          dispatchStackRunsData(
-            id,
-            1,
-            itemPerPage,
-            filters as any,
-            activeSorting,
-          );
-          break;
-        } else {
-          dispatchStackData(1, itemPerPage, filters as any, activeSorting);
-          break;
-        }
-      case 'components':
-        if (CheckIfRun) {
-          dispatchStackComponentRunsData(
-            id,
-            1,
-            itemPerPage,
-            filters as any,
-            activeSorting,
-          );
-          break;
-        } else {
-          dispatchStackComponentsData(
-            1,
-            itemPerPage,
-            filters as any,
-            activeSorting,
-          );
-          break;
-        }
-      case 'pipelines':
-        if (CheckIfRun) {
-          dispatchPipelineRunsData(
-            id,
-            1,
-            itemPerPage,
-            filters as any,
-            activeSorting,
-          );
-          break;
-        } else {
-          console.log(itemPerPage, 'itemPerPage');
-          if (!renderAfterRow) break;
-          dispatchPipelineData(1, itemPerPage, filters as any, activeSorting);
-          break;
-        }
+    if (checkValidFilter || activeSorting || checkForLocationPath) {
+      switch (componentName) {
+        case 'stacks':
+          if (CheckIfRun) {
+            dispatchStackRunsData(
+              id,
+              1,
+              itemPerPage,
+              filters as any,
+              activeSorting,
+            );
+            break;
+          } else {
+            dispatchStackData(1, itemPerPage, filters as any, activeSorting);
+            break;
+          }
+        case 'components':
+          if (CheckIfRun) {
+            dispatchStackComponentRunsData(
+              id,
+              1,
+              itemPerPage,
+              filters as any,
+              activeSorting,
+            );
+            break;
+          } else {
+            dispatchStackComponentsData(
+              1,
+              itemPerPage,
+              filters as any,
+              activeSorting,
+            );
+            break;
+          }
+        case 'pipelines':
+          if (CheckIfRun) {
+            dispatchPipelineRunsData(
+              id,
+              1,
+              itemPerPage,
+              filters as any,
+              activeSorting,
+            );
+            break;
+          } else {
+            console.log(itemPerPage, 'itemPerPage');
+            if (!renderAfterRow) break;
+            dispatchPipelineData(1, itemPerPage, filters as any, activeSorting);
+            break;
+          }
 
-      case 'all-runs':
-        dispatchAllrunsData(1, itemPerPage, filters as any, activeSorting);
-        break;
+        case 'all-runs':
+          dispatchAllrunsData(1, itemPerPage, filters as any, activeSorting);
+          break;
 
-      default:
-        break;
-    }
-    if (locationPath.pathname.split('/')[2] === 'organization') {
-      // debugger;
-      setFetchingMembers(true);
-      dispatch(
-        organizationActions.getMembers({
-          page: 1,
-          size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
-          sort_by: activeSorting,
-          onSuccess: () => setFetchingMembers(false),
-          onFailure: () => setFetchingMembers(false),
-        }),
-      );
+        default:
+          break;
+      }
+      if (locationPath.pathname.split('/')[2] === 'organization') {
+        // debugger;
+        setFetchingMembers(true);
+        dispatch(
+          organizationActions.getMembers({
+            page: 1,
+            size: ITEMS_PER_PAGE ? ITEMS_PER_PAGE : DEFAULT_ITEMS_PER_PAGE,
+            sort_by: activeSorting,
+            onSuccess: () => setFetchingMembers(false),
+            onFailure: () => setFetchingMembers(false),
+          }),
+        );
+      }
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locationPath.pathname.split('/')[4], isValidFilter, activeSorting]);
+  }, [checkForLocationPath, checkValidFilter, activeSorting]);
   let rowsToDisplay = tableRows;
   // function getFetchedState(state: any) {
   //   setFetchingMembers(state);

src/ui/layouts/common/Table/index.tsx

@@ -9,7 +9,7 @@ export const Runs: React.FC<{ pipelineId: TId; filter: any }> = ({
 }) => {
   const [sortBy, setSortBy] = useState('created');
   function getSorted(activeSorting: any, activeSortingDirection: any) {
-    setSortBy(activeSorting);
+    setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
     // console.log(activeSorting, activeSortingDirection, 'aaaaaaa');
   }
   const { fetching, runIds, runsPaginated } = useService({

src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx

@@ -15,7 +15,7 @@ interface Props {
 export const AllRuns: React.FC<Props> = ({ filter }: Props) => {
   const [sortBy, setSortBy] = useState('created');
   function getSorted(activeSorting: any, activeSortingDirection: any) {
-    setSortBy(activeSorting);
+    setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
     // console.log(activeSorting, activeSortingDirection, 'aaaaaaa');
   }