Fix/make sure stickiness exists (#320)

* chore: update changelog

* 4.1.0-beta.1

* fix: Project filter was trying to filter based on full project object

* 4.0.6

* fix: add user to archived toggle view

* fix: remove console log

* 4.0.7

* 4.0.8

* fix: make sure the index we're trying to access exists

* fix: load fonts from google, fallback to system fonts

* fix: snapshot

* 4.0.10

* fix: update package json

* fix update fonts

* fix: remove custom font family for archive

* fix: update snapshot

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>
Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai>

frontend/CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 The latest version of this document is always available in
 [releases](https://github.com/Unleash/unleash-frontend/releases).
 
+# 4.1.0-beta.1
+- Feat/new navigation (#314)
+
 # 4.0.5 fix: run use effect when value changes, not object (#315)
 - fix: run use effect when value changes, not object (#315)
 - fix: add flex wrap

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.0.5",
+  "version": "4.0.10",
   "keywords": [
     "unleash",
     "feature toggle",

frontend/public/index.html

@@ -8,8 +8,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="unleash" />
         <title>Unleash - Enterprise ready feature toggles</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
             rel="stylesheet"
         />
     </head>

frontend/src/app.css

@@ -1,45 +1,3 @@
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 300;
-    src: url('./assets/fonts/Roboto-300.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 400;
-    src: url('./assets/fonts/Roboto-400.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 500;
-    src: url('./assets/fonts/Roboto-500.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 700;
-    src: url('./assets/fonts/Roboto-700.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 400;
-    src: url('./assets/fonts/Sen-Regular.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 500;
-    src: url('./assets/fonts/Sen-Bold.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 700;
-    src: url('./assets/fonts/Sen-ExtraBold.ttf');
-}
-
 * {
     box-sizing: border-box;
 }
@@ -52,7 +10,7 @@ html {
 
 body {
     height: 100%;
-    /* font-family: 'Sen'; */
+    font-family: 'Sen', sans-serif;
 }
 
 .MuiButton-root {

frontend/src/component/Reporting/ReportCard/ReportCard.module.scss

@@ -6,7 +6,7 @@
 
 .header {
     font-size: var(--h1-size);
-    font-weight: 500;
+    font-weight: 'bold';
     margin: 0 0 0.5rem 0;
 }
 

frontend/src/component/Reporting/ReportToggleList/ReportToggleList.module.scss

@@ -27,7 +27,7 @@
 .reportToggleListHeading {
     font-size: var(--h1-size);
     margin: 0;
-    font-weight: 500;
+    font-weight: 'bold';
 }
 
 .reportingToggleTable {

frontend/src/component/Reporting/Reporting.module.scss

@@ -1,6 +1,6 @@
 .header {
     font-size: var(--h1-size);
-    font-weight: 500;
+    font-weight: 700;
     margin: 0 0 0.5rem 0;
 }
 
@@ -137,7 +137,7 @@
 .reportToggleListHeading {
     font-size: var(--h1-size);
     margin: 0;
-    font-weight: 500;
+    font-weight: 'bold';
 }
 
 .reportingToggleTable {

frontend/src/component/archive/archive.module.scss

@@ -3,7 +3,6 @@
     color: rgba(0, 0, 0, 0.54);
     align-items: center;
     padding: 0 16px 0 18px;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }
 
 .listItemToggle {
@@ -16,7 +15,7 @@
     flex-shrink: 0;
     margin-right: 2px;
 }
-.listItemRevive{
+.listItemRevive {
     width: 5%;
     flex-shrink: 0;
     margin-right: 10%;
@@ -36,5 +35,3 @@
     float: right;
     margin-left: 8px !important;
 }
-
-

frontend/src/component/common/HeaderTitle/styles.js

@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
     },
     headerTitle: {
         fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 500,
+        fontWeight: 'normal',
     },
     headerActions: {
         position: 'absolute',

frontend/src/component/common/common.module.scss

@@ -83,7 +83,7 @@
 
 .toggleName {
     color: #37474f !important;
-    font-weight: 500;
+    font-weight: 700;
 }
 
 .toolbar {

frontend/src/component/feature/project-select-component.jsx

@@ -29,7 +29,7 @@ class ProjectSelectComponent extends Component {
         if (filter) {
             options = projects
                 .filter(project => {
-                    return filter(project);
+                    return filter(project.id);
                 })
                 .map(formatOption);
         } else {

frontend/src/component/feature/variant/update-variant-container.jsx

@@ -16,9 +16,14 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     addVariant: variant => {
         const { featureToggle } = ownProps;
         const currentVariants = featureToggle.variants || [];
-        const stickiness = currentVariants[0].stickiness || 'default';
+        let stickiness;
+        if (currentVariants.length > 0) {
+            stickiness = currentVariants[0].stickiness || 'default';
+        } else {
+            stickiness = 'default'
+        }
         variant.stickiness = stickiness;
-        
+
         const variants = [...currentVariants, variant];
         updateWeight(variants, 1000);
         return requestUpdateFeatureToggleVariants(

frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap

@@ -264,7 +264,7 @@ exports[`renders correctly with one feature 1`] = `
         onTouchStart={[Function]}
         style={
           Object {
-            "fontWeight": "500",
+            "fontWeight": "bold",
           }
         }
         tabIndex={0}

frontend/src/component/feature/view/status-update-component.jsx

@@ -31,7 +31,7 @@ export default function StatusUpdateComponent({ stale, updateStale }) {
             renderOptions={renderOptions}
             id="feature-stale-dropdown"
             label={stale ? 'STALE' : 'ACTIVE'}
-            style={{ fontWeight: '500' }}
+            style={{ fontWeight: 'bold' }}
         />
     );
 }

frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts

@@ -36,7 +36,7 @@ export const useStyles = makeStyles(theme => ({
             display: 'none',
         },
         fontSize: '2rem',
-        fontWeight: '300',
+        fontWeight: 'normal',
     },
     logoContainer: {
         position: 'absolute',

frontend/src/themes/main-theme.js

@@ -3,6 +3,8 @@ import { createMuiTheme } from '@material-ui/core/styles';
 const theme = createMuiTheme({
     typography: {
         fontFamily: ['Sen', 'Roboto, sans-serif'],
+        fontWeightBold: '700',
+        fontWeightMedium: '700',
     },
     palette: {
         primary: {
@@ -108,8 +110,8 @@ const theme = createMuiTheme({
     fontWeight: {
         thin: '300',
         medium: '400',
-        semi: '500',
+        semi: '700',
-        bold: '600',
+        bold: '700',
     },
 });
 

frontend/src/utils/project-filter-generator.ts

@@ -23,14 +23,7 @@ export const projectFilterGenerator = (
         },
         {}
     );
-    return (project: string) => {
+    return (projectId: string) => {
-        if (admin) {
+        return admin || permissionMap[projectId]
-            return true;
-        }
-
-        if (permissionMap[project]) {
-            return true;
-        }
-        return false;
     };
 };