Add a feature flag to select the desired UI design

chart/kubeapps/values.yaml

@@ -699,3 +699,5 @@ featureFlags:
   # - name: second-cluster
   #   apiServiceURL: https://second-cluster:6443
   #   certificateAuthorityData: LS0tLS1CRUdJ...
+  # ui is a WIP feature for the migration to Clarity design system.
+  ui: hex

dashboard/Dockerfile

@@ -6,6 +6,7 @@ RUN yarn install --frozen-lockfile
 
 RUN mkdir /app/src
 RUN curl -L https://unpkg.com/@bitnami/hex@3.2.0/dist/hex.min.css > /app/src/hex.min.css
+RUN curl -L https://unpkg.com/@clr/ui@3.1.4/clr-ui.min.css > /app/src/clr-ui.min.css
 
 COPY . /app
 RUN yarn run build

dashboard/public/config.json

@@ -5,6 +5,8 @@
   "oauthLoginURI": "/oauth2/start",
   "oauthLogoutURI": "/oauth2/sign_out",
   "featureFlags": {
-    "operators": true
+    "operators": true,
+    "additionalClusters": [],
+    "ui": "hex"
   }
 }

dashboard/src/components/AppList/AppList.test.tsx

@@ -23,7 +23,7 @@ const defaultProps: any = {
   getCustomResources: jest.fn(),
   customResources: [],
   csvs: [],
-  featureFlags: { operators: true, additionalClusters: [] },
+  featureFlags: { operators: true, additionalClusters: [], ui: "hex" },
 };
 
 context("when changing props", () => {

dashboard/src/components/Catalog/Catalog.test.tsx

@@ -28,7 +28,7 @@ const defaultProps = {
   kubeappsNamespace: "kubeapps",
   csvs: [],
   getCSVs: jest.fn(),
-  featureFlags: { operators: false, additionalClusters: [] },
+  featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
 };
 
 it("propagates the filter from the props", () => {
@@ -66,7 +66,7 @@ describe("componentDidMount", () => {
         {...defaultProps}
         getCSVs={getCSVs}
         namespace={namespace}
-        featureFlags={{ operators: true, additionalClusters: [] }}
+        featureFlags={{ ...defaultProps.featureFlags, operators: true }}
       />,
     );
     expect(getCSVs).toHaveBeenCalledWith(namespace);
@@ -77,7 +77,11 @@ describe("componentDidUpdate", () => {
   it("re-fetches csvs if the namespace changes", () => {
     const getCSVs = jest.fn();
     const wrapper = shallow(
-      <Catalog {...defaultProps} getCSVs={getCSVs} featureFlags={{ operators: true, additionalClusters: [] }} />,
+      <Catalog
+        {...defaultProps}
+        getCSVs={getCSVs}
+        featureFlags={{ ...defaultProps.featureFlags, operators: true }}
+      />,
     );
     wrapper.setProps({ namespace: "a-different-one" });
     expect(getCSVs).toHaveBeenCalledWith("a-different-one");

dashboard/src/components/Header/Header.test.tsx

@@ -18,6 +18,7 @@ const defaultProps = {
   setNamespace: jest.fn(),
   createNamespace: jest.fn(),
   getNamespace: jest.fn(),
+  featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
 };
 it("renders the header links and titles", () => {
   const wrapper = shallow(<Header {...defaultProps} />);
@@ -38,7 +39,10 @@ it("renders the header links and titles", () => {
 describe("settings", () => {
   it("renders settings", () => {
     const wrapper = shallow(
-      <Header {...defaultProps} featureFlags={{ operators: false, additionalClusters: [] }} />,
+      <Header
+        {...defaultProps}
+        featureFlags={{ ...defaultProps.featureFlags, operators: false }}
+      />,
     );
     const settingsbar = wrapper.find(".header__nav__submenu").first();
     const items = settingsbar.find("NavLink").map(p => p.props());
@@ -54,7 +58,7 @@ describe("settings", () => {
 
   it("renders operators link", () => {
     const wrapper = shallow(
-      <Header {...defaultProps} featureFlags={{ operators: true, additionalClusters: [] }} />,
+      <Header {...defaultProps} featureFlags={{ ...defaultProps.featureFlags, operators: true }} />,
     );
     const settingsbar = wrapper.find(".header__nav__submenu").first();
     const items = settingsbar.find("NavLink").map(p => p.props());

dashboard/src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import { app } from "../../shared/url";
 import "./Header.css";
 import HeaderLink from "./HeaderLink";
 import NamespaceSelector from "./NamespaceSelector";
+import UISelector from "./UISelector";
 
 interface IHeaderProps {
   authenticated: boolean;
@@ -31,10 +32,6 @@ interface IHeaderState {
 }
 
 class Header extends React.Component<IHeaderProps, IHeaderState> {
-  public static defaultProps = {
-    featureFlags: { operators: false, additionalClusters: [] },
-  };
-
   constructor(props: any) {
     super(props);
 
@@ -61,6 +58,7 @@ class Header extends React.Component<IHeaderProps, IHeaderState> {
       authenticated: showNav,
       createNamespace,
       getNamespace,
+      featureFlags,
     } = this.props;
     const header = `header ${this.state.mobileOpen ? "header-open" : ""}`;
     const submenu = `header__nav__submenu ${
@@ -70,6 +68,7 @@ class Header extends React.Component<IHeaderProps, IHeaderState> {
     const reposPath = `/config/ns/${cluster.currentNamespace}/repos`;
     return (
       <section className="gradient-135-brand type-color-reverse type-color-reverse-anchor-reset">
+        <UISelector UI={featureFlags.ui} />
         <div className="container">
           <header className={header}>
             <div className="header__logo">

dashboard/src/components/Header/UISelector/Clarity.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+import "../../../clr-ui.min.css";
+
+const CSSSelector: React.FC = () => null;
+
+export default CSSSelector;

dashboard/src/components/Header/UISelector/HEx.tsx

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+import "../../../hex.min.css";
+
+const CSSSelector: React.FC = () => null;
+
+export default CSSSelector;

dashboard/src/components/Header/UISelector/UISelector.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const HEx = React.lazy(() => import("./HEx"));
+const Clarity = React.lazy(() => import("./Clarity"));
+
+export interface IUISelectorProps {
+  UI: string;
+}
+
+const UISelector: React.FC<IUISelectorProps> = props => (
+  <React.Suspense fallback={null}>
+    {props.UI === "hex" && <HEx />}
+    {props.UI === "clarity" && <Clarity />}
+  </React.Suspense>
+);
+
+export default UISelector;

dashboard/src/components/Header/UISelector/index.tsx

@@ -0,0 +1,3 @@
+import UISelector from "./UISelector";
+
+export default UISelector;

dashboard/src/containers/HeaderContainer/HeaderContainer.test.tsx

@@ -25,7 +25,7 @@ const defaultState = {
   auth: defaultAuthState,
   router: { location: emptyLocation },
   config: {
-    featureFlags: { operators: true, additionalClusters: [] },
+    featureFlags: { operators: true, additionalClusters: [], ui: "hex" },
   },
   clusters: {
     currentCluster: "default",

dashboard/src/containers/LoginFormContainer/LoginFormContainer.test.tsx

@@ -34,7 +34,7 @@ const makeStore = (
     namespace: "",
     appVersion: "",
     oauthLogoutURI: "",
-    featureFlags: { operators: false, additionalClusters: [] },
+    featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
   };
   return mockStore({ auth, config });
 };

dashboard/src/containers/RoutesContainer/Routes.tsx

@@ -59,7 +59,7 @@ interface IRoutesProps extends IRouteComponentPropsAndRouteProps {
 
 class Routes extends React.Component<IRoutesProps> {
   public static defaultProps = {
-    featureFlags: { operators: false, additionalClusters: [] },
+    featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
   };
   public render() {
     const reposPath = "/config/ns/:namespace/repos";

dashboard/src/index.scss

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700|Hind:300,400,700");
-@import "hex.min.css";
 
 body {
   margin: 0;

dashboard/src/reducers/cluster.test.ts

@@ -191,14 +191,17 @@ describe("clusterReducer", () => {
       oauthLogoutURI: "",
       featureFlags: {
         operators: false,
-        additionalClusters: [{
-          name: "additionalCluster1",
-          apiServiceURL: "https://not-used-by-dashboard.example.com/",
-        }, {
-          name: "additionalCluster2",
-          apiServiceURL: "https://not-used-by-dashboard.example.com/",
-        }],
-      }
+        additionalClusters: [
+          {
+            name: "additionalCluster1",
+            apiServiceURL: "https://not-used-by-dashboard.example.com/",
+          },
+          {
+            name: "additionalCluster2",
+            apiServiceURL: "https://not-used-by-dashboard.example.com/",
+          },
+        ],
+      },
     } as IConfig;
     it("adds the additional clusters to the clusters state", () => {
       expect(

dashboard/src/reducers/cluster.ts

@@ -137,7 +137,7 @@ const clusterReducer = (
         clusters[cluster.name] = {
           currentNamespace: "default",
           namespaces: [],
-        }
+        };
       });
       return {
         ...state,

dashboard/src/reducers/config.ts

@@ -14,7 +14,7 @@ const initialState: IConfigState = {
   authProxyEnabled: false,
   oauthLoginURI: "",
   oauthLogoutURI: "",
-  featureFlags: { operators: true, additionalClusters: [] },
+  featureFlags: { operators: true, additionalClusters: [], ui: "hex" },
 };
 
 const configReducer = (state: IConfigState = initialState, action: ConfigAction): IConfigState => {

dashboard/src/shared/Auth.test.ts

@@ -174,7 +174,7 @@ describe("Auth", () => {
         oauthLogoutURI,
         namespace: "ns",
         appVersion: "2",
-        featureFlags: { operators: false, additionalClusters: [] },
+        featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
       });
 
       expect(mockedAssign).toBeCalledWith(oauthLogoutURI);
@@ -188,7 +188,7 @@ describe("Auth", () => {
         oauthLogoutURI: "",
         namespace: "ns",
         appVersion: "2",
-        featureFlags: { operators: false, additionalClusters: [] },
+        featureFlags: { operators: false, additionalClusters: [], ui: "hex" },
       });
 
       expect(mockedAssign).toBeCalledWith("/oauth2/sign_out");

dashboard/src/shared/Config.ts

@@ -9,6 +9,7 @@ interface IAdditionalCluster {
 export interface IFeatureFlags {
   operators: boolean;
   additionalClusters: IAdditionalCluster[];
+  ui: string;
 }
 
 // IConfig is the configuration for Kubeapps