move LIT Header

Header.tsx

@@ -1,110 +0,0 @@
-import React from 'react';
-import { Disclosure } from '@headlessui/react';
-import { MenuIcon, XIcon } from '@heroicons/react/outline';
-import clsx from 'clsx';
-import { Link, useLocation } from 'react-router-dom';
-import { useApps } from 'src/services/apps';
-import _ from 'lodash';
-
-import { UserModal } from '../UserModal';
-
-const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessions/logout`;
-
-const navigation = [
-  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
-  { name: 'Users', to: '/users', requiresAdmin: true },
-  { name: 'Apps', to: '/apps', requiresAdmin: true },
-];
-
-function classNames(...classes: any[]) {
-  return classes.filter(Boolean).join(' ');
-}
-
-function filterNavigationByDashboardRole(isAdmin: boolean) {
-  if (isAdmin) {
-    return navigation;
-  }
-
-  return navigation.filter((item) => !item.requiresAdmin);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface HeaderProps {}
-
-const Header: React.FC<HeaderProps> = () => {
-  const { pathname } = useLocation();
-  const { apps, loadApps, appTableLoading } = useApps();
-
-  return (
-    <>
-      <Disclosure as="nav" className="bg-white shadow relative z-10">
-        {({ open }) => (
-          <div className="relative">
-            <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-              <div className="relative flex justify-between h-10">
-                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                  {/* Mobile menu button */}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
-                    <span className="sr-only">Open main menu</span>
-                    {open ? (
-                      <XIcon className="block h-6 w-6" aria-hidden="true" />
-                    ) : (
-                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
-                    )}
-                  </Disclosure.Button>
-                </div>
-                <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                  <Link to="/" className="flex-shrink-0 flex items-center">
-                    <img className="block lg:hidden" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
-                    <img className="hidden lg:block" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
-                  </Link>
-                  <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
-                    {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {apps.map((app) => (
-                      <Link
-                        key={app.name}
-                        to={app.slug}
-                        className={clsx(
-                          'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
-                          {
-                            'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
-                              pathname.includes(app.slug),
-                          },
-                        )}
-                      >
-                        {app.name}
-                      </Link>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <Disclosure.Panel className="sm:hidden">
-              <div className="pt-2 pb-4 space-y-1">
-                {
-                  apps.map((app) => (
-                    <Link
-                      key={app.name}
-                      to={app.slug}
-                      className={clsx(
-                        'border-transparent litbutton block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
-                        {
-                          'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.slug),
-                        },
-                      )}
-                    >
-                      {app.name}
-                    </Link>
-                  ))
-                }
-              </div>
-            </Disclosure.Panel>
-          </div>
-        )}
-      </Disclosure>
-    </>
-  );
-};
-
-export default Header;

backend/Dockerfile

@@ -15,19 +15,11 @@ ADD requirements.txt .
 # pip install the local requirements.txt
 RUN pip install -r requirements.txt
 
-<<<<<<< HEAD
 # now copy all the files in this directory to /app
-=======
-# now copy all the files in this directory to /code
->>>>>>> main
 ADD . .
 
 # Listen to port 80 at runtime
 EXPOSE 5000
 
 # Define our command to be run when launching the container
-<<<<<<< HEAD
 ENTRYPOINT [ "/app/entrypoint.sh" ]
-=======
-CMD ["gunicorn", "app:app", "-b", "0.0.0.0:5000", "--workers", "4", "--reload", "--capture-output", "--enable-stdio-inheritance", "--log-level", "DEBUG"]
->>>>>>> main

src/components/Header/Header.tsx

@@ -5,7 +5,6 @@ import { useAuth } from 'src/services/auth';
 import Gravatar from 'react-gravatar';
 import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
-import { useApps } from 'src/services/apps';
 import _ from 'lodash';
 
 import { UserModal } from '../UserModal';
@@ -39,7 +38,6 @@ const Header: React.FC<HeaderProps> = () => {
   const { logOut, currentUser, isAdmin } = useAuth();
 
   const { pathname } = useLocation();
-  const { apps, loadApps, appTableLoading } = useApps();
 
   const currentUserModalOpen = (id: any) => {
     setCurrentUserId(id);
@@ -68,10 +66,10 @@ const Header: React.FC<HeaderProps> = () => {
         {({ open }) => (
           <div className="relative">
             <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-              <div className="relative flex justify-between h-10">
+              <div className="relative flex justify-between h-16">
                 <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XIcon className="block h-6 w-6" aria-hidden="true" />
@@ -82,24 +80,24 @@ const Header: React.FC<HeaderProps> = () => {
                 </div>
                 <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                   <Link to="/" className="flex-shrink-0 flex items-center">
-                    <img className="block lg:hidden" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
-                    <img className="hidden lg:block" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
+                    <img className="block lg:hidden" src="/assets/logo-small.svg" alt="Stackspin" />
+                    <img className="hidden lg:block" src="/assets/logo.svg" alt="Stackspin" />
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {apps.map((app) => (
+                    {navigationItems.map((item) => (
                       <Link
-                        key={app.name}
-                        to={app.slug}
+                        key={item.name}
+                        to={item.to}
                         className={clsx(
-                          'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
+                          'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
                           {
-                            'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
-                              pathname.includes(app.slug),
+                            'border-primary-500 text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                              pathname.includes(item.to),
                           },
                         )}
                       >
-                        {app.name}
+                        {item.name}
                       </Link>
                     ))}
                   </div>
@@ -161,18 +159,20 @@ const Header: React.FC<HeaderProps> = () => {
 
             <Disclosure.Panel className="sm:hidden">
               <div className="pt-2 pb-4 space-y-1">
-                {apps.map((app) => (
+                {navigation.map((item) => (
                   <Link
-                    key={app.name}
-                    to={app.slug}
+                    key={item.name}
+                    to={item.to}
                     className={clsx(
-                      'border-transparent litbutton block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
+                      'border-transparent text-gray-500 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
                       {
-                        'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.slug),
+                        'bg-primary-50 border-primary-400 text-primary-700 block pl-3 pr-4 py-2': pathname.includes(
+                          item.to,
+                        ),
                       },
                     )}
                   >
-                    {app.name}
+                    {item.name}
                   </Link>
                 ))}
               </div>

src/components/Header/HeaderLIT.tsx

@@ -0,0 +1,191 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { Disclosure, Menu, Transition } from '@headlessui/react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import { useAuth } from 'src/services/auth';
+import Gravatar from 'react-gravatar';
+import { Link, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+import { useApps } from 'src/services/apps';
+import _ from 'lodash';
+
+import { UserModal } from '../UserModal';
+
+const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessions/logout`;
+
+const navigation = [
+  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
+  { name: 'Users', to: '/users', requiresAdmin: true },
+  { name: 'Apps', to: '/apps', requiresAdmin: true },
+];
+
+function classNames(...classes: any[]) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function filterNavigationByDashboardRole(isAdmin: boolean) {
+  if (isAdmin) {
+    return navigation;
+  }
+
+  return navigation.filter((item) => !item.requiresAdmin);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface HeaderProps {}
+
+const HeaderLIT: React.FC<HeaderProps> = () => {
+  const [currentUserModal, setCurrentUserModal] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState(null);
+  const { logOut, currentUser, isAdmin } = useAuth();
+
+  const { pathname } = useLocation();
+  const { apps, loadApps, appTableLoading } = useApps();
+
+  const currentUserModalOpen = (id: any) => {
+    setCurrentUserId(id);
+    setCurrentUserModal(true);
+  };
+
+  const currentUserModalClose = () => {
+    setCurrentUserModal(false);
+    setCurrentUserId(null);
+  };
+
+  const navigationItems = filterNavigationByDashboardRole(isAdmin);
+
+  const signOutUrl = useMemo(() => {
+    const { hostname } = window.location;
+    // If we are developing locally, we need to use the init cluster's public URL
+    if (hostname === 'localhost') {
+      return HYDRA_LOGOUT_URL;
+    }
+    return `https://${hostname.replace(/^dashboard/, 'sso')}/oauth2/sessions/logout`;
+  }, []);
+
+  return (
+    <>
+      <Disclosure as="nav" className="bg-white shadow relative z-10">
+        {({ open }) => (
+          <div className="relative">
+            <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+              <div className="relative flex justify-between h-10">
+                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                  {/* Mobile menu button */}
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
+                    <span className="sr-only">Open main menu</span>
+                    {open ? (
+                      <XIcon className="block h-6 w-6" aria-hidden="true" />
+                    ) : (
+                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                    )}
+                  </Disclosure.Button>
+                </div>
+                <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+                  <Link to="/" className="flex-shrink-0 flex items-center">
+                    <img className="block lg:hidden" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
+                    <img className="hidden lg:block" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
+                  </Link>
+                  <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                    {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
+                    {apps.map((app) => (
+                      <Link
+                        key={app.name}
+                        to={app.slug}
+                        className={clsx(
+                          'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
+                          {
+                            'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                              pathname.includes(app.slug),
+                          },
+                        )}
+                      >
+                        {app.name}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+                <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                  {/* Profile dropdown */}
+                  <Menu as="div" className="ml-3 relative">
+                    <div>
+                      <Menu.Button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                        <span className="sr-only">Open user menu</span>
+                        <span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500 overflow-hidden">
+                          <Gravatar email={currentUser?.email || undefined} size={32} rating="pg" protocol="https://" />
+                        </span>
+                      </Menu.Button>
+                    </div>
+                    <Transition
+                      as={Fragment}
+                      enter="transition ease-out duration-200"
+                      enterFrom="transform opacity-0 scale-95"
+                      enterTo="transform opacity-100 scale-100"
+                      leave="transition ease-in duration-75"
+                      leaveFrom="transform opacity-100 scale-100"
+                      leaveTo="transform opacity-0 scale-95"
+                    >
+                      <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Item>
+                          {({ active }) => (
+                            <a
+                              onClick={() => currentUserModalOpen(currentUser?.id)}
+                              className={classNames(
+                                active ? 'bg-gray-100 cursor-pointer' : '',
+                                'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
+                              )}
+                            >
+                              Configure profile
+                            </a>
+                          )}
+                        </Menu.Item>
+                        <Menu.Item>
+                          {({ active }) => (
+                            <a
+                              onClick={() => logOut()}
+                              href={signOutUrl}
+                              className={classNames(
+                                active ? 'bg-gray-100 cursor-pointer' : '',
+                                'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
+                              )}
+                            >
+                              Sign out
+                            </a>
+                          )}
+                        </Menu.Item>
+                      </Menu.Items>
+                    </Transition>
+                  </Menu>
+                </div>
+              </div>
+            </div>
+
+            <Disclosure.Panel className="sm:hidden">
+              <div className="pt-2 pb-4 space-y-1">
+                {apps.map((app) => (
+                  <Link
+                    key={app.name}
+                    to={app.slug}
+                    className={clsx(
+                      'border-transparent litbutton block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
+                      {
+                        'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.slug),
+                      },
+                    )}
+                  >
+                    {app.name}
+                  </Link>
+                ))}
+              </div>
+            </Disclosure.Panel>
+          </div>
+        )}
+      </Disclosure>
+
+      {currentUserModal && (
+        <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      )}
+    </>
+  );
+};
+
+export default HeaderLIT;

src/components/Header/index.ts

@@ -1 +1,2 @@
 export { default as Header } from './Header';
+export { default as HeaderLIT } from './HeaderLIT';

src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Header } from '../Header';
+import { HeaderLIT } from '../Header';
 
 const Layout: React.FC = ({ children }) => {
   return (
     <>
-      <Header />
+      <HeaderLIT />
 
       {children}
     </>

src/components/index.ts

@@ -1,5 +1,5 @@
 export { Layout } from './Layout';
-export { Header } from './Header';
+export { Header, HeaderLIT } from './Header';
 export { Table } from './Table';
 export { Banner } from './Banner';
 export { Tabs } from './Tabs';