Skip to content

Commit

Permalink
feat(@leav/ui): add tests and refacto
Browse files Browse the repository at this point in the history
  • Loading branch information
emile committed Feb 3, 2025
1 parent 7346d50 commit 6143c43
Show file tree
Hide file tree
Showing 14 changed files with 288 additions and 186 deletions.
3 changes: 0 additions & 3 deletions apps/data-studio/src/components/LibraryHome/LibraryHome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,6 @@ const LibraryHome: FunctionComponent<ILibraryHomeProps> = ({library}) => {
defaultActionsForItem={['edit', 'remove']}
defaultPrimaryActions={['create']}
defaultMassActions={['deactivate']}
defaultViewSettings={{
pageSize: 3
}}
itemActions={[
{
label: 'Test 1',
Expand Down
90 changes: 42 additions & 48 deletions libs/ui/src/_gqlTypes/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,9 @@ export enum LogAction {
VALUE_DELETE = 'VALUE_DELETE',
VALUE_SAVE = 'VALUE_SAVE',
VERSION_PROFILE_DELETE = 'VERSION_PROFILE_DELETE',
VERSION_PROFILE_SAVE = 'VERSION_PROFILE_SAVE'
VERSION_PROFILE_SAVE = 'VERSION_PROFILE_SAVE',
fakeplugin_FAKE_PLUGIN_ACTION = 'fakeplugin_FAKE_PLUGIN_ACTION',
fakeplugin_FAKE_PLUGIN_ACTION2 = 'fakeplugin_FAKE_PLUGIN_ACTION2'
}

export type LogFilterInput = {
Expand Down Expand Up @@ -520,7 +522,8 @@ export enum PermissionsActions {
detach = 'detach',
edit_children = 'edit_children',
edit_record = 'edit_record',
edit_value = 'edit_value'
edit_value = 'edit_value',
fake_plugin_permission = 'fake_plugin_permission'
}

export enum PermissionsRelation {
Expand Down Expand Up @@ -1386,22 +1389,20 @@ export type ExplorerLinkDataQueryVariables = Exact<{

export type ExplorerLinkDataQuery = { records: { list: Array<{ id: string, whoAmI: { id: string, library: { id: string } }, property: Array<{ id_value?: string | null, payload?: { id: string, whoAmI: { id: string, label?: string | null, subLabel?: string | null, color?: string | null, preview?: IPreviewScalar | null, library: { id: string, label?: any | null } }, properties: Array<{ attributeId: string, attributeProperties: { id: string, label?: any | null, type: AttributeType, format?: AttributeFormat | null, multiple_values: boolean }, values: Array<{ linkPayload?: { id: string, whoAmI: { id: string, label?: string | null, subLabel?: string | null, color?: string | null, preview?: IPreviewScalar | null, library: { id: string, label?: any | null } } } | null } | { treePayload?: { record: { id: string, whoAmI: { id: string, label?: string | null, subLabel?: string | null, color?: string | null, preview?: IPreviewScalar | null, library: { id: string, label?: any | null } } } } | null } | { valuePayload?: any | null, valueRawPayload?: any | null }> }> } | null } | { id_value?: string | null }> }> } };

export type ExplorerAllKeysQueryVariables = Exact<{
export type ExplorerLibraryDetailsQueryVariables = Exact<{
libraryId: Scalars['ID'];
filters?: InputMaybe<Array<InputMaybe<RecordFilterInput>> | InputMaybe<RecordFilterInput>>;
multipleSort?: InputMaybe<Array<RecordSortInput> | RecordSortInput>;
searchQuery?: InputMaybe<Scalars['String']>;
}>;


export type ExplorerAllKeysQuery = { records: { list: Array<{ id: string, whoAmI: { id: string, label?: string | null, subLabel?: string | null, color?: string | null, preview?: IPreviewScalar | null, library: { id: string, label?: any | null } } }> } };
export type ExplorerLibraryDetailsQuery = { libraries?: { list: Array<{ id: string, label?: any | null }> } | null };

export type ExplorerLibraryDetailsQueryVariables = Exact<{
export type ExplorerSelectionIdsQueryVariables = Exact<{
libraryId: Scalars['ID'];
filters?: InputMaybe<Array<InputMaybe<RecordFilterInput>> | InputMaybe<RecordFilterInput>>;
}>;


export type ExplorerLibraryDetailsQuery = { libraries?: { list: Array<{ id: string, label?: any | null }> } | null };
export type ExplorerSelectionIdsQuery = { records: { list: Array<{ id: string }> } };

export type TreeDataQueryQueryVariables = Exact<{
treeId: Scalars['ID'];
Expand Down Expand Up @@ -4249,89 +4250,82 @@ export function useExplorerLinkDataLazyQuery(baseOptions?: Apollo.LazyQueryHookO
export type ExplorerLinkDataQueryHookResult = ReturnType<typeof useExplorerLinkDataQuery>;
export type ExplorerLinkDataLazyQueryHookResult = ReturnType<typeof useExplorerLinkDataLazyQuery>;
export type ExplorerLinkDataQueryResult = Apollo.QueryResult<ExplorerLinkDataQuery, ExplorerLinkDataQueryVariables>;
export const ExplorerAllKeysDocument = gql`
query ExplorerAllKeys($libraryId: ID!, $filters: [RecordFilterInput], $multipleSort: [RecordSortInput!], $searchQuery: String) {
records(
library: $libraryId
filters: $filters
multipleSort: $multipleSort
searchQuery: $searchQuery
) {
export const ExplorerLibraryDetailsDocument = gql`
query ExplorerLibraryDetails($libraryId: ID!) {
libraries(filters: {id: [$libraryId]}) {
list {
...RecordIdentity
id
label
}
}
}
${RecordIdentityFragmentDoc}`;
`;

/**
* __useExplorerAllKeysQuery__
* __useExplorerLibraryDetailsQuery__
*
* To run a query within a React component, call `useExplorerAllKeysQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerAllKeysQuery` returns an object from Apollo Client that contains loading, error, and data properties
* To run a query within a React component, call `useExplorerLibraryDetailsQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerLibraryDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useExplorerAllKeysQuery({
* const { data, loading, error } = useExplorerLibraryDetailsQuery({
* variables: {
* libraryId: // value for 'libraryId'
* filters: // value for 'filters'
* multipleSort: // value for 'multipleSort'
* searchQuery: // value for 'searchQuery'
* },
* });
*/
export function useExplorerAllKeysQuery(baseOptions: Apollo.QueryHookOptions<ExplorerAllKeysQuery, ExplorerAllKeysQueryVariables>) {
export function useExplorerLibraryDetailsQuery(baseOptions: Apollo.QueryHookOptions<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ExplorerAllKeysQuery, ExplorerAllKeysQueryVariables>(ExplorerAllKeysDocument, options);
return Apollo.useQuery<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>(ExplorerLibraryDetailsDocument, options);
}
export function useExplorerAllKeysLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAllKeysQuery, ExplorerAllKeysQueryVariables>) {
export function useExplorerLibraryDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ExplorerAllKeysQuery, ExplorerAllKeysQueryVariables>(ExplorerAllKeysDocument, options);
return Apollo.useLazyQuery<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>(ExplorerLibraryDetailsDocument, options);
}
export type ExplorerAllKeysQueryHookResult = ReturnType<typeof useExplorerAllKeysQuery>;
export type ExplorerAllKeysLazyQueryHookResult = ReturnType<typeof useExplorerAllKeysLazyQuery>;
export type ExplorerAllKeysQueryResult = Apollo.QueryResult<ExplorerAllKeysQuery, ExplorerAllKeysQueryVariables>;
export const ExplorerLibraryDetailsDocument = gql`
query ExplorerLibraryDetails($libraryId: ID!) {
libraries(filters: {id: [$libraryId]}) {
export type ExplorerLibraryDetailsQueryHookResult = ReturnType<typeof useExplorerLibraryDetailsQuery>;
export type ExplorerLibraryDetailsLazyQueryHookResult = ReturnType<typeof useExplorerLibraryDetailsLazyQuery>;
export type ExplorerLibraryDetailsQueryResult = Apollo.QueryResult<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>;
export const ExplorerSelectionIdsDocument = gql`
query ExplorerSelectionIds($libraryId: ID!, $filters: [RecordFilterInput]) {
records(library: $libraryId, filters: $filters) {
list {
id
label
}
}
}
`;

/**
* __useExplorerLibraryDetailsQuery__
* __useExplorerSelectionIdsQuery__
*
* To run a query within a React component, call `useExplorerLibraryDetailsQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerLibraryDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* To run a query within a React component, call `useExplorerSelectionIdsQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerSelectionIdsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useExplorerLibraryDetailsQuery({
* const { data, loading, error } = useExplorerSelectionIdsQuery({
* variables: {
* libraryId: // value for 'libraryId'
* filters: // value for 'filters'
* },
* });
*/
export function useExplorerLibraryDetailsQuery(baseOptions: Apollo.QueryHookOptions<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>) {
export function useExplorerSelectionIdsQuery(baseOptions: Apollo.QueryHookOptions<ExplorerSelectionIdsQuery, ExplorerSelectionIdsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>(ExplorerLibraryDetailsDocument, options);
return Apollo.useQuery<ExplorerSelectionIdsQuery, ExplorerSelectionIdsQueryVariables>(ExplorerSelectionIdsDocument, options);
}
export function useExplorerLibraryDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>) {
export function useExplorerSelectionIdsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerSelectionIdsQuery, ExplorerSelectionIdsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>(ExplorerLibraryDetailsDocument, options);
return Apollo.useLazyQuery<ExplorerSelectionIdsQuery, ExplorerSelectionIdsQueryVariables>(ExplorerSelectionIdsDocument, options);
}
export type ExplorerLibraryDetailsQueryHookResult = ReturnType<typeof useExplorerLibraryDetailsQuery>;
export type ExplorerLibraryDetailsLazyQueryHookResult = ReturnType<typeof useExplorerLibraryDetailsLazyQuery>;
export type ExplorerLibraryDetailsQueryResult = Apollo.QueryResult<ExplorerLibraryDetailsQuery, ExplorerLibraryDetailsQueryVariables>;
export type ExplorerSelectionIdsQueryHookResult = ReturnType<typeof useExplorerSelectionIdsQuery>;
export type ExplorerSelectionIdsLazyQueryHookResult = ReturnType<typeof useExplorerSelectionIdsLazyQuery>;
export type ExplorerSelectionIdsQueryResult = Apollo.QueryResult<ExplorerSelectionIdsQuery, ExplorerSelectionIdsQueryVariables>;
export const TreeDataQueryDocument = gql`
query TreeDataQuery($treeId: ID!) {
trees(filters: {id: [$treeId]}) {
Expand Down
26 changes: 19 additions & 7 deletions libs/ui/src/components/Explorer/DataView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {IExplorerData, IItemAction, IItemData} from './_types';
import {TableCell} from './TableCell';
import {IdCard} from './IdCard';
import {defaultPaginationHeight, useTableScrollableHeight} from './useTableScrollableHeight';
import {MASS_SELECTION_ALL} from '_ui/components/Explorer/_constants';
import {useColumnWidth} from './useColumnWidth';

const USELESS = '';
Expand Down Expand Up @@ -54,10 +53,16 @@ const StyledTable = styled(KitTable)`
.ant-table-cell {
min-height: ${tableHeaderMinLineHeight}px;
height: auto !important;
padding: 0 calc(var(--general-spacing-s) * 1px) 0 0;
}
}
`;

const ActionsHeaderStyledDiv = styled.div`
justify-self: right;
text-align: left;
`;

interface IDataViewProps {
dataGroupedFilteredSorted: IItemData[];
itemActions: IItemAction[];
Expand Down Expand Up @@ -101,24 +106,25 @@ export const DataView: FunctionComponent<IDataViewProps> = memo(
attributesProperties,
paginationProps,
itemActions,
selection: {onSelectionChange, selectedKeys, isMassSelectionAll}
selection: {onSelectionChange, selectedKeys, isMassSelectionAll},
iconsOnlyItemActions
}) => {
const {t} = useSharedTranslation();

const {containerRef, scrollHeight} = useTableScrollableHeight(!!paginationProps);
const {ref, getFieldColumnWidth, columnWidth} = useColumnWidth();
const {ref, getFieldColumnWidth, columnWidth, actionsColumnHeaderWidth} = useColumnWidth();

const _getActionButtons = (
actions: Array<Override<IItemAction, {callback: () => void}>>,
columnRef: typeof ref | null
): ReactNode => {
const isLessThanFourActions = actions.length < 4;

return (
<StyledActionsList ref={columnRef}>
{isLessThanFourActions ? (
<>
{actions.map(({label, icon, isDanger, callback, disabled}, actionIndex) => (
{actions.map(({label, icon, isDanger, iconOnly, callback, disabled}, actionIndex) => (
<KitButton
key={actionIndex}
title={label}
Expand All @@ -127,7 +133,7 @@ export const DataView: FunctionComponent<IDataViewProps> = memo(
danger={isDanger}
disabled={disabled}
>
{!iconsOnlyItemActions && !iconOnly && label}
{!iconsOnlyItemActions && !iconOnly && label}
</KitButton>
))}
</>
Expand Down Expand Up @@ -198,8 +204,14 @@ export const DataView: FunctionComponent<IDataViewProps> = memo(
? []
: [
{
title: t('explorer.actions'),
title: (
<ActionsHeaderStyledDiv style={{width: `${actionsColumnHeaderWidth}px`}}>
{t('explorer.actions')}
</ActionsHeaderStyledDiv>
),
dataIndex: USELESS,
align: 'right',
className: 'actions',
shouldCellUpdate: () => false,
width: columnWidth,
render: (_, item, index) =>
Expand Down Expand Up @@ -235,7 +247,7 @@ export const DataView: FunctionComponent<IDataViewProps> = memo(
// TODO: handle columns width based on attribute type/format
return (
<DataViewContainerDivStyled ref={containerRef}>
<KitTable
<StyledTable
showHeader={dataGroupedFilteredSorted.length > 0}
columns={columns}
tableLayout="fixed"
Expand Down
Loading

0 comments on commit 6143c43

Please sign in to comment.