Merge pull request #28 from zenml-io/talha/feedback-fixes

Talha/feedback fixes

Author: danialraza03

src/ui/components/Filters/index.tsx

@@ -26,7 +26,7 @@ export const getInitialFilterState = () => {
       options: [
         {
           value: 'name',
-          label: 'Stack Name',
+          label: 'Name',
           type: 'string',
         },
         {
@@ -116,7 +116,7 @@ export const getInitialFilterStateForPipeline = () => {
       options: [
         {
           value: 'name',
-          label: 'Pipeline Name',
+          label: 'Name',
           type: 'string',
         },
         {
@@ -295,7 +295,12 @@ export const getInitialFilterStateForRuns = () => {
   };
   return JSON.parse(JSON.stringify(initialFilterState));
 };
-const FilterComponent = ({ children, filters, setFilter }: any) => {
+const FilterComponent = ({
+  children,
+  filters,
+  setFilter,
+  getInitials,
+}: any) => {
   const [applyFilter, setApplyFilter] = useState(false);
 
   function handleChange(filter: any, key: string, value: string) {
@@ -321,7 +326,7 @@ const FilterComponent = ({ children, filters, setFilter }: any) => {
   }
 
   function addAnotherFilter() {
-    setFilter([...filters, getInitialFilterState()]);
+    setFilter([...filters, getInitials()]);
   }
 
   function hanldeDelete(index: number) {

src/ui/components/inputs/index.tsx

@@ -18,7 +18,10 @@ export const InputWithLabel = ({
 }): JSX.Element => (
   <FlexBox.Column fullWidth>
     <Box paddingBottom="xs">
-      <Paragraph size="body" style={{ color: labelColor ? labelColor : 'black'}}>
+      <Paragraph
+        size="body"
+        style={{ color: labelColor ? labelColor : 'black' }}
+      >
         <label htmlFor={name}>{label}</label>
       </Paragraph>
     </Box>
@@ -121,7 +124,7 @@ export const TextInput = ({
   type?: string;
 }): JSX.Element => (
   <BaseInput
-    {...props} 
+    {...props}
     hasError={hasError}
     onChange={(e: any): void => {
       onChangeText(e.target.value);

src/ui/layouts/pipelines/Pipelines/index.tsx

@@ -25,7 +25,11 @@ const FilterWrapper = () => {
     return filterValuesMap;
   }
   return (
-    <FilterComponent filters={filters} setFilter={setFilter}>
+    <FilterComponent
+      getInitials={getInitialFilterStateForPipeline}
+      filters={filters}
+      setFilter={setFilter}
+    >
       <List filter={getFilter(filters)} />
     </FilterComponent>
   );

src/ui/layouts/session/Login/Form.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import {
   Box,
-  FormEmailField,
+  // FormEmailField,
   FormPasswordField,
+  FormTextField,
   PrimaryButton,
 } from '../../../components';
 import { translate } from './translate';
@@ -33,7 +34,7 @@ export const Form: React.FC = () => {
   return (
     <Box marginTop="xxl">
       <Box marginBottom="lg">
-        <FormEmailField
+        <FormTextField
           label={translate('form.username.label')}
           labelColor="#ffffff"
           placeholder={translate('form.username.placeholder')}

src/ui/layouts/stackComponents/Stacks/index.tsx

@@ -45,7 +45,11 @@ const FilterWrapper = () => {
     return filterValuesMap;
   }
   return (
-    <FilterComponent filters={filters} setFilter={setFilter}>
+    <FilterComponent
+      getInitials={getInitialFilterState}
+      filters={filters}
+      setFilter={setFilter}
+    >
       <List filter={getFilter(filters)} />
     </FilterComponent>
   );

src/ui/layouts/stacks/Stacks/index.tsx

@@ -24,7 +24,11 @@ const FilterWrapper = () => {
     return filterValuesMap;
   }
   return (
-    <FilterComponent filters={filters} setFilter={setFilter}>
+    <FilterComponent
+      getInitials={getInitialFilterState}
+      filters={filters}
+      setFilter={setFilter}
+    >
       <List filter={getFilter(filters)} />
     </FilterComponent>
   );

src/utils/tableFilters.ts

@@ -16,9 +16,7 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'start_with') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value]
-              .toLowerCase()
-              .startsWith(f.value.toLowerCase());
+            return os.user.name.toLowerCase().startsWith(f.value.toLowerCase());
           }
           return true;
         });
@@ -27,9 +25,7 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'end_with') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value]
-              .toLowerCase()
-              .endsWith(f.value.toLowerCase());
+            return os.user.name.toLowerCase().endsWith(f.value.toLowerCase());
           }
           return true;
         });
@@ -38,28 +34,29 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'equal') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value].toLowerCase() === f.value.toLowerCase();
+            return os.user.name.toLowerCase() === f.value.toLowerCase();
           }
           return true;
         });
       }
       if (f.type.value === 'not_equal') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value].toLowerCase() !== f.value.toLowerCase();
+            return os.user.name.toLowerCase() !== f.value.toLowerCase();
           }
           return true;
         });
       }
     }
 
-    if (f.column.type === 'string' && f.column.label !== 'Owner') {
+    if (
+      (f.column.type === 'string' && f.column.label !== 'Owner') ||
+      f.column.label !== 'Author'
+    ) {
       if (f.type.value === 'contains') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value]
-              .toLowerCase()
-              .includes(f.value.toLowerCase());
+            return os.user.name.toLowerCase().includes(f.value.toLowerCase());
           }
           return true;
         });
@@ -68,9 +65,7 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'start_with') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value]
-              .toLowerCase()
-              .startsWith(f.value.toLowerCase());
+            return os.user.name.toLowerCase().startsWith(f.value.toLowerCase());
           }
           return true;
         });
@@ -79,9 +74,7 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'end_with') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value]
-              .toLowerCase()
-              .endsWith(f.value.toLowerCase());
+            return os.user.name.toLowerCase().endsWith(f.value.toLowerCase());
           }
           return true;
         });
@@ -90,15 +83,15 @@ export const getFilteredDataForTable = (data: any, filter: any) => {
       if (f.type.value === 'equal') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value].toLowerCase() === f.value.toLowerCase();
+            return os.user.name.toLowerCase() === f.value.toLowerCase();
           }
           return true;
         });
       }
       if (f.type.value === 'not_equal') {
         data = data.filter((os: any) => {
           if (f.column.value && f.value) {
-            return os[f.column.value].toLowerCase() !== f.value.toLowerCase();
+            return os.user.name.toLowerCase() !== f.value.toLowerCase();
           }
           return true;
         });