feat: ✨ new design for group by (#488)

* feat: ✨ new group by design init * feat: ✨ added slight shadow and animation * refactor: 🔥 removed old settings + bump * fix: 🐛 resolved
equinor · Oct 10, 2023 · 041bf4e · 041bf4e
1 parent 7d18c52
commit 041bf4e
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 235 deletions.
diff --git a/apps/test-app/index.html b/apps/test-app/index.html
@@ -1,8 +1,9 @@
 <html>
-    <head>
-    <script type="module" src="./src/index.tsx" ></script>
-    </head>
-    <body>
-        <div id="root"></div>
-    </body>
-</html>
+  <head>
+    <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
+    <script type="module" src="./src/index.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/test-app/src/index.tsx b/apps/test-app/src/index.tsx
@@ -4,7 +4,15 @@ import { gridModule } from '@equinor/workspace-fusion/grid-module';
 import { GroupingOption } from '@equinor/workspace-garden';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { createGlobalStyle } from 'styled-components';
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: Equinor;
+  }
+`;
 export function App() {
   return (
     <Workspace<{ id: string }>
@@ -182,4 +190,10 @@ export function App() {
 
 const container = document.getElementById('root')!;
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);
+
+root.render(
+  <>
+    <GlobalStyle />
+    <App />
+  </>
+);
diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "5.2.2",
+  "version": "5.3.2",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx b/packages/workspace-fusion/src/modules/garden/components/GroupingSelector.tsx
@@ -1,10 +1,9 @@
-import { Autocomplete, Radio } from '@equinor/eds-core-react';
+import { Autocomplete, Divider, Radio } from '@equinor/eds-core-react';
 import { FilterState } from '@equinor/workspace-filter';
 import { GardenDataSource, GroupingOption } from '@equinor/workspace-garden';
 import { useQuery } from '@tanstack/react-query';
 import { useRef } from 'react';
 import styled from 'styled-components';
-import { useOutsideClick } from '../../../lib/hooks/useGardenPopoverOutsideClick';
 
 type GroupingSelectorProps = {
   dataSource: GardenDataSource<FilterState>;
@@ -15,9 +14,6 @@ type GroupingSelectorProps = {
   dateVariant: string | null;
   onChangeTimeInterval: (timeInterval: string | null) => void;
   onChangeDateVarient: (dateVariant: string | null) => void;
-  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
-  iconRef: React.MutableRefObject<HTMLDivElement | null>;
-  close: VoidFunction;
 };
 
 export function GroupingSelector({
@@ -29,9 +25,6 @@ export function GroupingSelector({
   onChangeTimeInterval,
   onChangeDateVarient,
   groupingKeys,
-  iconRef,
-  popoverRef,
-  close,
 }: GroupingSelectorProps): JSX.Element | null {
   const { data } = useQuery(['garden', ...groupingKeys, timeInterval, dateVariant, context], {
     refetchOnWindowFocus: false,
@@ -44,14 +37,6 @@ export function GroupingSelector({
 
   const selectorRef = useRef(null);
 
-  useOutsideClick(
-    () => {
-      close();
-    },
-    popoverRef,
-    iconRef
-  );
-
   const setGardenKey = (key: string) => {
     const foundGroupingOption = data?.allGroupingOptions.find((option) => option.groupingKey === key);
     if (!foundGroupingOption) {
@@ -88,58 +73,75 @@ export function GroupingSelector({
   }
 
   return (
-    <StyledAutoCompleteWrapper>
-      <Autocomplete
-        ref={selectorRef}
-        key={groupingKeys[0]}
-        options={data.allGroupingOptions.map((option: GroupingOption) => option.groupingKey)}
-        label={'Column headers'}
-        hideClearButton
-        multiple={false}
-        selectedOptions={[groupingKeys[0]]}
-        onOptionsChange={(changes) => handleGardenKeyChange(changes.selectedItems[0])}
-      />
-      {data.allGroupingOptions.map(
-        (groupingOption) =>
+    <>
+      <StyledGroupHeader>Groups</StyledGroupHeader>
+      <Divider />
+      <StyledAutoCompleteWrapper>
+        <Autocomplete
+          ref={selectorRef}
+          key={groupingKeys[0]}
+          options={data.allGroupingOptions.map((option: GroupingOption) => option.groupingKey)}
+          label={'Group by'}
+          hideClearButton
+          multiple={false}
+          selectedOptions={[groupingKeys[0]]}
+          onOptionsChange={(changes) => handleGardenKeyChange(changes.selectedItems[0])}
+        />
+        <Autocomplete
+          options={data.validGroupingOptions}
+          label={'Then Group by'}
+          selectedOptions={[groupingKeys.at(1)]}
+          onOptionsChange={(changes) => handleExistingSelectionChange(changes.selectedItems[0])}
+        />
+      </StyledAutoCompleteWrapper>
+
+      {data.allGroupingOptions.map((groupingOption) => {
+        // Check if dateVariant or timeInterval is defined
+        const hasDateVariant = !!groupingOption.dateVariant;
+        const hasTimeInterval = !!groupingOption.timeInterval;
+
+        if (!hasDateVariant && !hasTimeInterval) return null;
+
+        return (
           groupingOption.groupingKey === groupingKeys[0] && (
-            <RadioWrapper>
-              <RadioCategoryWrapper>
-                {groupingOption.timeInterval &&
-                  groupingOption.timeInterval.map((dim) => (
-                    <Radio
-                      key={dim}
-                      label={dim}
-                      value={dim}
-                      name="timeInterval"
-                      checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
-                      onChange={(e) => onChangeTimeInterval(e.target.value)}
-                    />
-                  ))}
-              </RadioCategoryWrapper>
-              <RadioCategoryWrapper>
-                {groupingOption.dateVariant &&
-                  groupingOption.dateVariant.map((typ) => (
-                    <Radio
-                      key={typ}
-                      label={typ}
-                      value={typ}
-                      name="dateVariant"
-                      checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
-                      onChange={(e) => onChangeDateVarient(e.target.value)}
-                    />
-                  ))}
-              </RadioCategoryWrapper>
-            </RadioWrapper>
+            <>
+              <StyledGroupHeader>Views</StyledGroupHeader>
+              <Divider />
+              <RadioWrapper>
+                <StyledSubGroupHeader>Date Fields:</StyledSubGroupHeader>
+                <RadioCategoryWrapper>
+                  {hasDateVariant &&
+                    groupingOption.dateVariant?.map((typ) => (
+                      <Radio
+                        key={typ}
+                        label={typ}
+                        value={typ}
+                        name="dateVariant"
+                        checked={dateVariant?.trim().toLowerCase() === typ.trim().toLowerCase()}
+                        onChange={(e) => onChangeDateVarient(e.target.value)}
+                      />
+                    ))}
+                </RadioCategoryWrapper>
+                <StyledSubGroupHeader>Time Intervals:</StyledSubGroupHeader>
+                <RadioCategoryWrapper>
+                  {hasTimeInterval &&
+                    groupingOption.timeInterval?.map((dim) => (
+                      <Radio
+                        key={dim}
+                        label={dim}
+                        value={dim}
+                        name="timeInterval"
+                        checked={timeInterval?.trim().toLowerCase() === dim.trim().toLowerCase()}
+                        onChange={(e) => onChangeTimeInterval(e.target.value)}
+                      />
+                    ))}
+                </RadioCategoryWrapper>
+              </RadioWrapper>
+            </>
           )
-      )}
-
-      <Autocomplete
-        options={data.validGroupingOptions}
-        label={'Group by'}
-        selectedOptions={[groupingKeys.at(1)]}
-        onOptionsChange={(changes) => handleExistingSelectionChange(changes.selectedItems[0])}
-      />
-    </StyledAutoCompleteWrapper>
+        );
+      })}
+    </>
   );
 }
 
@@ -150,10 +152,18 @@ export const StyledAutoCompleteWrapper = styled.div`
   gap: 1em;
 `;
 
+export const StyledGroupHeader = styled.div`
+  font-weight: 500px;
+  padding-top: 2rem;
+`;
+export const StyledSubGroupHeader = styled.div`
+  padding-left: 1rem;
+  padding-top: 1rem;
+`;
 export const RadioWrapper = styled.div`
   display: flex;
-  align-items: center;
-  flex-direction: row;
+  align-items: start;
+  flex-direction: column;
   gap: 1em;
 `;
 

diff --git a/...es/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx b/...es/workspace-fusion/src/modules/garden/components/workspace-header/GardenViewSettings.tsx