Skip to content

Commit

Permalink
Merge pull request #402 from corypride/383-refactor-heroIcons
Browse files Browse the repository at this point in the history 
HeroIcon refactor - ResourceManagement.tsx
  • Loading branch information
@calisio
calisio authored Oct 9, 2024
2 parents d37b7c2 + d2bd79e commit b37d148
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 167 deletions.
85 changes: 36 additions & 49 deletions frontend/src/Components/ProviderCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import TealPill from './pill-labels/TealPill';
import YellowPill from './pill-labels/YellowPill';
import OutcomePill from './pill-labels/GreyPill';
import { XMarkIcon } from '@heroicons/react/24/solid';
import ULIComponent from '@/Components/ULIComponent.tsx';

export default function ProviderCard({
provider,
Expand Down Expand Up @@ -53,64 +54,50 @@ export default function ProviderCard({
<>
{provider.oidc_id !== 0 ? (
<>
<div className="tooltip" data-tip="Auth Info">
<InformationCircleIcon
className="w-4"
<ULIComponent
dataTip={'Auth Info'}
icon={InformationCircleIcon}
onClick={() =>
showAuthorizationInfo(provider)
}
/>

{provider.type !== 'kolibri' && (
<ULIComponent
dataTip={'Manage Users'}
icon={UserGroupIcon}
onClick={() =>
showAuthorizationInfo(provider)
navigate(
`/provider-users/${provider.id}`
)
}
/>
</div>
{provider.type !== 'kolibri' && (
<div
className="tooltip"
data-tip="Manage Users"
>
<UserGroupIcon
className="w-4"
onClick={() =>
navigate(
`/provider-users/${provider.id}`
)
}
/>
</div>
)}
</>
) : (
<div
className="tooltip"
data-tip="Register Provider"
>
<LinkIcon
className="w-4 "
onClick={() => oidcClient(provider)}
/>
</div>
)}
<div className="tooltip" data-tip="Edit Provider">
<PencilSquareIcon
className="w-4"
onClick={() => openEditProvider(provider)}
/>
</div>
<div
className="tooltip"
data-tip="Disable/Archive Provider"
>
<XMarkIcon
className="w-4"
onClick={() => archiveProvider(provider)}
<ULIComponent
dataTip={'Register Provider'}
icon={LinkIcon}
onClick={() => oidcClient(provider)}
/>
</div>
</>
) : (
<div className="tooltip" data-tip="Enable Provider">
<CheckCircleIcon
className="w-4"
)}
<ULIComponent
dataTip={'Edit Provider'}
icon={PencilSquareIcon}
onClick={() => openEditProvider(provider)}
/>
<ULIComponent
dataTip={'Disable'}
icon={XMarkIcon}
onClick={() => archiveProvider(provider)}
/>
</div>
</>
) : (
<ULIComponent
dataTip={'Enable Provider'}
icon={CheckCircleIcon}
onClick={() => archiveProvider(provider)}
/>
)}
</td>
</tr>
Expand Down
34 changes: 34 additions & 0 deletions frontend/src/Components/ULIComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';

type ULIComponentProps = {
tooltipClassName?: string; //for applying classes other than 'tooltip'
iconClassName?: string; //for applying classes other than 'w-4 h-4'
dataTip?: string;
onClick?: () => void;
onMouseDown?: () => void;
icon: React.ForwardRefExoticComponent<
React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
title?: string;
titleId?: string;
} & React.RefAttributes<SVGSVGElement>
>;
};

export default function ULIComponent(props: ULIComponentProps) {
// Case 1: a icon with tooltipClassName 'w-4 h-4 self-start cursor-pointer'
// Case 2: an icon that needs the default width overridden with a prop value: this will be applied to the className as well
// Case 3: an icon without 'self-start cursor-pointer'

return (
<div
className={`tooltip ${props.tooltipClassName}`}
data-tip={props.dataTip}
>
<props.icon
className={`w-4 h-4 ${props.iconClassName}`}
onClick={props.onClick}
onMouseDown={props.onMouseDown}
/>
</div>
);
}
68 changes: 27 additions & 41 deletions frontend/src/Pages/AdminManagement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import SearchBar from '../Components/inputs/SearchBar';
import { useDebounceValue } from 'usehooks-ts';
import Pagination from '@/Components/Pagination';
import API from '@/api/api';
import ULIComponent from '@/Components/ULIComponent.tsx';

export default function AdminManagement() {
const addUserModal = useRef<undefined | HTMLDialogElement>();
Expand Down Expand Up @@ -229,47 +230,32 @@ export default function AdminManagement() {
</td>
<td>
<div className="flex space-x-2 text-accent cursor-pointer">
<div
className="tooltip"
data-tip="Edit Admin"
>
<PencilIcon
className="h-4"
onClick={() => {
setTargetUser(user);
editUserModal.current?.showModal();
}}
/>
</div>
<div
className="tooltip"
data-tip="Reset Password"
>
<ArrowPathRoundedSquareIcon
className="h-4"
onClick={() => {
setTargetUser(user);
resetUserPasswordModal.current?.showModal();
}}
/>
</div>
<div
className="tooltip"
data-tip="Delete Admin"
>
{user.id !==
DEFAULT_ADMIN_ID && (
<TrashIcon
className="h-4"
onClick={() => {
setTargetUser(
user
);
deleteUserModal.current?.showModal();
}}
/>
)}
</div>
<ULIComponent
dataTip={'Edit Admin'}
onClick={() => {
setTargetUser(user);
editUserModal.current?.showModal();
}}
icon={PencilIcon}
/>
<ULIComponent
dataTip={'Edit Admin'}
onClick={() => {
setTargetUser(user);
resetUserPasswordModal.current?.showModal();
}}
icon={
ArrowPathRoundedSquareIcon
}
/>
<ULIComponent
dataTip={'Delete Admin'}
onClick={() => {
setTargetUser(user);
deleteUserModal.current?.showModal();
}}
icon={TrashIcon}
/>
</div>
</td>
</tr>
Expand Down
76 changes: 35 additions & 41 deletions frontend/src/Pages/ResourcesManagement.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import axios from 'axios';
import useSWR from 'swr';
import Modal from '../Components/Modal';
Expand All @@ -20,6 +20,7 @@ import { CloudArrowUpIcon } from '@heroicons/react/16/solid';
import DeleteForm from '../Components/forms/DeleteForm';
import { useDebounceValue } from 'usehooks-ts';
import ExternalLink from '@/Components/ExternalLink';
import ULIComponent from '@/Components/ULIComponent.tsx';

interface ToastProps {
state: ToastState;
Expand Down Expand Up @@ -490,17 +491,13 @@ const ResourceCollectionCardWithActions = ({
>
<div className="card-body gap-2">
<div className="flex justify-between">
<h3 className="card-title text-sm">
{collection.name ?? ''}
</h3>
<div className="tooltip" data-tip="Delete Collection">
<TrashIcon
className="w-4 h-4 self-start cursor-pointer"
onClick={() =>
onDeleteCollectionClick(collection.id)
}
/>
</div>
<h3 className="card-title text-sm">{collection.name}</h3>
<ULIComponent
dataTip={'Delete Collection'}
iconClassName={'self-start cursor-pointer'}
onClick={() => onDeleteCollectionClick(collection.id)}
icon={TrashIcon}
/>
</div>
{collection.links.map((link: ResourceLink, index: number) => {
const [title, url] = Object.entries(link)[0];
Expand Down Expand Up @@ -597,24 +594,22 @@ const ResourceCollectionEditor = ({
<div className="card-body gap-2">
<div className="flex justify-between">
<h3 className="card-title text-sm">{collection.name}</h3>
<div
className="tooltip ml-auto mr-2"
data-tip="Edit Collection"
>
<PencilSquareIcon
className="w-4 h-4 cursor-pointer"
<div className={'space-x-2'}>
<ULIComponent
iconClassName={'self-start cursor-pointer'}
dataTip={'Edit Collection'}
onClick={() =>
editResourceCollectionModal.current?.showModal()
}
icon={PencilSquareIcon}
/>
</div>
<div
className="tooltip self-start mr-2"
data-tip="New Link"
>
<PlusCircleIcon
className="w-4 h-4 cursor-pointer"

<ULIComponent
iconClassName={'self-start cursor-pointer'}
tooltipClassName={'self-start mr-2'}
dataTip={'New Link'}
onClick={() => addLinkModal.current?.showModal()}
icon={PlusCircleIcon}
/>
</div>
</div>
Expand Down Expand Up @@ -648,11 +643,11 @@ const ResourceCollectionEditor = ({
}
>
<td>
<Bars3Icon
className="w-4 h-4"
<ULIComponent
onMouseDown={() =>
setDraggedItem(linkIndex)
}
icon={Bars3Icon}
/>
</td>
<td>
Expand Down Expand Up @@ -688,20 +683,19 @@ const ResourceCollectionEditor = ({
/>
</td>
<td>
<div
className="tooltip"
data-tip="Delete Link"
>
<TrashIcon
className="w-4 h-4 cursor-pointer"
onClick={() => {
setActiveLinkToDelete(
linkIndex
);
deleteLinkModal.current?.showModal();
}}
/>
</div>
<ULIComponent
iconClassName={
'self-start cursor-pointer'
}
dataTip={'Delete Link'}
onClick={() => {
setActiveLinkToDelete(
linkIndex
);
deleteLinkModal.current?.showModal();
}}
icon={TrashIcon}
/>
</td>
</tr>
);
Expand Down
Loading

0 comments on commit b37d148

Please sign in to comment.