filter bar v1

weaveworks · Feb 11, 2022 · 581127a · 581127a
1 parent 96c0c35
commit 581127a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 18 deletions.
diff --git a/ui/components/FilterBar.tsx b/ui/components/FilterBar.tsx
@@ -57,6 +57,7 @@ function UnstyledFilterBar({
         <Icon type={IconType.FilterIcon} size="medium" color="neutral30" />
       </Button>
       <Popover
+        className="filter-popover"
         open={showFilters}
         anchorEl={anchorEl}
         anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
@@ -79,21 +80,54 @@ function UnstyledFilterBar({
         <Divider />
         <List>
           {Object.keys(filterList).map((header: string, index: number) => {
-            <ListItem key={index}>
-              <Text>{header}</Text>
-              <List>
-                {filterList[header].map((option: string, index: number) => {
-                  return (
-                    <ListItem key={index}>
-                      <ListItemIcon>
-                        <Checkbox />
-                      </ListItemIcon>
-                      <Text>{option}</Text>
-                    </ListItem>
-                  );
-                })}
-              </List>
-            </ListItem>;
+            return (
+              <>
+                <ListItem key={index}>
+                  <Flex column>
+                    <Text size="large">{header}</Text>
+                    <List>
+                      {filterList[header].map(
+                        (option: string, index: number) => {
+                          if (search) {
+                            for (let i = 0; i < search.length; i++) {
+                              if (
+                                search[i].toLowerCase() !==
+                                option[i].toLowerCase()
+                              ) {
+                                return;
+                              }
+                            }
+                          }
+                          return (
+                            <ListItem key={index}>
+                              <ListItemIcon>
+                                <Checkbox
+                                  onChange={(e) => {
+                                    e.target.checked
+                                      ? setActiveFilters([
+                                          ...activeFilters,
+                                          option,
+                                        ])
+                                      : setActiveFilters(
+                                          activeFilters.filter(
+                                            (filterCheck) =>
+                                              filterCheck !== option
+                                          )
+                                        );
+                                  }}
+                                />
+                              </ListItemIcon>
+                              <Text>{option}</Text>
+                            </ListItem>
+                          );
+                        }
+                      )}
+                    </List>
+                  </Flex>
+                </ListItem>
+                <Divider />
+              </>
+            );
           })}
         </List>
       </Popover>

diff --git a/ui/stories/FilterBar.stories.tsx b/ui/stories/FilterBar.stories.tsx
@@ -15,7 +15,7 @@ export default {
 } as Meta;
 
 const Template: Story<Props> = (args) => {
-  const [storyFilters, setStoryFilters] = React.useState(args.activeFilters);
+  const [storyFilters, setStoryFilters] = React.useState([]);
 
   return (
     <FilterBar
@@ -29,6 +29,9 @@ const Template: Story<Props> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   className: "",
-  activeFilters: ["Ready", "Helm Release"],
-  filterList: { Name: ["app", "app2", "app3"], Status: ["Ready", "Failed"] },
+  filterList: {
+    Name: ["app", "app2", "app3"],
+    Status: ["Ready", "Failed"],
+    Type: ["Application", "Helm Release"],
+  },
 };