From e8795c81853718842124d74565a86f4dbcbbd34c Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 19:58:28 +0530 Subject: [PATCH 01/21] Updated packageVariantset Updated packageVariantset --- plugins/cad/src/types/PackageVariantSet.ts | 57 ++++++++++++++++++++-- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/plugins/cad/src/types/PackageVariantSet.ts b/plugins/cad/src/types/PackageVariantSet.ts index 04be4a94..ea3e4a0f 100644 --- a/plugins/cad/src/types/PackageVariantSet.ts +++ b/plugins/cad/src/types/PackageVariantSet.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import { KptfilePipeline } from './Kptfile'; import { KubernetesKeyValueObject } from './KubernetesResource'; import { PackageVariantUpstream } from './PackageVariant'; @@ -31,15 +32,23 @@ export type PackageVariantSetMetadata = { annotations?: KubernetesKeyValueObject; }; +export type ConfigMapExpr = { + key?: string; + value?: string; + keyExpr?: string; + valueExpr?: string; +}; + export type PackageVariantSetSpec = { upstream: PackageVariantUpstream; targets: PackageVariantSetTargets[]; }; export type PackageVariantSetTargets = { - repositories: PackageVariantSetRepositories[]; - repositorySelector: PackageVariantSetRepositorySelector; - objectSelector: string; + repositories?: PackageVariantSetRepositories[]; + repositorySelector?: PackageVariantSetRepositorySelector; + objectSelector?: PackageVariantSetObjectSelector; + template?: PackageVariantSetTempleate; }; export type PackageVariantSetRepositories = { @@ -50,3 +59,45 @@ export type PackageVariantSetRepositories = { export type PackageVariantSetRepositorySelector = { matchLabels: KubernetesKeyValueObject; }; + +export type PackageVariantSetObjectSelector = { + name?: string; + matchLabels: KubernetesKeyValueObject; + apiVersion: string; + kind: string; +}; + +export type PackageVariantSetTempleate = { + downstream?: PackageVariantSetDownstream; + adoptionPolicy?: string; + deletionPolicy?: string; + labels?: KubernetesKeyValueObject; + labelExprs?: ConfigMapExpr[]; + annotations?: KubernetesKeyValueObject; + annotationExprs?: ConfigMapExpr[]; + packageContext?: PackageVariantSetPackageContext; + pipeline?: KptfilePipeline; + injectors?: PackageVariantSetInjectors; +}; + +export type PackageVariantSetDownstream = { + repo?: string; + package?: string; + repoExpr?: string; + packageExpr?: string; +}; + +export type PackageVariantSetPackageContext = { + data?: KubernetesKeyValueObject; + removeKeys?: string[]; + dataExprs?: ConfigMapExpr[]; + removeKeyExprs?: string[]; +}; + +export type PackageVariantSetInjectors = { + group?: string; + version?: string; + kind?: string; + name: string; + nameExpr?: string; +}; From 1ce091c45ed1bde7ec44f3bbeaf67ef00ae5a9c7 Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 19:59:17 +0530 Subject: [PATCH 02/21] Added packageVariantset case for editor Added packageVariantset case for editor --- .../components/PackageRevisionResourcesTable.tsx | 5 +++++ .../components/FirstClassEditorSelector.tsx | 11 +++++++++++ 2 files changed, 16 insertions(+) diff --git a/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx b/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx index 3724a75a..4b21ae99 100644 --- a/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx +++ b/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx @@ -107,6 +107,11 @@ export const PackageRevisionResourcesTable = ({ kind: 'PackageVariant', namespaceScoped: true, }, + { + apiVersion: 'config.porch.kpt.dev/v1alpha1', + kind: 'PackageVariantSet', + namespaceScoped: true, + }, { apiVersion: 'fn.kpt.dev/v1alpha1', kind: 'ApplyReplacements', diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx index 1ccfbe71..d631ce6d 100644 --- a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx @@ -32,6 +32,7 @@ import { RoleEditor } from './FirstClassEditors/RoleEditor'; import { ServiceAccountEditor } from './FirstClassEditors/ServiceAccountEditor'; import { ServiceEditor } from './FirstClassEditors/ServiceEditor'; import { SetLabelsEditor } from './FirstClassEditors/SetLabelsEditor'; +import { PackageVariantSetEditor } from './FirstClassEditors/PackageVariantSetEditor'; type OnUpdatedYamlFn = (yaml: string) => void; type OnNoNamedEditorFn = () => void; @@ -87,6 +88,16 @@ export const FirstClassEditorSelector = ({ /> ); + case 'config.porch.kpt.dev/v1alpha2/PackageVariantSet': + case 'config.porch.kpt.dev/v1alpha1/PackageVariantSet': + return ( + + ); + case 'fn.kpt.dev/v1alpha1/ApplyReplacements': return ( Date: Mon, 19 Jun 2023 19:59:54 +0530 Subject: [PATCH 03/21] Updated packageVariant files Updated packageVariant files --- .../PackageVariantEditor/PackageVariantEditor.tsx | 2 ++ .../components/PackageVariantSpecEditor.tsx | 6 +++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantEditor/PackageVariantEditor.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantEditor/PackageVariantEditor.tsx index 4a3ed8e0..1ca91f1f 100644 --- a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantEditor/PackageVariantEditor.tsx +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantEditor/PackageVariantEditor.tsx @@ -111,6 +111,8 @@ export const PackageVariantEditor = ({ onUpdate={metadata => setState(s => ({ ...s, metadata }))} /> void; type PackageVariantSpecEditorProps = { + id: string; + title: string; state: AccordionState; value: PackageVariantSpec; onUpdate: OnUpdate; @@ -51,6 +53,8 @@ const adoptFunctionList = [ ]; export const PackageVariantSpecEditor = ({ + id, + title, state, value, onUpdate, @@ -74,7 +78,7 @@ export const PackageVariantSpecEditor = ({ }; return ( - + Date: Mon, 19 Jun 2023 20:00:57 +0530 Subject: [PATCH 04/21] Update homepage for packagevariantseteditor Update homepage for packagevariantseteditor --- .../PackageVariantSetEditor.tsx | 96 +++++++++++++++++++ .../PackageVariantSetEditor/index.ts | 17 ++++ 2 files changed, 113 insertions(+) create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/PackageVariantSetEditor.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/index.ts diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/PackageVariantSetEditor.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/PackageVariantSetEditor.tsx new file mode 100644 index 00000000..f398fc99 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/PackageVariantSetEditor.tsx @@ -0,0 +1,96 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useEffect, useState } from 'react'; +import { cloneDeep } from 'lodash'; +import { PackageResource } from '../../../../../utils/packageRevisionResources'; +import { dumpYaml, loadYaml } from '../../../../../utils/yaml'; +import { ResourceMetadataAccordion } from '../Controls'; +import { useEditorStyles } from '../styles'; +import { PackageVariantSetSpecEditor } from './components/PackageVariantSetSpecEditor'; +import { + PackageVariantSet, + PackageVariantSetSpec, +} from '../../../../../types/PackageVariantSet'; + +type OnUpdatedYamlFn = (yaml: string) => void; + +type ResourceEditorProps = { + yaml: string; + onUpdatedYaml: OnUpdatedYamlFn; + packageResources: PackageResource[]; +}; + +type State = { + spec: PackageVariantSetSpec; +}; + +const getResourceState = (packageVariantSet: PackageVariantSet): State => { + packageVariantSet.spec = packageVariantSet.spec || { targets: [] }; + const packageVariantSetSpec = packageVariantSet.spec; + + packageVariantSetSpec.upstream = packageVariantSetSpec.upstream || {}; + packageVariantSetSpec.targets = packageVariantSetSpec.targets || []; + + const specData = { + upstream: packageVariantSetSpec.upstream, + targets: packageVariantSetSpec.targets, + }; + return { + spec: specData, + }; +}; +export const PackageVariantSetEditor = ({ + yaml, + onUpdatedYaml, + packageResources, +}: ResourceEditorProps) => { + const resourceYaml = loadYaml(yaml) as PackageVariantSet; + + const classes = useEditorStyles(); + + const [state, setState] = useState(resourceYaml); + const [specState, setSpecState] = useState( + getResourceState(resourceYaml), + ); + const [expanded, setExpanded] = useState(); + + useEffect(() => { + resourceYaml.metadata = state.metadata; + const spec = resourceYaml.spec; + spec.upstream = cloneDeep(specState.spec.upstream); + spec.targets = cloneDeep(specState.spec.targets); + + onUpdatedYaml(dumpYaml(resourceYaml)); + }, [state, specState, resourceYaml, onUpdatedYaml]); + + return ( +
+ setState(s => ({ ...s, metadata }))} + /> + setSpecState(s => ({ ...s, spec }))} + /> +
+ ); +}; diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/index.ts b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/index.ts new file mode 100644 index 00000000..e21e4544 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/index.ts @@ -0,0 +1,17 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { PackageVariantSetEditor } from './PackageVariantSetEditor'; From e9f9e5b3c7c851638d7e981244db508e66b736e2 Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 20:01:30 +0530 Subject: [PATCH 05/21] Update spec for packagevariantseteditor Update spec for packagevariantseteditor --- .../PackageVariantSetSpecEditor.tsx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/PackageVariantSetSpecEditor.tsx diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/PackageVariantSetSpecEditor.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/PackageVariantSetSpecEditor.tsx new file mode 100644 index 00000000..65e26fb6 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/PackageVariantSetSpecEditor.tsx @@ -0,0 +1,74 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useState } from 'react'; +import { PackageVariantSetSpec } from '../../../../../../types/PackageVariantSet'; +import { PackageResource } from '../../../../../../utils/packageRevisionResources'; +import { + AccordionState, + EditorAccordion, +} from '../../Controls/EditorAccordion'; +import { UpstreamPackageEditorAccordion } from '../../PackageVariantEditor/components/container/UpstreamPackageEditorAccordion'; +import { TargetEditorAccordion } from './container/TargetEditorAccordion'; + +type OnUpdate = (value: PackageVariantSetSpec) => void; + +type PackageVariantSetSpecEditorProps = { + state: AccordionState; + value: PackageVariantSetSpec; + onUpdate: OnUpdate; + packageResources: PackageResource[]; +}; + +export const PackageVariantSetSpecEditor = ({ + state, + value, + onUpdate, + packageResources, +}: PackageVariantSetSpecEditorProps) => { + const refViewModel = useRef(value); + const viewModel = refViewModel.current; + const [specExpanded, setSpecExpanded] = useState(); + const valueUpdated = (): void => { + onUpdate(viewModel); + }; + + return ( + + { + viewModel.upstream = upstream; + valueUpdated(); + }} + /> + { + viewModel.targets = targetData; + valueUpdated(); + }} + /> + + ); +}; From bdc5b5b8e0e6a710159501b98e23c61b5fe4b2de Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 20:03:27 +0530 Subject: [PATCH 06/21] Updated Target components Updated Target components --- .../ObjectSelectorEditorAccordion.tsx | 149 ++++++++++++++++ .../container/RepositoriesEditorAccordion.tsx | 161 +++++++++++++++++ .../RepositorySelectorEditorAccordion.tsx | 116 +++++++++++++ .../container/TargetEditorAccordion.tsx | 163 ++++++++++++++++++ 4 files changed, 589 insertions(+) create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/ObjectSelectorEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositoriesEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositorySelectorEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/TargetEditorAccordion.tsx diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/ObjectSelectorEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/ObjectSelectorEditorAccordion.tsx new file mode 100644 index 00000000..279e38b1 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/ObjectSelectorEditorAccordion.tsx @@ -0,0 +1,149 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useState } from 'react'; +import { clone } from 'lodash'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { TextField, Button } from '@material-ui/core'; +import { + AccordionState, + EditorAccordion, +} from '../../../Controls/EditorAccordion'; +import { + PackageVariantSetObjectSelector, + PackageVariantSetTempleate, +} from '../../../../../../../types/PackageVariantSet'; +import { KeyValueEditorAccordion } from '../../../Controls'; +import { PackageResource } from '../../../../../../../utils/packageRevisionResources'; +import { TemplateEditorAccordion } from './templates/TemplateEditorAccordion'; +import { useEditorStyles } from '../../../styles'; + +type RepositoriesState = { + objectSelector: PackageVariantSetObjectSelector; + template: PackageVariantSetTempleate; +}; + +type OnUpdate = (newValue?: RepositoriesState) => void; + +type objectSelectorEditorProps = { + id: number; + title: string; + targetState: AccordionState; + target: RepositoriesState; + packageResources: PackageResource[]; + onUpdate: OnUpdate; +}; + +export const ObjectSelectorEditorAccordion = ({ + id, + title, + targetState: accordionState, + target, + packageResources, + onUpdate, +}: objectSelectorEditorProps) => { + const classes = useEditorStyles(); + const refViewModel = useRef(clone(target)); + const viewModel = refViewModel.current; + const [expanded, setExpanded] = useState(); + + const [state, setState] = useState(viewModel); + const valueUpdated = (): void => { + onUpdate(state); + }; + + return ( + + { + setState(s => ({ + ...s, + objectSelector: { + ...s.objectSelector, + apiVersion: e.target.value, + }, + })); + valueUpdated(); + }} + fullWidth + /> + { + setState(s => ({ + ...s, + objectSelector: { + ...s.objectSelector, + kind: e.target.value, + }, + })); + valueUpdated(); + }} + fullWidth + /> + { + viewModel.objectSelector.matchLabels = matchLabels; + setState(s => ({ + ...s, + objectSelector: { + ...s.objectSelector, + matchLabels: matchLabels, + }, + })); + valueUpdated(); + }} + /> + { + setState(s => ({ + ...s, + template: updatedRepositories, + })); + valueUpdated(); + }} + /> +
+ +
+ + ); +}; diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositoriesEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositoriesEditorAccordion.tsx new file mode 100644 index 00000000..006c6e9f --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositoriesEditorAccordion.tsx @@ -0,0 +1,161 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useState } from 'react'; +import { clone } from 'lodash'; +import AddIcon from '@material-ui/icons/Add'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { TextField, Button } from '@material-ui/core'; +import { + AccordionState, + EditorAccordion, +} from '../../../Controls/EditorAccordion'; +import { useEditorStyles } from '../../../styles'; +import { + PackageVariantSetRepositories, + PackageVariantSetTempleate, +} from '../../../../../../../types/PackageVariantSet'; +import { PackageResource } from '../../../../../../../utils/packageRevisionResources'; +import { TemplateEditorAccordion } from './templates/TemplateEditorAccordion'; + +type RepositoriesState = { + repositories?: PackageVariantSetRepositories[]; + template?: PackageVariantSetTempleate; +}; +type OnUpdate = (newValue?: RepositoriesState) => void; + +type repositoriesEditorProps = { + id: number; + title: string; + targetState: AccordionState; + target: RepositoriesState; + packageResources: PackageResource[]; + onUpdate: OnUpdate; +}; + +export const RepositoriesEditorAccordion = ({ + id, + title, + targetState: accordionState, + target, + packageResources, + onUpdate, +}: repositoriesEditorProps) => { + const classes = useEditorStyles(); + const refViewModel = useRef(clone(target)); + const viewModel = refViewModel.current; + + const [expanded, setExpanded] = useState(); + const [state, setState] = useState(viewModel); + const valueUpdated = (): void => { + onUpdate(viewModel); + }; + + return ( + + {state.repositories && + state.repositories.map( + (target: PackageVariantSetRepositories, index: number) => ( + +
+ { + target.name = e.target.value; + valueUpdated(); + }} + fullWidth + /> + { + const value = e.target.value; + target.packageNames = value + ? value.split(',').map(v => v.trim()) + : undefined; + valueUpdated(); + }} + fullWidth + /> +
+
+ +
+ + ), + )} + { + setState(s => ({ + ...s, + template: updatedRepositories, + })); + valueUpdated(); + }} + /> +
+ + +
+ + ); +}; diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositorySelectorEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositorySelectorEditorAccordion.tsx new file mode 100644 index 00000000..2d089acf --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/RepositorySelectorEditorAccordion.tsx @@ -0,0 +1,116 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useState } from 'react'; +import { clone } from 'lodash'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { Button } from '@material-ui/core'; +import { + AccordionState, + EditorAccordion, +} from '../../../Controls/EditorAccordion'; +import { + PackageVariantSetRepositorySelector, + PackageVariantSetTempleate, +} from '../../../../../../../types/PackageVariantSet'; +import { KeyValueEditorAccordion } from '../../../Controls'; +import { PackageResource } from '../../../../../../../utils/packageRevisionResources'; +import { TemplateEditorAccordion } from './templates/TemplateEditorAccordion'; +import { useEditorStyles } from '../../../styles'; + +type RepositoriesState = { + repositorySelector?: PackageVariantSetRepositorySelector; + template?: PackageVariantSetTempleate; +}; +type OnUpdate = (newValue?: RepositoriesState) => void; + +type repositorySelectorEditorProps = { + id: number; + title: string; + targetState: AccordionState; + target: RepositoriesState; + packageResources: PackageResource[]; + onUpdate: OnUpdate; +}; + +export const RepositorySelectorEditorAccordion = ({ + id, + title, + targetState: accordionState, + target, + packageResources, + onUpdate, +}: repositorySelectorEditorProps) => { + const classes = useEditorStyles(); + const refViewModel = useRef(clone(target)); + const viewModel = refViewModel.current; + const [expanded, setExpanded] = useState(); + const [state, setState] = useState(viewModel); + const valueUpdated = (): void => { + onUpdate(viewModel); + }; + + return ( + + { + setState(s => ({ + ...s, + repositorySelector: { + ...s.repositorySelector, + matchLabels: matchLabels, + }, + })); + valueUpdated(); + }} + /> + { + setState(s => ({ + ...s, + template: updatedRepositories, + })); + valueUpdated(); + }} + /> +
+ +
+ + ); +}; diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/TargetEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/TargetEditorAccordion.tsx new file mode 100644 index 00000000..f9118aa5 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/TargetEditorAccordion.tsx @@ -0,0 +1,163 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useState } from 'react'; +import { Button } from '@material-ui/core'; +import AddIcon from '@material-ui/icons/Add'; +import { EditorAccordion } from '../../../Controls'; +import { AccordionState } from '../../../Controls/EditorAccordion'; +import { useEditorStyles } from '../../../styles'; +import { RepositoriesEditorAccordion } from './RepositoriesEditorAccordion'; +import { ObjectSelectorEditorAccordion } from './ObjectSelectorEditorAccordion'; +import { RepositorySelectorEditorAccordion } from './RepositorySelectorEditorAccordion'; +import { + Deletable, + getActiveElements, + isActiveElement, + updateList, +} from '../../../util/deletable'; +import { PackageResource } from '../../../../../../../utils/packageRevisionResources'; + +type OnUpdate = (value: any) => void; + +type TargetEditorAccordionProps = { + id: string; + title: string; + targetState: AccordionState; + keyValueObject: any; + packageResources: PackageResource[]; + onUpdate: OnUpdate; +}; + +export const TargetEditorAccordion = ({ + id, + title, + targetState, + keyValueObject, + packageResources, + onUpdate, +}: TargetEditorAccordionProps) => { + const refViewModel = useRef[]>(keyValueObject); + const viewModel = refViewModel.current ?? []; + const classes = useEditorStyles(); + const [expanded, setExpanded] = useState(); + + const dataUpdate = (): void => { + const stateData = getActiveElements(viewModel); + onUpdate(stateData); + }; + return ( + + {viewModel.map((target: any, index: number) => { + if (target['repositories'] != undefined && isActiveElement(target)) + return ( + { + updateList(viewModel, updatedRepositories, index); + dataUpdate(); + }} + /> + ); + if ( + target['repositorySelector'] != undefined && + isActiveElement(target) + ) + return ( + { + updateList(viewModel, updatedRepositories, index); + dataUpdate(); + }} + /> + ); + if (target['objectSelector'] != undefined && isActiveElement(target)) + return ( + { + updateList(viewModel, updatedRepositories, index); + dataUpdate(); + }} + /> + ); + else return null; + })} +
+ + + +
+ + ); +}; From 40fce7082c836680b1bbd8ea9644b3f384649a0e Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 20:04:09 +0530 Subject: [PATCH 07/21] Create TemplateEditorAccordion Create TemplateEditorAccordion --- .../templates/TemplateEditorAccordion.tsx | 184 ++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/TemplateEditorAccordion.tsx diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/TemplateEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/TemplateEditorAccordion.tsx new file mode 100644 index 00000000..37d9a224 --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/TemplateEditorAccordion.tsx @@ -0,0 +1,184 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState, useRef } from 'react'; +import { + PackageVariantSetInjectors, + PackageVariantSetTempleate, +} from '../../../../../../../../types/PackageVariantSet'; +import { PackageResource } from '../../../../../../../../utils/packageRevisionResources'; +import { Select } from '../../../../../../../Controls'; +import { KeyValueEditorAccordion } from '../../../../Controls'; +import { + AccordionState, + EditorAccordion, +} from '../../../../Controls/EditorAccordion'; +import { InjectorEditorAccordion } from '../../../../PackageVariantEditor/components/container/InjectorEditorAccordion'; +import { DownstreamPackageEditorAccordion } from './container/DownstreamPackageEditorAccordion'; +import { ExprEditorAccordion } from './container/ExprEditorAccordion'; +import { PackageContextEditorAccordion } from './container/PackageContextEditorAccordion'; +import { PipelineEditorAccordion } from './container/PipelineEditorAccordion'; + +type OnUpdate = (value: PackageVariantSetTempleate) => void; + +type PackageVariantSpecEditorProps = { + id: string; + title: string; + state: AccordionState; + value: PackageVariantSetTempleate; + onUpdate: OnUpdate; + packageResources: PackageResource[]; +}; + +const deletionFunctionList = [ + { label: 'Delete', value: 'delete' }, + { label: 'Orphan', value: 'orphan' }, +]; +const adoptFunctionList = [ + { label: 'AdoptExisting', value: 'adoptExisting' }, + { label: 'AdoptNone', value: 'adoptNone' }, +]; +export const TemplateEditorAccordion = ({ + id, + title, + state, + value, + onUpdate, + packageResources, +}: PackageVariantSpecEditorProps) => { + const createInjectorsState = ( + injectors: any, + ): PackageVariantSetInjectors => ({ + group: injectors && injectors.group ? injectors.group : '', + version: injectors && injectors.version ? injectors.version : '', + kind: injectors && injectors.kind ? injectors.kind : '', + name: injectors && injectors.name ? injectors.name : '', + nameExpr: injectors && injectors.nameExpr ? injectors.nameExpr : '', + }); + + const refViewModel = useRef(value); + const viewModel = refViewModel.current; + const [specExpanded, setSpecExpanded] = useState(); + const [injectorEditor, setInjectorEditor] = + useState( + createInjectorsState(viewModel.injectors), + ); + const valueUpdated = (): void => { + onUpdate(viewModel); + }; + + return ( + + { + viewModel.labels = labels; + valueUpdated(); + }} + /> + { + viewModel.labelExprs = labels; + valueUpdated(); + }} + /> + { + viewModel.annotations = annotations; + valueUpdated(); + }} + /> + { + viewModel.annotationExprs = annotations; + valueUpdated(); + }} + /> + { + viewModel.downstream = downstream; + valueUpdated(); + }} + /> + { + viewModel.packageContext = packageContext; + valueUpdated(); + }} + /> + { + viewModel.deletionPolicy = deletionValue; + valueUpdated(); + }} + selected={viewModel.deletionPolicy || ''} + items={deletionFunctionList} + /> + { + viewModel.pipeline = pipeline; + valueUpdated(); + }} + packageResources={packageResources} + /> + { + setInjectorEditor(injectors); + viewModel.injectors = injectors; + valueUpdated(); + }} + /> + + ); +}; From ec8119e90ce344edf9e29a68b77086752d9298d8 Mon Sep 17 00:00:00 2001 From: chander12shekhar Date: Mon, 19 Jun 2023 20:05:37 +0530 Subject: [PATCH 08/21] Created template components Created template components --- .../DownstreamPackageEditorAccordion.tsx | 161 ++++++++++++++ .../container/ExprEditorAccordion.tsx | 143 ++++++++++++ .../PackageContextEditorAccordion.tsx | 127 +++++++++++ .../container/PipelineEditorAccordion.tsx | 206 ++++++++++++++++++ 4 files changed, 637 insertions(+) create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/DownstreamPackageEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/ExprEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/PackageContextEditorAccordion.tsx create mode 100644 plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/PipelineEditorAccordion.tsx diff --git a/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/DownstreamPackageEditorAccordion.tsx b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/DownstreamPackageEditorAccordion.tsx new file mode 100644 index 00000000..c66bbfea --- /dev/null +++ b/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors/PackageVariantSetEditor/components/container/templates/container/DownstreamPackageEditorAccordion.tsx @@ -0,0 +1,161 @@ +/** + * Copyright 2023 The Nephio Authors. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { SelectItem } from '@backstage/core-components'; +import { TextField } from '@material-ui/core'; +import { useApi } from '@backstage/core-plugin-api'; +import React, { Fragment, useRef, useState } from 'react'; +import useAsync from 'react-use/lib/useAsync'; +import { Repository } from '../../../../../../../../../types/Repository'; +import { emptyIfUndefined } from '../../../../../../../../../utils/string'; +import { Select } from '../../../../../../../../Controls'; +import { EditorAccordion } from '../../../../../Controls'; +import { AccordionState } from '../../../../../Controls/EditorAccordion'; +import { configAsDataApiRef } from '../../../../../../../../../apis'; +import { PackageVariantSetDownstream } from '../../../../../../../../../types/PackageVariantSet'; + +type DownstreamPackageObjectEditorProps = { + id: string; + title: string; + state: AccordionState; + keyValueObject: PackageVariantSetDownstream; + onUpdatedKeyValueObject: (arg0: PackageVariantSetDownstream) => void; +}; + +type InternalKeyValue = { + repo?: string; + package?: string; + repoExpr?: string; + packageExpr?: string; +}; + +type RepositorySelectItem = SelectItem & { + repository?: Repository; +}; + +const mapRepositoryToSelectItem = ( + repository: Repository, +): RepositorySelectItem => ({ + label: repository.metadata.name, + value: repository.metadata.name, + repository: repository, +}); + +export const getRepositoryData = (allRepo: any[], name: string): Repository => { + const repository = allRepo.find(thisRepo => thisRepo.metadata.name === name); + return repository; +}; + +export const DownstreamPackageEditorAccordion = ({ + id, + title, + state, + keyValueObject, + onUpdatedKeyValueObject, +}: DownstreamPackageObjectEditorProps) => { + const api = useApi(configAsDataApiRef); + const refViewModel = useRef(keyValueObject); + const viewModel = refViewModel.current; + const repositoryName = viewModel.repo; + + const [repository, setRepository] = useState(); + const [repositorySelectItems, setRepositorySelectItems] = useState< + RepositorySelectItem[] + >([]); + + const keyValueObjectUpdated = (): void => { + onUpdatedKeyValueObject(viewModel); + }; + + useAsync(async (): Promise => { + const { items: thisAllRepositories } = await api.listRepositories(); + const thisRepository = repositoryName + ? getRepositoryData(thisAllRepositories, repositoryName) + : undefined; + + const targetRepositoryItems = thisAllRepositories.map( + mapRepositoryToSelectItem, + ); + setRepository(thisRepository); + setRepositorySelectItems(targetRepositoryItems); + }, [api]); + + const description = `${viewModel.repo ? `${viewModel.repo}/` : ''}${ + viewModel.package ? `${viewModel.package}` : '' + }`; + + return ( + + +