URO-28, URO-126, URO-127, URO-142: Fixed logout, authed collections, aligned topbar, created canonical build configuration file.

.env

@@ -1,6 +1,8 @@
 # Base URL path for the enviroment
 PUBLIC_URL = '/dev/'
 
+# Name of enviroment for build
+REACT_APP_KBASE_ENV=ci-europa
 # Domain of enviroment for build
 REACT_APP_KBASE_DOMAIN=ci-europa.kbase.us
 # The following must be a subdomain of REACT_APP_KBASE_DOMAIN

Dockerfile

@@ -2,7 +2,7 @@ FROM nginx:stable-alpine3.17-slim
 USER root
 
 ## Install sed command needed for startup script
-RUN apk add --no-cache sed
+RUN apk add --no-cache sed jq
 
 ## Copy built static files for all enviroments to image
 COPY ./deploy /deploy/

config.json

@@ -0,0 +1,33 @@
+{
+  "environments": {
+    "appdev": {
+      "domain": "appdev.kbase.us",
+      "legacy": "legacy.appdev.kbase.us",
+      "public_url": "/"
+    },
+
+    "ci": {
+      "domain": "ci.kbase.us",
+      "legacy": "legacy.kbase.us",
+      "public_url": "/"
+    },
+
+    "ci-europa": {
+      "domain": "ci-europa.kbase.us",
+      "legacy": "legacy.ci-europa.kbase.us",
+      "public_url": "/"
+    },
+
+    "narrative-dev": {
+      "domain": "narrative-dev.kbase.us",
+      "legacy": "legacy.narrative-dev.kbase.us",
+      "public_url": "/"
+    },
+
+    "production": {
+      "domain": "narrative.kbase.us",
+      "legacy": "legacy.narrative.kbase.us",
+      "public_url": "/"
+    }
+  }
+}

scripts/build_deploy.sh

@@ -1,21 +1,20 @@
 #!/usr/bin/env bash
 
+# Here we are using bash "here strings"
+IFS=$'\n' read  -d '' -r -a enviromentsConfig  <<< "$(jq -r '.environments
+     | keys[] as $k
+     | [($k), (.[$k]["domain"]) , (.[$k]["legacy"]) , (.[$k]["public_url"])]
+     | join(" ")' config.json)"
 
-declare -a enviroments=(
-# "<name>         <domain>                <legacy-domain>               <public-url>"
-  "ci             ci.kbase.us             legacy.kbase.us                /"
-  "ci-europa      ci-europa.kbase.us      legacy.ci-europa.kbase.us      /"
-  "narrative-dev  narrative-dev.kbase.us  legacy.narrative-dev.kbase.us  /"
-)
+for enviro in "${enviromentsConfig[@]}"; do
+  read -a envConf <<< "$enviro"
+  echo "Building static files for enviroment \"${envConf[0]}\"...";
 
-for enviro in "${enviroments[@]}"; do
-  read -a strarr <<< "$enviro"
-  echo "Building static files for enviroment \"${strarr[0]}\"...";
-
-  BUILD_PATH="./deploy/${strarr[0]}" \
-  REACT_APP_KBASE_DOMAIN="${strarr[1]}" \
-  REACT_APP_KBASE_LEGACY_DOMAIN="${strarr[2]}" \
-  PUBLIC_URL="${strarr[3]}" \
+  BUILD_PATH="./deploy/${envConf[0]}" \
+  REACT_APP_KBASE_ENV="${envConf[0]}" \
+  REACT_APP_KBASE_DOMAIN="${envConf[1]}" \
+  REACT_APP_KBASE_LEGACY_DOMAIN="${envConf[2]}" \
+  PUBLIC_URL="${envConf[3]}" \
   npm run build && \
-  echo "Built static files for enviroment \"${strarr[0]}\".";
+  echo "Built static files for enviroment \"${envConf[0]}\".";
 done

src/app/App.tsx

@@ -33,7 +33,7 @@ const useInitApp = () => {
   useEffect(() => {
     // eslint-disable-next-line no-console
     console.info('Static Deploy Domain:', process.env.REACT_APP_KBASE_DOMAIN);
-    dispatch(setEnvironment('ci-europa'));
+    dispatch(setEnvironment(process.env.REACT_APP_KBASE_ENV ?? 'unknown'));
   }, [dispatch]);
 
   return { isLoading: !initialized };

src/app/Routes.tsx

@@ -64,9 +64,15 @@ const Routes: FC = () => {
 
       {/* Collections */}
       <Route path="/collections">
-        <Route index element={<CollectionsList />} />
-        <Route path={detailPath} element={<CollectionDetail />} />
-        <Route path={detailDataProductPath} element={<CollectionDetail />} />
+        <Route index element={<Authed element={<CollectionsList />} />} />
+        <Route
+          path={detailPath}
+          element={<Authed element={<CollectionDetail />} />}
+        />
+        <Route
+          path={detailDataProductPath}
+          element={<Authed element={<CollectionDetail />} />}
+        />
         <Route path="*" element={<PageNotFound />} />
       </Route>
 

src/app/store.ts

@@ -1,4 +1,4 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { Action, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { baseApi } from '../common/api';
 import auth from '../features/auth/authSlice';
 import collections from '../features/collections/collectionsSlice';
@@ -9,20 +9,30 @@ import navigator from '../features/navigator/navigatorSlice';
 import params from '../features/params/paramsSlice';
 import profile from '../features/profile/profileSlice';
 
+const everyReducer = combineReducers({
+  auth,
+  collections,
+  count,
+  icons,
+  layout,
+  navigator,
+  params,
+  profile,
+  [baseApi.reducerPath]: baseApi.reducer,
+});
+
+const rootReducer: typeof everyReducer = (state, action) => {
+  if (action.type === 'RESET_STATE') {
+    return everyReducer(undefined, action);
+  }
+
+  return everyReducer(state, action);
+};
+
 const createStore = <T>(additionalOptions?: T) => {
   return configureStore({
     devTools: true,
-    reducer: {
-      auth,
-      collections,
-      count,
-      icons,
-      layout,
-      navigator,
-      params,
-      profile,
-      [baseApi.reducerPath]: baseApi.reducer,
-    },
+    reducer: rootReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().concat(baseApi.middleware),
     ...additionalOptions,
@@ -35,6 +45,8 @@ export const store = createStore();
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
+export const resetStateAction = (): Action => ({ type: 'RESET_STATE' });
+
 export const createTestStore = (preloadedState: Partial<RootState> = {}) => {
   return createStore({ preloadedState: preloadedState });
 };

src/common/components/Dropdown.module.scss

@@ -1,7 +1,17 @@
 .dropdown {
   // these prefixed global classnames are inserted by react-select
+
+  // uses the a11-compatible visually hidden props as per
+  // https://www.a11yproject.com/posts/how-to-hide-content/
+  // this preserves element selectability
   :global(.react-select__value-container) {
-    display: none;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 0;
   }
 
   :global(.react-select__indicator-separator) {

src/common/components/Select.tsx

@@ -12,6 +12,7 @@ export interface SelectOption {
   label: ReactNode;
   value: string | number;
   icon?: ReactNode;
+  fullWidth?: boolean; // ignores icon padding when icons are present
 }
 
 export type OptionsArray = OptionsOrGroups<
@@ -104,9 +105,9 @@ export const Select: FC<SelectProps> = (props) => {
   const handleFormatOptionLabel = (data: SelectOption) => {
     return (
       <span className={classes.option_content}>
-        {hasIcons && (
+        {hasIcons && !data.fullWidth ? (
           <span className={classes.option_content_icon}>{data.icon}</span>
-        )}
+        ) : null}
         {data.label}
       </span>
     );

src/features/layout/TopBar.module.scss

@@ -62,8 +62,23 @@
   }
 }
 
+.login_prompt,
+.login_prompt:visited {
+  color: use-color("primary");
+  display: flex;
+  flex-flow: column nowrap;
+  text-align: center;
+  text-decoration: none;
+  width: 77px;
+
+  svg {
+    font-size: 24px;
+  }
+}
+
 .login_menu {
   display: block;
+  padding: 4px;
   width: 77px;
 
   .login_menu_username {
@@ -74,13 +89,18 @@
     align-items: center;
     color: use_color("black");
     display: flex;
+    gap: 5px;
     justify-content: left;
-    padding: 4px;
 
     .login_menu_icon {
       color: use_color("mid-blue");
       font-size: 30px;
       margin-right: 5px;
     }
   }
+
+  .name_item {
+    text-align: center;
+    width: 100%;
+  }
 }