// SPDX-License-Identifier: AGPL-3.0
import * as _ from "lodash";
-import { FilterBuilder } from "./filter-builder";
-import { OrderBuilder } from "./order-builder";
import { AxiosInstance, AxiosPromise } from "axios";
import { Resource } from "~/models/resource";
export interface ListArguments {
limit?: number;
offset?: number;
- filters?: FilterBuilder;
- order?: OrderBuilder;
+ filters?: string;
+ order?: string;
select?: string[];
distinct?: boolean;
count?: string;
const { filters, order, ...other } = args;
const params = {
...other,
- filters: filters ? filters.serialize() : undefined,
- order: order ? order.getOrder() : undefined
+ filters: filters ? `[${filters}]` : undefined,
+ order: order ? order : undefined
};
return CommonResourceService.defaultResponse(
this.serverApi
let filters: FilterBuilder;
beforeEach(() => {
- filters = FilterBuilder.create();
+ filters = new FilterBuilder();
});
it("should add 'equal' rule", () => {
expect(
- filters.addEqual("etag", "etagValue").serialize()
- ).toEqual(`[["etag","=","etagValue"]]`);
+ filters.addEqual("etag", "etagValue").getFilters()
+ ).toEqual(`["etag","=","etagValue"]`);
});
it("should add 'like' rule", () => {
expect(
- filters.addLike("etag", "etagValue").serialize()
- ).toEqual(`[["etag","like","%etagValue%"]]`);
+ filters.addLike("etag", "etagValue").getFilters()
+ ).toEqual(`["etag","like","%etagValue%"]`);
});
it("should add 'ilike' rule", () => {
expect(
- filters.addILike("etag", "etagValue").serialize()
- ).toEqual(`[["etag","ilike","%etagValue%"]]`);
+ filters.addILike("etag", "etagValue").getFilters()
+ ).toEqual(`["etag","ilike","%etagValue%"]`);
});
it("should add 'is_a' rule", () => {
expect(
- filters.addIsA("etag", "etagValue").serialize()
- ).toEqual(`[["etag","is_a","etagValue"]]`);
+ filters.addIsA("etag", "etagValue").getFilters()
+ ).toEqual(`["etag","is_a","etagValue"]`);
});
it("should add 'is_a' rule for set", () => {
expect(
- filters.addIsA("etag", ["etagValue1", "etagValue2"]).serialize()
- ).toEqual(`[["etag","is_a",["etagValue1","etagValue2"]]]`);
+ filters.addIsA("etag", ["etagValue1", "etagValue2"]).getFilters()
+ ).toEqual(`["etag","is_a",["etagValue1","etagValue2"]]`);
});
it("should add 'in' rule", () => {
expect(
- filters.addIn("etag", "etagValue").serialize()
- ).toEqual(`[["etag","in","etagValue"]]`);
+ filters.addIn("etag", "etagValue").getFilters()
+ ).toEqual(`["etag","in","etagValue"]`);
});
it("should add 'in' rule for set", () => {
expect(
- filters.addIn("etag", ["etagValue1", "etagValue2"]).serialize()
- ).toEqual(`[["etag","in",["etagValue1","etagValue2"]]]`);
+ filters.addIn("etag", ["etagValue1", "etagValue2"]).getFilters()
+ ).toEqual(`["etag","in",["etagValue1","etagValue2"]]`);
});
it("should add multiple rules", () => {
filters
.addIn("etag", ["etagValue1", "etagValue2"])
.addEqual("href", "hrefValue")
- .serialize()
- ).toEqual(`[["etag","in",["etagValue1","etagValue2"]],["href","=","hrefValue"]]`);
- });
-
- it("should concatenate multiple builders", () => {
- expect(
- filters
- .concat(FilterBuilder.create().addIn("etag", ["etagValue1", "etagValue2"]))
- .concat(FilterBuilder.create().addEqual("href", "hrefValue"))
- .serialize()
- ).toEqual(`[["etag","in",["etagValue1","etagValue2"]],["href","=","hrefValue"]]`);
+ .getFilters()
+ ).toEqual(`["etag","in",["etagValue1","etagValue2"]],["href","=","hrefValue"]`);
});
it("should add attribute prefix", () => {
- expect(FilterBuilder
- .create("myPrefix")
- .addIn("etag", ["etagValue1", "etagValue2"])
- .serialize())
- .toEqual(`[["my_prefix.etag","in",["etagValue1","etagValue2"]]]`);
+ expect(new FilterBuilder()
+ .addIn("etag", ["etagValue1", "etagValue2"], "myPrefix")
+ .getFilters())
+ .toEqual(`["my_prefix.etag","in",["etagValue1","etagValue2"]]`);
});
-
-
-
-
});
import * as _ from "lodash";
-export class FilterBuilder {
- static create(resourcePrefix = "") {
- return new FilterBuilder(resourcePrefix);
- }
-
- constructor(
- private resourcePrefix = "",
- private filters = "") { }
+export function joinFilters(filters0?: string, filters1?: string) {
+ return [filters0, filters1].filter(s => s).join(",");
+}
- public addEqual(field: string, value?: string) {
- return this.addCondition(field, "=", value);
- }
+export class FilterBuilder {
+ constructor(private filters = "") { }
- public addLike(field: string, value?: string) {
- return this.addCondition(field, "like", value, "%", "%");
+ public addEqual(field: string, value?: string, resourcePrefix?: string) {
+ return this.addCondition(field, "=", value, "", "", resourcePrefix );
}
- public addILike(field: string, value?: string) {
- return this.addCondition(field, "ilike", value, "%", "%");
+ public addLike(field: string, value?: string, resourcePrefix?: string) {
+ return this.addCondition(field, "like", value, "%", "%", resourcePrefix);
}
- public addIsA(field: string, value?: string | string[]) {
- return this.addCondition(field, "is_a", value);
+ public addILike(field: string, value?: string, resourcePrefix?: string) {
+ return this.addCondition(field, "ilike", value, "%", "%", resourcePrefix);
}
- public addIn(field: string, value?: string | string[]) {
- return this.addCondition(field, "in", value);
+ public addIsA(field: string, value?: string | string[], resourcePrefix?: string) {
+ return this.addCondition(field, "is_a", value, "", "", resourcePrefix);
}
- public concat(filterBuilder: FilterBuilder) {
- return new FilterBuilder(this.resourcePrefix, this.filters + (this.filters && filterBuilder.filters ? "," : "") + filterBuilder.getFilters());
+ public addIn(field: string, value?: string | string[], resourcePrefix?: string) {
+ return this.addCondition(field, "in", value, "", "", resourcePrefix);
}
public getFilters() {
return this.filters;
}
- public serialize() {
- return "[" + this.filters + "]";
- }
-
- private addCondition(field: string, cond: string, value?: string | string[], prefix: string = "", postfix: string = "") {
+ private addCondition(field: string, cond: string, value?: string | string[], prefix: string = "", postfix: string = "", resourcePrefix?: string) {
if (value) {
value = typeof value === "string"
? `"${prefix}${value}${postfix}"`
: `["${value.join(`","`)}"]`;
- const resourcePrefix = this.resourcePrefix
- ? _.snakeCase(this.resourcePrefix) + "."
+ const resPrefix = resourcePrefix
+ ? _.snakeCase(resourcePrefix) + "."
: "";
- this.filters += `${this.filters ? "," : ""}["${resourcePrefix}${_.snakeCase(field.toString())}","${cond}",${value}]`;
+ this.filters += `${this.filters ? "," : ""}["${resPrefix}${_.snakeCase(field)}","${cond}",${value}]`;
}
return this;
}
describe("OrderBuilder", () => {
it("should build correct order query", () => {
- const order = OrderBuilder
- .create()
+ const order = new OrderBuilder()
.addAsc("kind")
.addDesc("modifiedAt")
.getOrder();
- expect(order).toEqual(["kind asc", "modified_at desc"]);
- });
-
- it("should combine results with other builder", () => {
- const order = OrderBuilder
- .create()
- .addAsc("kind")
- .concat(OrderBuilder
- .create("properties")
- .addDesc("modifiedAt"))
- .getOrder();
- expect(order).toEqual(["kind asc", "properties.modified_at desc"]);
+ expect(order).toEqual("kind asc,modified_at desc");
});
});
// SPDX-License-Identifier: AGPL-3.0
import * as _ from "lodash";
-import { Resource } from "../../models/resource";
+import { Resource } from "~/models/resource";
-export class OrderBuilder<T extends Resource = Resource> {
-
- static create<T extends Resource = Resource>(prefix?: string){
- return new OrderBuilder<T>([], prefix);
- }
+export enum OrderDirection { ASC, DESC }
- private constructor(
- private order: string[] = [],
- private prefix = ""){}
+export class OrderBuilder<T extends Resource = Resource> {
- private addRule (direction: string, attribute: keyof T) {
- const prefix = this.prefix ? this.prefix + "." : "";
- const order = [...this.order, `${prefix}${_.snakeCase(attribute.toString())} ${direction}`];
- return new OrderBuilder<T>(order, prefix);
- }
+ constructor(private order: string[] = []) {}
- addAsc(attribute: keyof T) {
- return this.addRule("asc", attribute);
+ addOrder(direction: OrderDirection, attribute: keyof T, prefix?: string) {
+ this.order.push(`${prefix ? prefix + "." : ""}${_.snakeCase(attribute.toString())} ${direction === OrderDirection.ASC ? "asc" : "desc"}`);
+ return this;
}
- addDesc(attribute: keyof T) {
- return this.addRule("desc", attribute);
+ addAsc(attribute: keyof T, prefix?: string) {
+ return this.addOrder(OrderDirection.ASC, attribute, prefix);
}
- concat(orderBuilder: OrderBuilder){
- return new OrderBuilder<T>(
- this.order.concat(orderBuilder.getOrder()),
- this.prefix
- );
+ addDesc(attribute: keyof T, prefix?: string) {
+ return this.addOrder(OrderDirection.DESC, attribute, prefix);
}
getOrder() {
- return this.order.slice();
+ return this.order.join(",");
}
}
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { ColumnSelector } from "../column-selector/column-selector";
import { DataTable, DataColumns } from "../data-table/data-table";
-import { DataColumn } from "../data-table/data-column";
+import { DataColumn, SortDirection } from "../data-table/data-column";
import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
import { SearchInput } from '../search-input/search-input';
import { ArvadosTheme } from "~/common/custom-theme";
export const DataExplorer = withStyles(styles)(
class DataExplorerGeneric<T> extends React.Component<DataExplorerProps<T>> {
render() {
- const {
- columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
- rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
- items, itemsAvailable, onRowClick, onRowDoubleClick, defaultIcon, defaultMessages, classes
+ const {
+ columns, onContextMenu, onFiltersChange, onSortToggle, extractKey,
+ rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
+ items, itemsAvailable, onRowClick, onRowDoubleClick, defaultIcon, defaultMessages, classes
} = this.props;
return <div>
{ items.length > 0 ? (
</Toolbar>
</Paper>
) : (
- <DefaultView
+ <DefaultView
classRoot={classes.defaultRoot}
icon={defaultIcon}
classIcon={classes.defaultIcon}
name: "Actions",
selected: true,
configurable: false,
+ sortDirection: SortDirection.NONE,
+ filters: [],
key: "context-actions",
render: this.renderContextMenuTrigger,
width: "auto"
import * as React from "react";
export interface DataColumn<T, F extends DataTableFilterItem = DataTableFilterItem> {
+ key?: React.Key;
name: string;
selected: boolean;
configurable: boolean;
- key?: React.Key;
- sortDirection?: SortDirection;
- filters?: F[];
+ sortDirection: SortDirection;
+ filters: F[];
render: (item: T) => React.ReactElement<any>;
renderHeader?: () => React.ReactElement<any>;
width?: string;
}
uploadFiles(collectionUuid: string, files: File[], onProgress?: UploadProgress): Promise<CollectionResource | never> {
- const filters = FilterBuilder.create()
+ const filters = new FilterBuilder()
.addEqual("service_type", "proxy");
- return this.keepService.list({ filters }).then(data => {
+ return this.keepService.list({ filters: filters.getFilters() }).then(data => {
if (data.items && data.items.length > 0) {
const serviceHost =
(data.items[0].serviceSslFlag ? "https://" : "http://") +
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { LinkResource } from "~/models/link";
-import { GroupContentsResource, GroupContentsResourcePrefix } from "../groups-service/groups-service";
-import { OrderBuilder } from "~/common/api/order-builder";
-
-export class FavoriteOrderBuilder {
-
- static create(
- linkOrder = OrderBuilder.create<LinkResource>(),
- contentOrder = OrderBuilder.create<GroupContentsResource>()) {
- return new FavoriteOrderBuilder(linkOrder, contentOrder);
- }
-
- private constructor(
- private linkOrder: OrderBuilder<LinkResource>,
- private contentOrder: OrderBuilder<GroupContentsResource>
- ) { }
-
- addAsc(attribute: "name") {
- const linkOrder = this.linkOrder.addAsc(attribute);
- const contentOrder = this.contentOrder
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.COLLECTION).addAsc(attribute))
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROCESS).addAsc(attribute))
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROJECT).addAsc(attribute));
- return FavoriteOrderBuilder.create(linkOrder, contentOrder);
- }
-
- addDesc(attribute: "name") {
- const linkOrder = this.linkOrder.addDesc(attribute);
- const contentOrder = this.contentOrder
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.COLLECTION).addDesc(attribute))
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROCESS).addDesc(attribute))
- .concat(OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROJECT).addDesc(attribute));
- return FavoriteOrderBuilder.create(linkOrder, contentOrder);
- }
-
- getLinkOrder() {
- return this.linkOrder;
- }
-
- getContentOrder() {
- return this.contentOrder;
- }
-
-}
it("unmarks resource as favorite", async () => {
const list = jest.fn().mockReturnValue(Promise.resolve({ items: [{ uuid: "linkUuid" }] }));
- const filters = FilterBuilder
- .create()
+ const filters = new FilterBuilder()
.addEqual('tailUuid', "userUuid")
.addEqual('headUuid', "resourceUuid")
.addEqual('linkClass', LinkClass.STAR);
const newFavorite = await favoriteService.delete({ userUuid: "userUuid", resourceUuid: "resourceUuid" });
- expect(list.mock.calls[0][0].filters.getFilters()).toEqual(filters.getFilters());
+ expect(list.mock.calls[0][0].filters).toEqual(filters.getFilters());
expect(linkService.delete).toHaveBeenCalledWith("linkUuid");
expect(newFavorite[0].uuid).toEqual("linkUuid");
});
it("lists favorite resources", async () => {
const list = jest.fn().mockReturnValue(Promise.resolve({ items: [{ headUuid: "headUuid" }] }));
- const listFilters = FilterBuilder
- .create()
+ const listFilters = new FilterBuilder()
.addEqual('tailUuid', "userUuid")
.addEqual('linkClass', LinkClass.STAR);
const contents = jest.fn().mockReturnValue(Promise.resolve({ items: [{ uuid: "resourceUuid" }] }));
- const contentFilters = FilterBuilder.create().addIn('uuid', ["headUuid"]);
+ const contentFilters = new FilterBuilder().addIn('uuid', ["headUuid"]);
linkService.list = list;
groupService.contents = contents;
const favoriteService = new FavoriteService(linkService, groupService);
const favorites = await favoriteService.list("userUuid");
- expect(list.mock.calls[0][0].filters.getFilters()).toEqual(listFilters.getFilters());
+ expect(list.mock.calls[0][0].filters).toEqual(listFilters.getFilters());
expect(contents.mock.calls[0][0]).toEqual("userUuid");
- expect(contents.mock.calls[0][1].filters.getFilters()).toEqual(contentFilters.getFilters());
+ expect(contents.mock.calls[0][1].filters).toEqual(contentFilters.getFilters());
expect(favorites).toEqual({ items: [{ uuid: "resourceUuid" }] });
});
it("checks if resources are present in favorites", async () => {
const list = jest.fn().mockReturnValue(Promise.resolve({ items: [{ headUuid: "foo" }] }));
- const listFilters = FilterBuilder
- .create()
+ const listFilters = new FilterBuilder()
.addIn("headUuid", ["foo", "oof"])
.addEqual("tailUuid", "userUuid")
.addEqual("linkClass", LinkClass.STAR);
const favorites = await favoriteService.checkPresenceInFavorites("userUuid", ["foo", "oof"]);
- expect(list.mock.calls[0][0].filters.getFilters()).toEqual(listFilters.getFilters());
+ expect(list.mock.calls[0][0].filters).toEqual(listFilters.getFilters());
expect(favorites).toEqual({ foo: true, oof: false });
});
import { LinkService } from "../link-service/link-service";
import { GroupsService, GroupContentsResource } from "../groups-service/groups-service";
-import { LinkResource, LinkClass } from "~/models/link";
-import { FilterBuilder } from "~/common/api/filter-builder";
+import { LinkClass } from "~/models/link";
+import { FilterBuilder, joinFilters } from "~/common/api/filter-builder";
import { ListResults } from "~/common/api/common-resource-service";
-import { FavoriteOrderBuilder } from "./favorite-order-builder";
-import { OrderBuilder } from "~/common/api/order-builder";
export interface FavoriteListArguments {
limit?: number;
offset?: number;
- filters?: FilterBuilder;
- order?: FavoriteOrderBuilder;
+ filters?: string;
+ linkOrder?: string;
+ contentOrder?: string;
}
export class FavoriteService {
constructor(
private linkService: LinkService,
private groupsService: GroupsService
- ) { }
+ ) {}
create(data: { userUuid: string; resource: { uuid: string; name: string } }) {
return this.linkService.create({
delete(data: { userUuid: string; resourceUuid: string; }) {
return this.linkService
.list({
- filters: FilterBuilder
- .create()
+ filters: new FilterBuilder()
.addEqual('tailUuid', data.userUuid)
.addEqual('headUuid', data.resourceUuid)
.addEqual('linkClass', LinkClass.STAR)
+ .getFilters()
})
.then(results => Promise.all(
results.items.map(item => this.linkService.delete(item.uuid))));
}
- list(userUuid: string, { filters, limit, offset, order }: FavoriteListArguments = {}): Promise<ListResults<GroupContentsResource>> {
- const listFilter = FilterBuilder
- .create()
+ list(userUuid: string, { filters, limit, offset, linkOrder, contentOrder }: FavoriteListArguments = {}): Promise<ListResults<GroupContentsResource>> {
+ const listFilters = new FilterBuilder()
.addEqual('tailUuid', userUuid)
- .addEqual('linkClass', LinkClass.STAR);
+ .addEqual('linkClass', LinkClass.STAR)
+ .getFilters();
return this.linkService
.list({
- filters: filters ? filters.concat(listFilter) : listFilter,
+ filters: joinFilters(filters, listFilters),
limit,
offset,
- order: order ? order.getLinkOrder() : OrderBuilder.create<LinkResource>()
+ order: linkOrder
})
.then(results => {
const uuids = results.items.map(item => item.headUuid);
return this.groupsService.contents(userUuid, {
limit,
offset,
- order: order ? order.getContentOrder() : OrderBuilder.create<GroupContentsResource>(),
- filters: FilterBuilder.create().addIn('uuid', uuids),
+ order: contentOrder,
+ filters: new FilterBuilder().addIn('uuid', uuids).getFilters(),
recursive: true
});
});
checkPresenceInFavorites(userUuid: string, resourceUuids: string[]): Promise<Record<string, boolean>> {
return this.linkService
.list({
- filters: FilterBuilder
- .create()
+ filters: new FilterBuilder()
.addIn("headUuid", resourceUuids)
.addEqual("tailUuid", userUuid)
.addEqual("linkClass", LinkClass.STAR)
+ .getFilters()
})
.then(({ items }) => resourceUuids.reduce((results, uuid) => {
const isFavorite = items.some(item => item.headUuid === uuid);
import * as _ from "lodash";
import { CommonResourceService, ListResults } from "~/common/api/common-resource-service";
-import { FilterBuilder } from "~/common/api/filter-builder";
-import { OrderBuilder } from "~/common/api/order-builder";
import { AxiosInstance } from "axios";
import { GroupResource } from "~/models/group";
import { CollectionResource } from "~/models/collection";
export interface ContentsArguments {
limit?: number;
offset?: number;
- order?: OrderBuilder;
- filters?: FilterBuilder;
+ order?: string;
+ filters?: string;
recursive?: boolean;
}
const { filters, order, ...other } = args;
const params = {
...other,
- filters: filters ? filters.serialize() : undefined,
- order: order ? order.getOrder() : undefined
+ filters: filters ? `[${filters}]` : undefined,
+ order: order ? order : undefined
};
return this.serverApi
.get(this.resourceType + `${uuid}/contents/`, {
const resource = await projectService.list();
expect(axiosInstance.get).toHaveBeenCalledWith("/groups/", {
params: {
- filters: FilterBuilder
- .create()
+ filters: "[" + new FilterBuilder()
.addEqual("groupClass", "project")
- .serialize()
+ .getFilters() + "]",
+ order: undefined
}
});
});
import { ProjectResource } from "~/models/project";
import { GroupClass } from "~/models/group";
import { ListArguments } from "~/common/api/common-resource-service";
-import { FilterBuilder } from "~/common/api/filter-builder";
+import { FilterBuilder, joinFilters } from "~/common/api/filter-builder";
export class ProjectService extends GroupsService<ProjectResource> {
list(args: ListArguments = {}) {
return super.list({
...args,
- filters: this.addProjectFilter(args.filters)
+ filters: joinFilters(
+ args.filters,
+ new FilterBuilder()
+ .addEqual("groupClass", GroupClass.PROJECT)
+ .getFilters()
+ )
});
}
-
- private addProjectFilter(filters?: FilterBuilder) {
- return FilterBuilder
- .create()
- .concat(filters
- ? filters
- : FilterBuilder.create())
- .concat(FilterBuilder
- .create()
- .addEqual("groupClass", GroupClass.PROJECT));
- }
}
}
list(uuid: string) {
- const filters = FilterBuilder
- .create()
+ const filters = new FilterBuilder()
.addEqual("headUuid", uuid)
.addEqual("tailUuid", TagTailType.COLLECTION)
- .addEqual("linkClass", LinkClass.TAG);
+ .addEqual("linkClass", LinkClass.TAG)
+ .getFilters();
- const order = OrderBuilder
- .create<TagResource>()
- .addAsc('createdAt');
+ const order = new OrderBuilder<TagResource>()
+ .addAsc('createdAt')
+ .getOrder();
return this.linkService
.list({ filters, order })
import { initialize } from 'redux-form';
import { collectionPanelActions } from "../../collection-panel/collection-panel-action";
import { ContextMenuResource } from "../../context-menu/context-menu-reducer";
+import { updateDetails } from "~/store/details-panel/details-panel-action";
export const collectionUpdaterActions = unionize({
OPEN_COLLECTION_UPDATER: ofType<{ uuid: string }>(),
.then(collection => {
dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: collection as CollectionResource }));
dispatch(collectionUpdaterActions.UPDATE_COLLECTION_SUCCESS());
+ dispatch<any>(updateDetails(collection));
}
);
};
import { Dispatch, MiddlewareAPI } from "redux";
import { RootState } from "../store";
+import { DataColumns } from "~/components/data-table/data-table";
+import { DataTableFilterItem } from "~/components/data-table-filters/data-table-filters";
export abstract class DataExplorerMiddlewareService {
protected readonly id: string;
return this.id;
}
+ public getColumnFilters<T, F extends DataTableFilterItem>(columns: DataColumns<T, F>, columnName: string): F[] {
+ const column = columns.find(c => c.name === columnName);
+ return column ? column.filters.filter(f => f.selected) : [];
+ }
+
abstract requestItems(api: MiddlewareAPI<Dispatch, RootState>): void;
}
import { MiddlewareAPI } from "redux";
import { DataColumns } from "~/components/data-table/data-table";
import { dataExplorerActions } from "./data-explorer-action";
+import { SortDirection } from "~/components/data-table/data-column";
describe("DataExplorerMiddleware", () => {
name: "Column",
selected: true,
configurable: false,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: jest.fn()
}],
requestItems: jest.fn(),
name: "Column",
selected: true,
configurable: false,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: jest.fn()
}],
requestItems: jest.fn(),
TOGGLE_DETAILS_PANEL: ofType<{}>(),
LOAD_DETAILS: ofType<{ uuid: string, kind: ResourceKind }>(),
LOAD_DETAILS_SUCCESS: ofType<{ item: Resource }>(),
+ UPDATE_DETAILS: ofType<{ item: Resource }>()
}, { tag: 'type', value: 'payload' });
export type DetailsPanelAction = UnionOf<typeof detailsPanelActions>;
dispatch(detailsPanelActions.LOAD_DETAILS_SUCCESS({ item }));
};
+export const updateDetails = (item: Resource) =>
+ async (dispatch: Dispatch, getState: () => RootState) => {
+ const currentItem = getState().detailsPanel.item;
+ if (currentItem && (currentItem.uuid === item.uuid)) {
+ dispatch(detailsPanelActions.UPDATE_DETAILS({ item }));
+ dispatch(detailsPanelActions.LOAD_DETAILS_SUCCESS({ item }));
+ }
+ };
+
+
const getService = (services: ServiceRepository, kind: ResourceKind) => {
switch (kind) {
case ResourceKind.PROJECT:
export const detailsPanelReducer = (state: DetailsPanelState = initialState, action: DetailsPanelAction) =>
detailsPanelActions.match(action, {
default: () => state,
- LOAD_DETAILS: () => state,
LOAD_DETAILS_SUCCESS: ({ item }) => ({ ...state, item }),
TOGGLE_DETAILS_PANEL: () => ({ ...state, isOpened: !state.isOpened })
});
// SPDX-License-Identifier: AGPL-3.0
import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service";
-import { FavoritePanelFilter, FavoritePanelColumnNames } from "~/views/favorite-panel/favorite-panel";
+import { FavoritePanelColumnNames, FavoritePanelFilter } from "~/views/favorite-panel/favorite-panel";
import { RootState } from "../store";
import { DataColumns } from "~/components/data-table/data-table";
import { FavoritePanelItem, resourceToDataItem } from "~/views/favorite-panel/favorite-panel-item";
-import { FavoriteOrderBuilder } from "~/services/favorite-service/favorite-order-builder";
import { ServiceRepository } from "~/services/services";
import { SortDirection } from "~/components/data-table/data-column";
import { FilterBuilder } from "~/common/api/filter-builder";
import { checkPresenceInFavorites } from "../favorites/favorites-actions";
import { favoritePanelActions } from "./favorite-panel-action";
import { Dispatch, MiddlewareAPI } from "redux";
+import { OrderBuilder, OrderDirection } from "~/common/api/order-builder";
+import { LinkResource } from "~/models/link";
+import { GroupContentsResource, GroupContentsResourcePrefix } from "~/services/groups-service/groups-service";
export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareService {
constructor(private services: ServiceRepository, id: string) {
requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
const dataExplorer = api.getState().dataExplorer[this.getId()];
const columns = dataExplorer.columns as DataColumns<FavoritePanelItem, FavoritePanelFilter>;
- const sortColumn = dataExplorer.columns.find(
- ({ sortDirection }) => sortDirection !== undefined && sortDirection !== "none"
- );
- const typeFilters = getColumnFilters(columns, FavoritePanelColumnNames.TYPE);
- const order = FavoriteOrderBuilder.create();
- if (typeFilters.length > 0) {
- this.services.favoriteService
- .list(this.services.authService.getUuid()!, {
- limit: dataExplorer.rowsPerPage,
- offset: dataExplorer.page * dataExplorer.rowsPerPage,
- order: sortColumn!.name === FavoritePanelColumnNames.NAME
- ? sortColumn!.sortDirection === SortDirection.ASC
- ? order.addDesc("name")
- : order.addAsc("name")
- : order,
- filters: FilterBuilder
- .create()
- .addIsA("headUuid", typeFilters.map(filter => filter.type))
- .addILike("name", dataExplorer.searchValue)
- })
- .then(response => {
- api.dispatch(favoritePanelActions.SET_ITEMS({
- items: response.items.map(resourceToDataItem),
- itemsAvailable: response.itemsAvailable,
- page: Math.floor(response.offset / response.limit),
- rowsPerPage: response.limit
- }));
- api.dispatch<any>(checkPresenceInFavorites(response.items.map(item => item.uuid)));
- });
- } else {
- api.dispatch(favoritePanelActions.SET_ITEMS({
- items: [],
- itemsAvailable: 0,
- page: 0,
- rowsPerPage: dataExplorer.rowsPerPage
- }));
+ const sortColumn = dataExplorer.columns.find(c => c.sortDirection !== SortDirection.NONE);
+ const typeFilters = this.getColumnFilters(columns, FavoritePanelColumnNames.TYPE);
+
+ const linkOrder = new OrderBuilder<LinkResource>();
+ const contentOrder = new OrderBuilder<GroupContentsResource>();
+
+ if (sortColumn && sortColumn.name === FavoritePanelColumnNames.NAME) {
+ const direction = sortColumn.sortDirection === SortDirection.ASC
+ ? OrderDirection.ASC
+ : OrderDirection.DESC;
+
+ linkOrder.addOrder(direction, "name");
+ contentOrder
+ .addOrder(direction, "name", GroupContentsResourcePrefix.COLLECTION)
+ .addOrder(direction, "name", GroupContentsResourcePrefix.PROCESS)
+ .addOrder(direction, "name", GroupContentsResourcePrefix.PROJECT);
}
+
+ this.services.favoriteService
+ .list(this.services.authService.getUuid()!, {
+ limit: dataExplorer.rowsPerPage,
+ offset: dataExplorer.page * dataExplorer.rowsPerPage,
+ linkOrder: linkOrder.getOrder(),
+ contentOrder: contentOrder.getOrder(),
+ filters: new FilterBuilder()
+ .addIsA("headUuid", typeFilters.map(filter => filter.type))
+ .addILike("name", dataExplorer.searchValue)
+ .getFilters()
+ })
+ .then(response => {
+ api.dispatch(favoritePanelActions.SET_ITEMS({
+ items: response.items.map(resourceToDataItem),
+ itemsAvailable: response.itemsAvailable,
+ page: Math.floor(response.offset / response.limit),
+ rowsPerPage: response.limit
+ }));
+ api.dispatch<any>(checkPresenceInFavorites(response.items.map(item => item.uuid)));
+ })
+ .catch(() => {
+ api.dispatch(favoritePanelActions.SET_ITEMS({
+ items: [],
+ itemsAvailable: 0,
+ page: 0,
+ rowsPerPage: dataExplorer.rowsPerPage
+ }));
+ });
}
}
-
-const getColumnFilters = (columns: DataColumns<FavoritePanelItem, FavoritePanelFilter>, columnName: string) => {
- const column = columns.find(c => c.name === columnName);
- return column && column.filters ? column.filters.filter(f => f.selected) : [];
-};
import { ServiceRepository } from "~/services/services";
import { ProjectPanelItem, resourceToDataItem } from "~/views/project-panel/project-panel-item";
import { SortDirection } from "~/components/data-table/data-column";
-import { OrderBuilder } from "~/common/api/order-builder";
+import { OrderBuilder, OrderDirection } from "~/common/api/order-builder";
import { FilterBuilder } from "~/common/api/filter-builder";
-import { GroupContentsResourcePrefix, GroupContentsResource } from "~/services/groups-service/groups-service";
+import { GroupContentsResourcePrefix } from "~/services/groups-service/groups-service";
import { checkPresenceInFavorites } from "../favorites/favorites-actions";
import { projectPanelActions } from "./project-panel-action";
import { Dispatch, MiddlewareAPI } from "redux";
+import { ProjectResource } from "~/models/project";
export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService {
constructor(private services: ServiceRepository, id: string) {
const state = api.getState();
const dataExplorer = state.dataExplorer[this.getId()];
const columns = dataExplorer.columns as DataColumns<ProjectPanelItem, ProjectPanelFilter>;
- const typeFilters = getColumnFilters(columns, ProjectPanelColumnNames.TYPE);
- const statusFilters = getColumnFilters(columns, ProjectPanelColumnNames.STATUS);
- const sortColumn = dataExplorer.columns.find(({ sortDirection }) => Boolean(sortDirection && sortDirection !== "none"));
- const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC ? SortDirection.ASC : SortDirection.DESC;
- if (typeFilters.length > 0) {
- this.services.groupsService
- .contents(state.projects.currentItemId, {
- limit: dataExplorer.rowsPerPage,
- offset: dataExplorer.page * dataExplorer.rowsPerPage,
- order: sortColumn
- ? sortColumn.name === ProjectPanelColumnNames.NAME
- ? getOrder("name", sortDirection)
- : getOrder("createdAt", sortDirection)
- : OrderBuilder.create(),
- filters: FilterBuilder
- .create()
- .concat(FilterBuilder
- .create()
- .addIsA("uuid", typeFilters.map(f => f.type)))
- .concat(FilterBuilder
- .create(GroupContentsResourcePrefix.PROCESS)
- .addIn("state", statusFilters.map(f => f.type)))
- .concat(getSearchFilter(dataExplorer.searchValue))
- })
- .then(response => {
- api.dispatch(projectPanelActions.SET_ITEMS({
- items: response.items.map(resourceToDataItem),
- itemsAvailable: response.itemsAvailable,
- page: Math.floor(response.offset / response.limit),
- rowsPerPage: response.limit
- }));
- api.dispatch<any>(checkPresenceInFavorites(response.items.map(item => item.uuid)));
- });
- } else {
- api.dispatch(projectPanelActions.SET_ITEMS({
- items: [],
- itemsAvailable: 0,
- page: 0,
- rowsPerPage: dataExplorer.rowsPerPage
- }));
- }
- }
-}
+ const typeFilters = this.getColumnFilters(columns, ProjectPanelColumnNames.TYPE);
+ const statusFilters = this.getColumnFilters(columns, ProjectPanelColumnNames.STATUS);
+ const sortColumn = dataExplorer.columns.find(c => c.sortDirection !== SortDirection.NONE);
-const getColumnFilters = (columns: DataColumns<ProjectPanelItem, ProjectPanelFilter>, columnName: string) => {
- const column = columns.find(c => c.name === columnName);
- return column && column.filters ? column.filters.filter(f => f.selected) : [];
-};
+ const order = new OrderBuilder<ProjectResource>();
-const getOrder = (attribute: "name" | "createdAt", direction: SortDirection) =>
- [
- OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.COLLECTION),
- OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROCESS),
- OrderBuilder.create<GroupContentsResource>(GroupContentsResourcePrefix.PROJECT)
- ].reduce((acc, b) =>
- acc.concat(direction === SortDirection.ASC
- ? b.addAsc(attribute)
- : b.addDesc(attribute)), OrderBuilder.create());
+ if (sortColumn) {
+ const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+ ? OrderDirection.ASC
+ : OrderDirection.DESC;
-const getSearchFilter = (searchValue: string) =>
- searchValue
- ? [
- FilterBuilder.create(GroupContentsResourcePrefix.COLLECTION),
- FilterBuilder.create(GroupContentsResourcePrefix.PROCESS),
- FilterBuilder.create(GroupContentsResourcePrefix.PROJECT)]
- .reduce((acc, b) =>
- acc.concat(b.addILike("name", searchValue)), FilterBuilder.create())
- : FilterBuilder.create();
+ const columnName = sortColumn && sortColumn.name === ProjectPanelColumnNames.NAME ? "name" : "createdAt";
+ order
+ .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.COLLECTION)
+ .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROCESS)
+ .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROJECT);
+ }
+
+ this.services.groupsService
+ .contents(state.projects.currentItemId, {
+ limit: dataExplorer.rowsPerPage,
+ offset: dataExplorer.page * dataExplorer.rowsPerPage,
+ order: order.getOrder(),
+ filters: new FilterBuilder()
+ .addIsA("uuid", typeFilters.map(f => f.type))
+ .addIn("state", statusFilters.map(f => f.type), GroupContentsResourcePrefix.PROCESS)
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.COLLECTION)
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROCESS)
+ .addILike("name", dataExplorer.searchValue, GroupContentsResourcePrefix.PROJECT)
+ .getFilters()
+ })
+ .then(response => {
+ api.dispatch(projectPanelActions.SET_ITEMS({
+ items: response.items.map(resourceToDataItem),
+ itemsAvailable: response.itemsAvailable,
+ page: Math.floor(response.offset / response.limit),
+ rowsPerPage: response.limit
+ }));
+ api.dispatch<any>(checkPresenceInFavorites(response.items.map(item => item.uuid)));
+ })
+ .catch(() => {
+ api.dispatch(projectPanelActions.SET_ITEMS({
+ items: [],
+ itemsAvailable: 0,
+ page: 0,
+ rowsPerPage: dataExplorer.rowsPerPage
+ }));
+ });
+ }
+}
import { RootState } from "../store";
import { checkPresenceInFavorites } from "../favorites/favorites-actions";
import { ServiceRepository } from "~/services/services";
+import { projectPanelActions } from "~/store/project-panel/project-panel-action";
+import { updateDetails } from "~/store/details-panel/details-panel-action";
export const projectActions = unionize({
OPEN_PROJECT_CREATOR: ofType<{ ownerUuid: string }>(),
CLOSE_PROJECT_CREATOR: ofType<{}>(),
CREATE_PROJECT: ofType<Partial<ProjectResource>>(),
CREATE_PROJECT_SUCCESS: ofType<ProjectResource>(),
+ OPEN_PROJECT_UPDATER: ofType<{ uuid: string}>(),
+ CLOSE_PROJECT_UPDATER: ofType<{}>(),
+ UPDATE_PROJECT_SUCCESS: ofType<ProjectResource>(),
REMOVE_PROJECT: ofType<string>(),
PROJECTS_REQUEST: ofType<string>(),
PROJECTS_SUCCESS: ofType<{ projects: ProjectResource[], parentItemId?: string }>(),
value: 'payload'
});
+export const PROJECT_FORM_NAME = 'projectEditDialog';
+
export const getProjectList = (parentUuid: string = '') =>
(dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
dispatch(projectActions.PROJECTS_REQUEST(parentUuid));
return services.projectService.list({
- filters: FilterBuilder
- .create()
+ filters: new FilterBuilder()
.addEqual("ownerUuid", parentUuid)
+ .getFilters()
}).then(({ items: projects }) => {
dispatch(projectActions.PROJECTS_SUCCESS({ projects, parentItemId: parentUuid }));
dispatch<any>(checkPresenceInFavorites(projects.map(project => project.uuid)));
.then(project => dispatch(projectActions.CREATE_PROJECT_SUCCESS(project)));
};
+export const updateProject = (project: Partial<ProjectResource>) =>
+ (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ const { uuid } = getState().projects.updater;
+ return services.projectService
+ .update(uuid, project)
+ .then(project => {
+ dispatch(projectActions.UPDATE_PROJECT_SUCCESS(project));
+ dispatch(projectPanelActions.REQUEST_ITEMS());
+ dispatch<any>(getProjectList(project.ownerUuid));
+ dispatch<any>(updateDetails(project));
+ });
+ };
+
export type ProjectAction = UnionOf<typeof projectActions>;
creator: {
opened: false,
ownerUuid: "",
+ },
+ updater: {
+ opened: false,
+ uuid: ''
}
});
});
}],
currentItemId: "1",
creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
};
const project = {
items: [{
}],
currentItemId: "",
creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
};
const state = projectsReducer(initialState, projectActions.RESET_PROJECT_TREE_ACTIVITY(initialState.items[0].id));
status: TreeItemStatus.PENDING
}],
currentItemId: "1",
- creator: { opened: false, ownerUuid: "" }
+ creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
};
const project = {
items: [{
}],
currentItemId: "1",
creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
};
const state = projectsReducer(initialState, projectActions.TOGGLE_PROJECT_TREE_ITEM_ACTIVE(initialState.items[0].id));
status: TreeItemStatus.PENDING,
}],
currentItemId: "1",
- creator: { opened: false, ownerUuid: "" }
+ creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
};
const project = {
items: [{
}],
currentItemId: "1",
creator: { opened: false, ownerUuid: "" },
+ updater: { opened: false, uuid: '' }
+
};
const state = projectsReducer(initialState, projectActions.TOGGLE_PROJECT_TREE_ITEM_OPEN(initialState.items[0].id));
export type ProjectState = {
items: Array<TreeItem<ProjectResource>>,
currentItemId: string,
- creator: ProjectCreator
+ creator: ProjectCreator,
+ updater: ProjectUpdater
};
interface ProjectCreator {
error?: string;
}
+interface ProjectUpdater {
+ opened: boolean;
+ uuid: string;
+}
+
export function findTreeItem<T>(tree: Array<TreeItem<T>>, itemId: string): TreeItem<T> | undefined {
let item;
for (const t of tree) {
}
});
+const updateProject = (state: ProjectState, updater?: Partial<ProjectUpdater>) => ({
+ ...state,
+ updater: {
+ ...state.updater,
+ ...updater
+ }
+});
+
const initialState: ProjectState = {
items: [],
currentItemId: "",
creator: {
opened: false,
ownerUuid: ""
+ },
+ updater: {
+ opened: false,
+ uuid: ''
}
};
CLOSE_PROJECT_CREATOR: () => updateCreator(state, { opened: false }),
CREATE_PROJECT: () => updateCreator(state, { error: undefined }),
CREATE_PROJECT_SUCCESS: () => updateCreator(state, { opened: false, ownerUuid: "" }),
+ OPEN_PROJECT_UPDATER: ({ uuid }) => updateProject(state, { uuid, opened: true }),
+ CLOSE_PROJECT_UPDATER: () => updateProject(state, { opened: false, uuid: "" }),
+ UPDATE_PROJECT_SUCCESS: () => updateProject(state, { opened: false, uuid: "" }),
REMOVE_PROJECT: () => state,
PROJECTS_REQUEST: itemId => {
const items = _.cloneDeep(state.items);
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { require } from '../require';
-import { maxLength } from '../max-length';
-
-export const COLLECTION_NAME_VALIDATION = [require, maxLength(255)];
-export const COLLECTION_DESCRIPTION_VALIDATION = [maxLength(255)];
\ No newline at end of file
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { require } from '../require';
-import { maxLength } from '../max-length';
-
-export const PROJECT_NAME_VALIDATION = [require, maxLength(255)];
-export const PROJECT_DESCRIPTION_VALIDATION = [maxLength(255)];
-export const COLLECTION_NAME_VALIDATION = [require, maxLength(255)];
-export const COLLECTION_DESCRIPTION_VALIDATION = [maxLength(255)];
-export const COLLECTION_PROJECT_VALIDATION = [require];
import { maxLength } from './max-length';
export const TAG_KEY_VALIDATION = [require, maxLength(255)];
-export const TAG_VALUE_VALIDATION = [require, maxLength(255)];
\ No newline at end of file
+export const TAG_VALUE_VALIDATION = [require, maxLength(255)];
+
+export const PROJECT_NAME_VALIDATION = [require, maxLength(255)];
+export const PROJECT_DESCRIPTION_VALIDATION = [maxLength(255)];
+
+export const COLLECTION_NAME_VALIDATION = [require, maxLength(255)];
+export const COLLECTION_DESCRIPTION_VALIDATION = [maxLength(255)];
+export const COLLECTION_PROJECT_VALIDATION = [require];
\ No newline at end of file
//
// SPDX-License-Identifier: AGPL-3.0
-import { reset } from "redux-form";
+import { reset, initialize } from "redux-form";
import { ContextMenuActionSet } from "../context-menu-action-set";
-import { projectActions } from "~/store/project/project-action";
-import { NewProjectIcon } from "~/components/icon/icon";
+import { projectActions, PROJECT_FORM_NAME } from "~/store/project/project-action";
+import { NewProjectIcon, RenameIcon } from "~/components/icon/icon";
import { ToggleFavoriteAction } from "../actions/favorite-action";
import { toggleFavorite } from "~/store/favorites/favorites-actions";
import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
import { PROJECT_CREATE_DIALOG } from "../../dialog-create/dialog-project-create";
-export const projectActionSet: ContextMenuActionSet = [[{
- icon: NewProjectIcon,
- name: "New project",
- execute: (dispatch, resource) => {
- dispatch(reset(PROJECT_CREATE_DIALOG));
- dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: resource.uuid }));
+export const projectActionSet: ContextMenuActionSet = [[
+ {
+ icon: NewProjectIcon,
+ name: "New project",
+ execute: (dispatch, resource) => {
+ dispatch(reset(PROJECT_CREATE_DIALOG));
+ dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: resource.uuid }));
+ }
+ },
+ {
+ icon: RenameIcon,
+ name: "Edit project",
+ execute: (dispatch, resource) => {
+ dispatch(projectActions.OPEN_PROJECT_UPDATER({ uuid: resource.uuid }));
+ dispatch(initialize(PROJECT_FORM_NAME, { name: resource.name, description: resource.description }));
+ }
+ },
+ {
+ component: ToggleFavoriteAction,
+ execute: (dispatch, resource) => {
+ dispatch<any>(toggleFavorite(resource)).then(() => {
+ dispatch<any>(favoritePanelActions.REQUEST_ITEMS());
+ });
+ }
}
-}, {
- component: ToggleFavoriteAction,
- execute: (dispatch, resource) => {
- dispatch<any>(toggleFavorite(resource)).then(() => {
- dispatch<any>(favoritePanelActions.REQUEST_ITEMS());
- });
- }
-}]];
+]];
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } from "@material-ui/core";
import { WithDialogProps } from "~/store/dialog/with-dialog";
import { TextField } from "~/components/text-field/text-field";
-import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "~/validators/create-project/create-project-validator";
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "~/validators/validators";
import { ProjectTreePicker } from "../project-tree-picker/project-tree-picker";
export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
-import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '~/validators/create-collection/create-collection-validator';
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '~/validators/validators';
import { FileUpload } from "~/components/file-upload/file-upload";
import { connect, DispatchProp } from "react-redux";
import { RootState } from "~/store/store";
import { collectionUploaderActions, UploadFile } from "~/store/collections/uploader/collection-uploader-actions";
-type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
+type CssRules = "button" | "lastButton" | "formContainer" | "createProgress" | "dialogActions";
const styles: StyleRulesCallback<CssRules> = theme => ({
button: {
display: "flex",
flexDirection: "column",
},
- textField: {
- marginBottom: theme.spacing.unit * 3
- },
createProgress: {
position: "absolute",
minWidth: "20px",
}
});
-interface DialogCollectionCreateProps {
+interface DialogCollectionDataProps {
open: boolean;
- handleClose: () => void;
- onSubmit: (data: { name: string, description: string }, files: UploadFile[]) => void;
handleSubmit: any;
submitting: boolean;
invalid: boolean;
files: UploadFile[];
}
+interface DialogCollectionActionProps {
+ handleClose: () => void;
+ onSubmit: (data: { name: string, description: string }, files: UploadFile[]) => void;
+}
+
+type DialogCollectionProps = DialogCollectionDataProps & DialogCollectionActionProps & DispatchProp & WithStyles<CssRules>;
+
export const COLLECTION_CREATE_DIALOG = "collectionCreateDialog";
export const DialogCollectionCreate = compose(
})),
reduxForm({ form: COLLECTION_CREATE_DIALOG }),
withStyles(styles))(
- class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & DispatchProp & WithStyles<CssRules>> {
+ class DialogCollectionCreate extends React.Component<DialogCollectionProps> {
render() {
const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine, files } = this.props;
const busy = submitting || files.reduce(
disabled={submitting}
component={TextField}
validate={COLLECTION_NAME_VALIDATION}
- className={classes.textField}
label="Collection Name" />
<Field name="description"
disabled={submitting}
component={TextField}
validate={COLLECTION_DESCRIPTION_VALIDATION}
- className={classes.textField}
label="Description - optional" />
<FileUpload
files={files}
import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
-import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '~/validators/create-project/create-project-validator';
+import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '~/validators/validators';
-type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
+type CssRules = "button" | "lastButton" | "formContainer" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
const styles: StyleRulesCallback<CssRules> = theme => ({
button: {
dialogTitle: {
paddingBottom: "0"
},
- textField: {
- marginTop: "32px",
- },
dialog: {
minWidth: "600px",
minHeight: "320px"
<Field name="name"
component={TextField}
validate={PROJECT_NAME_VALIDATION}
- className={classes.textField}
label="Project Name"/>
<Field name="description"
component={TextField}
validate={PROJECT_DESCRIPTION_VALIDATION}
- className={classes.textField}
label="Description - optional"/>
</DialogContent>
<DialogActions className={classes.dialogActions}>
import { reduxForm, Field } from 'redux-form';
import { compose } from 'redux';
import { ArvadosTheme } from '~/common/custom-theme';
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, StyleRulesCallback, withStyles, WithStyles, Button, CircularProgress } from '@material-ui/core';
-import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '~/validators/create-collection/create-collection-validator';
+import { Dialog, DialogActions, DialogContent, DialogTitle, StyleRulesCallback, withStyles, WithStyles, Button, CircularProgress } from '@material-ui/core';
+import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '~/validators/validators';
import { COLLECTION_FORM_NAME } from '~/store/collections/updater/collection-updater-action';
+import { TextField } from '~/components/text-field/text-field';
-type CssRules = 'content' | 'actions' | 'textField' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
+type CssRules = 'content' | 'actions' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
content: {
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3 - theme.spacing.unit / 2}px
${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`
},
- textField: {
- marginBottom: theme.spacing.unit * 3
- },
buttonWrapper: {
position: 'relative'
},
type DialogCollectionProps = DialogCollectionDataProps & DialogCollectionAction & WithStyles<CssRules>;
-interface TextFieldProps {
- label: string;
- floatinglabeltext: string;
- className?: string;
- input?: string;
- meta?: any;
-}
-
export const DialogCollectionUpdate = compose(
reduxForm({ form: COLLECTION_FORM_NAME }),
withStyles(styles))(
<form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
<DialogTitle>Edit Collection</DialogTitle>
<DialogContent className={classes.content}>
- <Field name="name"
+ <Field name='name'
disabled={submitting}
- component={this.renderTextField}
- floatinglabeltext="Collection Name"
+ component={TextField}
validate={COLLECTION_NAME_VALIDATION}
- className={classes.textField}
label="Collection Name" />
- <Field name="description"
+ <Field name='description'
disabled={submitting}
- component={this.renderTextField}
- floatinglabeltext="Description - optional"
+ component={TextField}
validate={COLLECTION_DESCRIPTION_VALIDATION}
- className={classes.textField}
label="Description - optional" />
</DialogContent>
<DialogActions className={classes.actions}>
</Dialog>
);
}
-
- renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
- <TextField
- helperText={touched && error}
- label={label}
- className={this.props.classes.textField}
- error={touched && !!error}
- autoComplete='off'
- {...input}
- {...custom}
- />
- )
}
);
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { reduxForm, Field } from 'redux-form';
+import { compose } from 'redux';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { StyleRulesCallback, WithStyles, withStyles, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Button } from '../../../node_modules/@material-ui/core';
+import { TextField } from '~/components/text-field/text-field';
+import { PROJECT_FORM_NAME } from '~/store/project/project-action';
+import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '~/validators/validators';
+
+type CssRules = 'content' | 'actions' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ content: {
+ display: 'flex',
+ flexDirection: 'column'
+ },
+ actions: {
+ margin: 0,
+ padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3 - theme.spacing.unit / 2}px
+ ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`
+ },
+ buttonWrapper: {
+ position: 'relative'
+ },
+ saveButton: {
+ boxShadow: 'none'
+ },
+ circularProgress: {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ margin: 'auto'
+ }
+});
+
+interface DialogProjectDataProps {
+ open: boolean;
+ handleSubmit: any;
+ submitting: boolean;
+ invalid: boolean;
+ pristine: boolean;
+}
+
+interface DialogProjectActionProps {
+ handleClose: () => void;
+ onSubmit: (data: { name: string, description: string }) => void;
+}
+
+type DialogProjectProps = DialogProjectDataProps & DialogProjectActionProps & WithStyles<CssRules>;
+
+export const DialogProjectUpdate = compose(
+ reduxForm({ form: PROJECT_FORM_NAME }),
+ withStyles(styles))(
+
+ class DialogProjectUpdate extends React.Component<DialogProjectProps> {
+ render() {
+ const { handleSubmit, handleClose, onSubmit, open, classes, submitting, invalid, pristine } = this.props;
+ return <Dialog open={open}
+ onClose={handleClose}
+ fullWidth={true}
+ maxWidth='sm'
+ disableBackdropClick={true}
+ disableEscapeKeyDown={true}>
+ <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
+ <DialogTitle>Edit Collection</DialogTitle>
+ <DialogContent className={classes.content}>
+ <Field name='name'
+ disabled={submitting}
+ component={TextField}
+ validate={PROJECT_NAME_VALIDATION}
+ label="Project Name" />
+ <Field name='description'
+ disabled={submitting}
+ component={TextField}
+ validate={PROJECT_DESCRIPTION_VALIDATION}
+ label="Description - optional" />
+ </DialogContent>
+ <DialogActions className={classes.actions}>
+ <Button onClick={handleClose} color="primary"
+ disabled={submitting}>CANCEL</Button>
+ <div className={classes.buttonWrapper}>
+ <Button type="submit" className={classes.saveButton}
+ color="primary"
+ disabled={invalid || submitting || pristine}
+ variant="contained">
+ SAVE
+ </Button>
+ {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
+ </div>
+ </DialogActions>
+ </form>
+ </Dialog>;
+ }
+ }
+ );
const ownerUuid = id.length === 0 ? services.authService.getUuid() || '' : id;
- const filters = FilterBuilder
- .create()
- .addEqual('ownerUuid', ownerUuid);
+ const filters = new FilterBuilder()
+ .addEqual('ownerUuid', ownerUuid)
+ .getFilters();
const { items } = await services.projectService.list({ filters });
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { SubmissionError } from "redux-form";
+import { RootState } from "~/store/store";
+import { snackbarActions } from "~/store/snackbar/snackbar-actions";
+import { DialogProjectUpdate } from "../dialog-update/dialog-project-update";
+import { projectActions, updateProject } from "~/store/project/project-action";
+
+const mapStateToProps = (state: RootState) => ({
+ open: state.projects.updater.opened
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+ handleClose: () => {
+ dispatch(projectActions.CLOSE_PROJECT_UPDATER());
+ },
+ onSubmit: (data: { name: string, description: string }) => {
+ return dispatch<any>(editProject(data))
+ .catch((e: any) => {
+ if (e.errors) {
+ throw new SubmissionError({ name: e.errors.join("").includes("UniqueViolation") ? "Project with this name already exists." : "" });
+ }
+ });
+ }
+});
+
+const editProject = (data: { name: string, description: string }) =>
+ (dispatch: Dispatch, getState: () => RootState) => {
+ const { uuid } = getState().projects.updater;
+ return dispatch<any>(updateProject(data)).then(() => {
+ dispatch(snackbarActions.OPEN_SNACKBAR({
+ message: "Project has been successfully updated.",
+ hideDuration: 2000
+ }));
+ });
+ };
+
+export const UpdateProjectDialog = connect(mapStateToProps, mapDispatchToProps)(DialogProjectUpdate);
</Card>
<Card className={classes.card}>
- <CardHeader title="Tags" />
+ <CardHeader title="Properties" />
<CardContent>
<Grid container direction="column">
<Grid item xs={12}><CollectionTagForm /></Grid>
import { reduxForm, Field, reset } from 'redux-form';
import { compose, Dispatch } from 'redux';
import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, TextField, Button, CircularProgress } from '@material-ui/core';
+import { StyleRulesCallback, withStyles, WithStyles, Button, CircularProgress, Grid } from '@material-ui/core';
import { TagProperty } from '~/models/tag';
+import { TextField } from '~/components/text-field/text-field';
import { createCollectionTag, COLLECTION_TAG_FORM_NAME } from '~/store/collection-panel/collection-panel-action';
import { TAG_VALUE_VALIDATION, TAG_KEY_VALIDATION } from '~/validators/validators';
-type CssRules = 'form' | 'textField' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
+type CssRules = 'buttonWrapper' | 'saveButton' | 'circularProgress';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- form: {
- marginBottom: theme.spacing.unit * 4
- },
- textField: {
- marginRight: theme.spacing.unit
- },
buttonWrapper: {
position: 'relative',
display: 'inline-block'
handleSubmit: any;
}
-interface TextFieldProps {
- label: string;
- floatinglabeltext: string;
- className?: string;
- input?: string;
- meta?: any;
-}
-
type CollectionTagFormProps = CollectionTagFormDataProps & CollectionTagFormActionProps & WithStyles<CssRules>;
export const CollectionTagForm = compose(
}),
withStyles(styles))(
- class CollectionTagForm extends React.Component<CollectionTagFormProps> {
+ class CollectionTagForm extends React.Component<CollectionTagFormProps> {
render() {
const { classes, submitting, pristine, invalid, handleSubmit } = this.props;
return (
- <form className={classes.form} onSubmit={handleSubmit}>
- <Field name="key"
- disabled={submitting}
- component={this.renderTextField}
- floatinglabeltext="Key"
- validate={TAG_KEY_VALIDATION}
- className={classes.textField}
- label="Key" />
- <Field name="value"
- disabled={submitting}
- component={this.renderTextField}
- floatinglabeltext="Value"
- validate={TAG_VALUE_VALIDATION}
- className={classes.textField}
- label="Value" />
- <div className={classes.buttonWrapper}>
- <Button type="submit" className={classes.saveButton}
- color="primary"
- size='small'
- disabled={invalid || submitting || pristine}
- variant="contained">
- ADD
- </Button>
- {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
- </div>
+ <form onSubmit={handleSubmit}>
+ <Grid container justify="flex-start" alignItems="baseline" spacing={24}>
+ <Grid item xs={3} component={"span"}>
+ <Field name="key"
+ disabled={submitting}
+ component={TextField}
+ validate={TAG_KEY_VALIDATION}
+ label="Key" />
+ </Grid>
+ <Grid item xs={5} component={"span"}>
+ <Field name="value"
+ disabled={submitting}
+ component={TextField}
+ validate={TAG_VALUE_VALIDATION}
+ label="Value" />
+ </Grid>
+ <Grid item component={"span"} className={classes.buttonWrapper}>
+ <Button type="submit" className={classes.saveButton}
+ color="primary"
+ size='small'
+ disabled={invalid || submitting || pristine}
+ variant="contained">
+ ADD
+ </Button>
+ {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
+ </Grid>
+ </Grid>
</form>
);
}
-
- renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
- <TextField
- helperText={touched && error}
- label={label}
- className={this.props.classes.textField}
- error={touched && !!error}
- autoComplete='off'
- {...input}
- {...custom}
- />
- )
-
}
);
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
+ filters: [],
render: renderName,
width: "450px"
},
name: "Status",
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
filters: [
{
name: ContainerRequestState.COMMITTED,
name: FavoritePanelColumnNames.TYPE,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
filters: [
{
name: resourceLabel(ResourceKind.COLLECTION),
name: FavoritePanelColumnNames.OWNER,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderOwner(item.owner),
width: "200px"
},
name: FavoritePanelColumnNames.FILE_SIZE,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderFileSize(item.fileSize),
width: "50px"
},
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderDate(item.lastModified),
width: "150px"
}
onRowClick={this.props.onItemClick}
onRowDoubleClick={this.props.onItemDoubleClick}
onContextMenu={this.props.onContextMenu}
- extractKey={(item: FavoritePanelItem) => item.uuid}
+ extractKey={(item: FavoritePanelItem) => item.uuid}
defaultIcon={FavoriteIcon}
defaultMessages={['Your favorites list is empty.']}/>
;
selected: true,
configurable: true,
sortDirection: SortDirection.ASC,
+ filters: [],
render: renderName,
width: "450px"
},
name: "Status",
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
filters: [
{
name: ContainerRequestState.COMMITTED,
name: ProjectPanelColumnNames.TYPE,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
filters: [
{
name: resourceLabel(ResourceKind.COLLECTION),
name: ProjectPanelColumnNames.OWNER,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderOwner(item.owner),
width: "200px"
},
name: ProjectPanelColumnNames.FILE_SIZE,
selected: true,
configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderFileSize(item.fileSize),
width: "50px"
},
selected: true,
configurable: true,
sortDirection: SortDirection.NONE,
+ filters: [],
render: item => renderDate(item.lastModified),
width: "150px"
}
import { loadCollection, loadCollectionTags } from '~/store/collection-panel/collection-panel-action';
import { getCollectionUrl } from '~/models/collection';
import { UpdateCollectionDialog } from '~/views-components/update-collection-dialog/update-collection-dialog.';
+import { UpdateProjectDialog } from '~/views-components/update-project-dialog/update-project-dialog';
import { AuthService } from "~/services/auth-service/auth-service";
import { RenameFileDialog } from '~/views-components/rename-file-dialog/rename-file-dialog';
import { FileRemoveDialog } from '~/views-components/file-remove-dialog/file-remove-dialog';
<FileRemoveDialog />
<MultipleFilesRemoveDialog />
<UpdateCollectionDialog />
+ <UpdateProjectDialog />
<CurrentTokenDialog
currentToken={this.props.currentToken}
open={this.state.isCurrentTokenDialogOpen}
projects / arvados-workbench2.git / commitdiff