Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

footer refactor #2

Merged
merged 2 commits into from
Nov 15, 2023
Merged

footer refactor #2

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f8a7b8
footer refactor
Pilu84 Nov 10, 2023
f31b94b
changes after review
Pilu84 Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 52 additions & 50 deletions web/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { rootReducer } from './redux';
import Footer from "./Footer";
import Service from "./Service";
import FilterBar from "./FilterBar";
import { Footer2 } from "./Footer2";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Call it Footer. We either merge your PR or not. This defensive approach just makes the change messy.


function App() {
const capacitorClient = new CapacitorClient(
Expand All @@ -18,57 +19,58 @@ function App() {

return (
<>
<APIBackend capacitorClient={capacitorClient} store={store}/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a format change. The things inside <> are moved one to the right.

Please remove this so the PR clearly shows what the material changes inside.

You can file a formatting PR separately.

<StreamingBackend capacitorClient={capacitorClient} store={store}/>
<div className="max-w-6xl mx-auto">
<div className="my-16">
<FilterBar
filters={[
{
property: "Owner",
value: "backend-team"
},
{
property: "App",
value: "*app*"
},
]}
/>
<APIBackend capacitorClient={capacitorClient} store={store} />
<StreamingBackend capacitorClient={capacitorClient} store={store} />
<div className="max-w-6xl mx-auto">
<div className="my-16">
<FilterBar
filters={[
{
property: "Owner",
value: "backend-team"
},
{
property: "App",
value: "*app*"
},
]}
/>
</div>
<div className="grid grid-cols-1 gap-y-4">
<Service
stack={{
deployment: {
pods: [
{ name: "xxx", status: "Running" },
{ name: "yyy", status: "Running" }
]
},
service: {
name: "my-app",
namespace: "default"
}
}}
alerts={[]}
/>
<Service
stack={{
deployment: {
pods: [
{ name: "zzz", status: "Running" },
{ name: "uuu", status: "Running" }
]
},
service: {
name: "your-app",
namespace: "default"
}
}}
alerts={[]}
/>
</div>
</div>
<div className="grid grid-cols-1 gap-y-4">
<Service
stack={{
deployment: {
pods: [
{name: "xxx", status: "Running"},
{name: "yyy", status: "Running"}
]
},
service: {
name: "my-app",
namespace: "default"
}
}}
alerts={[]}
/>
<Service
stack={{
deployment: {
pods: [
{name: "zzz", status: "Running"},
{name: "uuu", status: "Running"}
]
},
service: {
name: "your-app",
namespace: "default"
}
}}
alerts={[]}
/>
</div>
</div>
<Footer store={store} />
{/* <Footer store={store} /> */}
<Footer2 store={store} />
</>
);
}
Expand Down
70 changes: 70 additions & 0 deletions web/src/Footer2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/24/outline';
import React, { memo, useState } from 'react';
import { useCallback } from 'react';
import { GitRepositories, Kustomizations } from './FluxState';
import { SideBar } from './Sidebar';


export const Footer2 = memo(function Footer2(props) {

const { store } = props

const [expanded, setExpanded] = useState(false);
const [fluxState, setFluxState] = useState(store.getState().fluxState);
store.subscribe(() => setFluxState(store.getState().fluxState))


// https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
const navigationDefault = [
{ name: 'Kustomizations', href: '#', count: 10 },
{ name: 'Sources', href: '#', count: '5'},
{ name: 'Runtime', href: '#' },
{ name: 'Logs', href: '#' },
]

const [selected, setSelected] = useState('Kustomizations');

const handlerSelect = useCallback((selectedNav) => {
setSelected(selectedNav);
},
[setSelected]
)

return (
<div aria-labelledby="slide-over-title" role="dialog" aria-modal="true" className={`fixed inset-x-0 bottom-0 bg-neutral-200 border-t border-neutral-300 ${expanded ? 'h-2/5' : 'h-16'}`}>
<div className={`flex justify-between w-full ${expanded ? '' : 'h-full'}`}>
<div className='h-auto w-full cursor-pointer'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You use 4 spaces, the codebase uses 2 I think. Please adjust the PR.
(Also if you stick to the Footer component it is easier to follow the changes.)

onClick={() => setExpanded(!expanded)}>

</div>
<div className='px-4 py-2'>
<button
onClick={() => setExpanded(!expanded)}
type="button" className="ml-1 rounded-md hover:bg-white hover:text-black text-neutral-700 p-1">
<span className="sr-only">{expanded ? 'Close panel' : 'Open panel'}</span>
{expanded ? <ArrowDownIcon className="h-5 w-5" aria-hidden="true" /> : <ArrowUpIcon className="h-5 w-5" aria-hidden="true" />}
</button>
</div>
</div>
{expanded &&
<div className="flex w-full h-full">
<div className="w-48 px-4 border-r border-neutral-300">
<SideBar navigation={navigationDefault} selectedMenu={handlerSelect} selected={selected}/>
</div>

<div className="w-full px-4 overflow-x-hidden overflow-y-scroll mb-20">
<div className="w-full max-w-6xl mx-auto flex-col h-full">
{ selected === "Kustomizations" &&
<Kustomizations fluxState={fluxState} />
}
{ selected === "Sources" &&
<GitRepositories gitRepositories={fluxState.gitRepositories} />
}
</div>
</div>
</div>
}
</div>
)

});
39 changes: 39 additions & 0 deletions web/src/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React, { memo } from 'react';

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too many new lines.



export const SideBar = memo(function SideBar(props) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea to move the Sidebar into its own file. But please remove the original Sidebar as well in this change.


function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}

const { navigation, selectedMenu, selected } = props;

return (
<nav className="flex flex-1 flex-col" aria-label="Sidebar">
<ul className="space-y-1">
{navigation.map((item) => (
<li key={item.name}>
<a
href={item.href}
className={classNames(item.name === selected ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md')}
onClick={() => selectedMenu(item.name)}
>
{item.name}
{item.count ? (
<span
className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-neutral-700 ring-1 ring-inset ring-neutral-200"
aria-hidden="true"
>
{item.count}
</span>
) : null}
</a>
</li>
))}
</ul>
</nav>
);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a new line at the end of each file.