feat: Add pagination, search, styling changes. (#419)

* Do a whole lot of stuff * PR feedback
launchdarkly · Sep 5, 2024 · ac91ec3 · ac91ec3
1 parent b8f598e
commit ac91ec3
Show file tree

Hide file tree

Showing 7 changed files with 399 additions and 403 deletions.
diff --git a/internal/dev_server/ui/package-lock.json b/internal/dev_server/ui/package-lock.json
diff --git a/internal/dev_server/ui/package.json b/internal/dev_server/ui/package.json
@@ -12,16 +12,21 @@
   },
   "dependencies": {
     "@launchpad-ui/components": "0.4.4",
-    "@launchpad-ui/core": "0.49.22", 
+    "@launchpad-ui/core": "0.49.22",
     "@launchpad-ui/icons": "0.18.13",
-    "@launchpad-ui/tokens": "0.9.12",
+    "@launchpad-ui/tokens": "0.11.3",
+    "fuzzysort": "3.0.2",
     "launchdarkly-js-client-sdk": "3.4.0",
+    "lodash": "4.17.21",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-window": "1.8.10"
   },
   "devDependencies": {
+    "@types/lodash": "4.17.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "@types/react-window": "1.8.8",
     "@typescript-eslint/eslint-plugin": "7.13.1",
     "@typescript-eslint/parser": "7.13.1",
     "@vitejs/plugin-react": "4.3.1",

diff --git a/internal/dev_server/ui/src/App.css b/internal/dev_server/ui/src/App.css
@@ -3,38 +3,23 @@
 @import url('../node_modules/@launchpad-ui/tokens/dist/themes.css');
 
 @font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300 800;
+  font-family: inter;
+  src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
   font-display: swap;
-  src: url('https://fonts.gstatic.com/s/inter/v7/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
-    format('woff2');
-}
-
-@font-face {
-  font-family: 'Audimat 3000 Regulier';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Audimat3000-Regulier.var-subset.woff2') format('woff2');
+  font-weight: 300 700;
 }
 
 html,
 body,
 #root {
-  height: 100%;
-  box-sizing: border-box;
-  font-family: 'Inter', sans-serif;
-}
+  box-sizing: border-box; 
 
-#root {
-  padding: 2rem;
-} 
+  font-family: var(--lp-font-family-base);
+  font-size: var(--lp-font-size-300);
+  line-height: var(--lp-line-height-300);
 
-.container {
-  max-width: 40rem;
-  margin: 0 auto;
-}
+  background-color: var(--lp-color-bg-ui-primary);
+} 
 
 .only-show-overrides-label {
   display: flex;
@@ -63,6 +48,7 @@ ul.flags-list li .flag-value {
   flex-direction: row;
   align-items: center;
   flex-shrink: 1;
+  padding-right: 1rem;
 }
 
 code {

diff --git a/internal/dev_server/ui/src/App.tsx b/internal/dev_server/ui/src/App.tsx
@@ -29,25 +29,22 @@ function App() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
+        padding: '1rem',
       }}
     >
-      <div
+      <Box
         style={{
-          display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
-          minWidth: '700px',
+          width: '100%',
+          maxWidth: '900px',
+          minWidth: '600px',
+          padding: '2rem',
+          boxSizing: 'border-box',
         }}
       >
-        <Box
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          padding="1rem"
-          maxWidth="1200px"
-        >
+        <Box display="flex" flexDirection="column" padding="1rem" width="100%">
           {showBanner && (
-            <Box margin="0rem 0rem 2rem 0rem" width="100%">
+            <Box marginBottom="2rem" width="100%">
               <Alert kind="error">
                 <Heading>No projects.</Heading>
                 <Text>Add one via</Text>
@@ -101,7 +98,7 @@ function App() {
             </Box>
           )}
         </Box>
-      </div>
+      </Box>
     </div>
   );
 }

diff --git a/internal/dev_server/ui/src/Flag.tsx b/internal/dev_server/ui/src/Flag.tsx
@@ -25,7 +25,8 @@ import { FormEvent, Fragment } from 'react';
 import { Icon } from '@launchpad-ui/icons';
 import { LDFlagValue } from 'launchdarkly-js-client-sdk';
 import { FlagVariation } from './api.ts';
-import { Box } from '@launchpad-ui/core';
+import { Box, Inline } from '@launchpad-ui/core';
+import { isEqual } from 'lodash';
 
 type VariationValuesProps = {
   availableVariations: FlagVariation[];
@@ -53,8 +54,8 @@ const VariationValues = ({
       );
     default:
       let variations = availableVariations;
-      let selectedVariationIndex = variations.findIndex(
-        (variation) => variation.value === currentValue,
+      let selectedVariationIndex = variations.findIndex((variation) =>
+        isEqual(variation.value, currentValue),
       );
       if (selectedVariationIndex === -1) {
         variations = [
@@ -74,8 +75,71 @@ const VariationValues = ({
       //TODO:
       // Grow the text area when editing local override
       return (
-        <>
-          <Box width="2rem" height="2rem" marginRight="0.5rem">
+        <Inline gap="2">
+          <Select
+            aria-label="flag variations select"
+            selectedKey={selectedVariationIndex}
+            onSelectionChange={(key) => {
+              if (typeof key != 'number') {
+                console.error(`selected non numeric key: ${key}`);
+              } else {
+                updateOverride(flagKey, variations[key].value);
+              }
+            }}
+            style={{
+              maxWidth: '250px',
+            }}
+          >
+            <Fragment key=".0">
+              {selectedVariationIndex !== null &&
+              variations[selectedVariationIndex]._id === 'OVERRIDE' ? (
+                <TooltipTrigger>
+                  <Button>
+                    <SelectValue />
+                    <Icon name="chevron-down" size="small" />
+                  </Button>
+                  <Tooltip>
+                    This value is overriden locally. Click the edit button to
+                    change the value served.
+                  </Tooltip>
+                </TooltipTrigger>
+              ) : (
+                <Button>
+                  <SelectValue
+                    style={{
+                      maxWidth: '250px',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  />
+                  <Icon name="chevron-down" size="small" />
+                </Button>
+              )}
+              <Popover>
+                <ListBox>
+                  {variations.map((fv, index) => {
+                    const text = fv.name ? fv.name : JSON.stringify(fv.value);
+                    return (
+                      <ListBoxItem key={index} id={index} textValue={text}>
+                        {fv._id === 'OVERRIDE' ? (
+                          <div>
+                            <Inline gap="1">
+                              <Icon name="devices" size="small" />
+                              {text}
+                            </Inline>
+                          </div>
+                        ) : (
+                          text
+                        )}
+                      </ListBoxItem>
+                    );
+                  })}
+                </ListBox>
+              </Popover>
+            </Fragment>
+          </Select>
+          <Box width="2rem" height="2rem">
             <DialogTrigger>
               <TooltipTrigger>
                 <IconButton icon="edit" aria-label="edit variation value" />
@@ -89,6 +153,10 @@ const VariationValues = ({
                         <TextField
                           defaultValue={JSON.stringify(currentValue, null, 2)}
                           name="value"
+                          style={{
+                            fontFamily: 'monospace',
+                            height: '25rem',
+                          }}
                           validate={(value) => {
                             try {
                               JSON.parse(value);
@@ -126,44 +194,7 @@ const VariationValues = ({
               </ModalOverlay>
             </DialogTrigger>
           </Box>
-          <Select
-            aria-label="flag variations select"
-            selectedKey={selectedVariationIndex}
-            onSelectionChange={(key) => {
-              if (typeof key != 'number') {
-                console.error(`selected non numeric key: ${key}`);
-              } else {
-                updateOverride(flagKey, variations[key].value);
-              }
-            }}
-          >
-            <Fragment key=".0">
-              <Button>
-                <SelectValue />
-                <Icon name="chevron-down" size="small" />
-              </Button>
-              <Popover>
-                <ListBox>
-                  {variations.map((fv, index) => {
-                    const text = fv.name ? fv.name : JSON.stringify(fv.value);
-                    return (
-                      <ListBoxItem key={index} id={index} textValue={text}>
-                        {fv._id === 'OVERRIDE' ? (
-                          <>
-                            {text}
-                            <Icon name="devices" size="small" />
-                          </>
-                        ) : (
-                          text
-                        )}
-                      </ListBoxItem>
-                    );
-                  })}
-                </ListBox>
-              </Popover>
-            </Fragment>
-          </Select>
-        </>
+        </Inline>
       );
   }
 };