Skip to content

Commit

Permalink
refactor: rename filter options (#10276)
Browse files Browse the repository at this point in the history 
* refactor: rename filter options

* fix: sample config cache bug

* fix: ut
  • Loading branch information
@tecton
tecton authored Nov 3, 2023
1 parent 8dfdd50 commit 38325a3
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 153 deletions.
9 changes: 4 additions & 5 deletions packages/cli/tests/unit/utils.tests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,16 +137,15 @@ projectId: 00000000-0000-0000-0000-000000000000`;

this.afterEach(() => {
sandbox.restore();
core.sampleProvider["sampleCollection"] = undefined;
});

it("filters samples have maximum cli verion", async () => {
sandbox.stub(core.sampleProvider, "fetchSampleConfig").callsFake(async () => {
core.sampleProvider["samplesConfig"] = {
filterOptions: {
types: ["Tab"],
capabilities: ["Tab"],
languages: ["TS"],
techniques: ["Azure"],
technologies: ["Azure"],
},
samples: [
{
Expand Down Expand Up @@ -187,9 +186,9 @@ projectId: 00000000-0000-0000-0000-000000000000`;
sandbox.stub(core.sampleProvider, "fetchSampleConfig").callsFake(async () => {
core.sampleProvider["samplesConfig"] = {
filterOptions: {
types: ["Tab"],
capabilities: ["Tab"],
languages: ["TS"],
techniques: ["Azure"],
technologies: ["Azure"],
},
samples: [
{
Expand Down
102 changes: 48 additions & 54 deletions packages/fx-core/src/common/samples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { SampleUrlInfo, sendRequestWithTimeout } from "../component/generator/ut
import { ErrorContextMW } from "../core/globalVars";
import { AccessGithubError } from "../error/common";
import { FeatureFlagName } from "./constants";
import { isVideoFilterEnabled } from "./featureFlags";

const packageJson = require("../../package.json");

Expand Down Expand Up @@ -47,9 +46,9 @@ export interface SampleConfig {
interface SampleCollection {
samples: SampleConfig[];
filterOptions: {
types: string[];
capabilities: string[];
languages: string[];
techniques: string[];
technologies: string[];
};
}

Expand All @@ -59,7 +58,6 @@ type SampleConfigType = {
};

class SampleProvider {
private sampleCollection: SampleCollection | undefined;
private samplesConfig: SampleConfigType | undefined;
private branchOrTag = SampleConfigTag;

Expand Down Expand Up @@ -93,58 +91,54 @@ class SampleProvider {
}

public get SampleCollection(): SampleCollection {
if (!this.sampleCollection) {
const samples =
this.samplesConfig?.samples.map((sample) => {
const isExternal = sample["downloadUrlInfo"] ? true : false;
let gifUrl =
const samples =
this.samplesConfig?.samples.map((sample) => {
const isExternal = sample["downloadUrlInfo"] ? true : false;
let gifUrl =
sample["gifPath"] !== undefined
? `https://raw.githubusercontent.com/${SampleConfigOwner}/${SampleConfigRepo}/${
this.branchOrTag
}/${sample["id"] as string}/${sample["gifPath"] as string}`
: undefined;
let thumbnailUrl = `https://raw.githubusercontent.com/${SampleConfigOwner}/${SampleConfigRepo}/${
this.branchOrTag
}/${sample["id"] as string}/${sample["thumbnailPath"] as string}`;
if (isExternal) {
const info = sample["downloadUrlInfo"] as SampleUrlInfo;
gifUrl =
sample["gifPath"] !== undefined
? `https://raw.githubusercontent.com/${SampleConfigOwner}/${SampleConfigRepo}/${
this.branchOrTag
}/${sample["id"] as string}/${sample["gifPath"] as string}`
? `https://raw.githubusercontent.com/${info.owner}/${info.repository}/${info.ref}/${
info.dir
}/${sample["gifPath"] as string}`
: undefined;
let thumbnailUrl = `https://raw.githubusercontent.com/${SampleConfigOwner}/${SampleConfigRepo}/${
this.branchOrTag
}/${sample["id"] as string}/${sample["thumbnailPath"] as string}`;
if (isExternal) {
const info = sample["downloadUrlInfo"] as SampleUrlInfo;
gifUrl =
sample["gifPath"] !== undefined
? `https://raw.githubusercontent.com/${info.owner}/${info.repository}/${info.ref}/${
info.dir
}/${sample["gifPath"] as string}`
: undefined;
thumbnailUrl = `https://raw.githubusercontent.com/${info.owner}/${info.repository}/${
info.ref
}/${info.dir}/${sample["thumbnailPath"] as string}`;
}
return {
...sample,
onboardDate: new Date(sample["onboardDate"] as string),
downloadUrlInfo: isExternal
? sample["downloadUrlInfo"]
: {
owner: SampleConfigOwner,
repository: SampleConfigRepo,
ref: this.branchOrTag,
dir: sample["id"] as string,
},
gifUrl: gifUrl,
thumbnailUrl: thumbnailUrl,
} as SampleConfig;
}) || [];

this.sampleCollection = {
samples,
filterOptions: {
types: this.samplesConfig?.filterOptions["types"] || [],
languages: this.samplesConfig?.filterOptions["languages"] || [],
techniques: this.samplesConfig?.filterOptions["techniques"] || [],
},
};
}

return this.sampleCollection;
thumbnailUrl = `https://raw.githubusercontent.com/${info.owner}/${info.repository}/${
info.ref
}/${info.dir}/${sample["thumbnailPath"] as string}`;
}
return {
...sample,
onboardDate: new Date(sample["onboardDate"] as string),
downloadUrlInfo: isExternal
? sample["downloadUrlInfo"]
: {
owner: SampleConfigOwner,
repository: SampleConfigRepo,
ref: this.branchOrTag,
dir: sample["id"] as string,
},
gifUrl: gifUrl,
thumbnailUrl: thumbnailUrl,
} as SampleConfig;
}) || [];

return {
samples,
filterOptions: {
capabilities: this.samplesConfig?.filterOptions["capabilities"] || [],
languages: this.samplesConfig?.filterOptions["languages"] || [],
technologies: this.samplesConfig?.filterOptions["technologies"] || [],
},
};
}

private async fetchRawFileContent(branchOrTag: string): Promise<unknown> {
Expand Down
11 changes: 6 additions & 5 deletions packages/fx-core/tests/common/samples-config-v3.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{
"filterOptions": {
"types": [
"capabilities": [
"Tab",
"Bot",
"Message extension"
"Message Extension",
"Meeting"
],
"languages": [
"JS",
"TS"
"JavaScript",
"TypeScript"
],
"techniques": [
"technologies": [
"Azure",
"Adaptive Cards",
"SSO",
Expand Down
12 changes: 4 additions & 8 deletions packages/fx-core/tests/common/samples.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ describe("Samples", () => {
const sandbox = sinon.createSandbox();
const fakedSampleConfig = {
filterOptions: {
types: ["Tab"],
capabilities: ["Tab"],
languages: ["TS"],
techniques: ["Azure"],
technologies: ["Azure"],
},
samples: [
{
Expand Down Expand Up @@ -51,7 +51,6 @@ describe("Samples", () => {
sandbox.restore();
sampleProvider["samplesConfig"] = undefined;
process.env["TEAMSFX_SAMPLE_CONFIG_BRANCH"] = undefined;
(sampleProvider as any).sampleCollection = undefined;
});

it("download sample config on 'dev' branch in alpha version", async () => {
Expand All @@ -78,7 +77,7 @@ describe("Samples", () => {
});
chai.expect(samples[0].gifUrl).equal(undefined);
const filterOptions = sampleProvider.SampleCollection.filterOptions;
chai.expect(filterOptions.types).to.deep.equal(["Tab"]);
chai.expect(filterOptions.capabilities).to.deep.equal(["Tab"]);
});

it("download sample config of prerelease branch in prerelease(beta) version", async () => {
Expand Down Expand Up @@ -235,7 +234,6 @@ describe("Samples", () => {
chai.expect(sampleConfigV3.samples.find((sampleInConfig) => sampleInConfig.id === sample.id))
.exist;
}
(sampleProvider as any).sampleCollection = undefined;
});

it("External sample url can be retrieved correctly in v3", () => {
Expand Down Expand Up @@ -264,7 +262,6 @@ describe("Samples", () => {
chai.expect(faked?.downloadUrlInfo).equals(fakedExternalSample.downloadUrlInfo);
chai.expect(faked?.gifUrl).equals(undefined);

(sampleProvider as any).sampleCollection = undefined;
sampleConfigV3.samples.splice(sampleConfigV3.samples.length - 1, 1);
});

Expand Down Expand Up @@ -311,10 +308,9 @@ describe("Samples", () => {
});

it("returns empty sample collection when sample config is undefined", () => {
(sampleProvider as any).sampleCollection = undefined;
const sampleCollection = sampleProvider.SampleCollection;

chai.expect(sampleCollection.filterOptions.types).to.deep.equal([]);
chai.expect(sampleCollection.filterOptions.capabilities).to.deep.equal([]);
chai.expect(sampleCollection.samples).to.deep.equal([]);
});
});
10 changes: 5 additions & 5 deletions packages/vscode-extension/src/controls/sampleGallery/ISamples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export type SampleGalleryState = {
// keep filtering state here to recover after navigating back from detail page
layout: "grid" | "list";
query: string;
filterTags: Record<string, string[]>;
filterTags: SampleFilterOptionType;
};

export interface SampleInfo {
Expand Down Expand Up @@ -47,18 +47,18 @@ export type SampleProps = {
};

export type SampleFilterOptionType = {
types: string[];
capabilities: string[];
languages: string[];
techniques: string[];
technologies: string[];
};

export type SampleFilterProps = {
samples: Array<SampleInfo>;
filterOptions: SampleFilterOptionType;
layout: "grid" | "list";
query: string;
filterTags: Record<string, string[]>;
filterTags: SampleFilterOptionType;

onLayoutChanged: (layout: "grid" | "list") => void;
onFilterConditionChanged: (query: string, filterTags: Record<string, string[]>) => void;
onFilterConditionChanged: (query: string, filterTags: SampleFilterOptionType) => void;
};
54 changes: 27 additions & 27 deletions packages/vscode-extension/src/controls/sampleGallery/SampleGallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ import SampleListItem from "./sampleListItem";
export default class SampleGallery extends React.Component<unknown, SampleGalleryState> {
private samples: SampleInfo[] = [];
private filterOptions: SampleFilterOptionType = {
types: [],
capabilities: [],
languages: [],
techniques: [],
technologies: [],
};

constructor(props: unknown) {
Expand All @@ -36,7 +36,7 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
loading: true,
layout: "grid",
query: "",
filterTags: { types: [], languages: [], techniques: [] },
filterTags: { capabilities: [], languages: [], technologies: [] },
};
}

Expand Down Expand Up @@ -203,9 +203,9 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
[TelemetryProperty.TriggerFrom]: triggerFrom,
[TelemetryProperty.SampleAppName]: id,
[TelemetryProperty.SearchText]: this.state.query,
[TelemetryProperty.SampleFilters]: this.state.filterTags.types
[TelemetryProperty.SampleFilters]: this.state.filterTags.capabilities
.concat(this.state.filterTags.languages)
.concat(this.state.filterTags.techniques)
.concat(this.state.filterTags.technologies)
.join(","),
[TelemetryProperty.Layout]: this.state.layout,
},
Expand All @@ -228,9 +228,9 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
[TelemetryProperty.TriggerFrom]: TelemetryTriggerFrom.SampleGallery,
[TelemetryProperty.Layout]: newLayout,
[TelemetryProperty.SearchText]: this.state.query,
[TelemetryProperty.SampleFilters]: this.state.filterTags.types
[TelemetryProperty.SampleFilters]: this.state.filterTags.capabilities
.concat(this.state.filterTags.languages)
.concat(this.state.filterTags.techniques)
.concat(this.state.filterTags.technologies)
.join(","),
},
},
Expand All @@ -245,24 +245,24 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
this.setState({ layout: newLayout });
};

private onFilterConditionChanged = (query: string, filterTags: Record<string, string[]>) => {
let filteredSamples = this.samples.filter((sample: SampleInfo) => {
for (const key in filterTags) {
if (filterTags[key].length === 0) {
continue;
}
let isMatch = false;
for (const tag of filterTags[key]) {
if (sample.tags.findIndex((value) => value.includes(tag)) >= 0) {
isMatch = true;
break;
}
}
if (!isMatch) {
return false;
private onFilterConditionChanged = (query: string, filterTags: SampleFilterOptionType) => {
const containsTag = (targets: string[], tags: string[]) => {
if (targets.length === 0) {
return true;
}
for (const target of targets) {
if (tags.findIndex((value) => value.toLowerCase().includes(target.toLowerCase())) >= 0) {
return true;
}
}
return true;
return false;
};
let filteredSamples = this.samples.filter((sample: SampleInfo) => {
return (
containsTag(filterTags.capabilities, sample.tags) &&
containsTag(filterTags.languages, sample.tags) &&
containsTag(filterTags.technologies, sample.tags)
);
});
if (query !== "") {
const fuse = new Fuse(filteredSamples, {
Expand All @@ -282,9 +282,9 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
[TelemetryProperty.TriggerFrom]: triggerFrom,
[TelemetryProperty.SampleAppName]: sample.id,
[TelemetryProperty.SearchText]: this.state.query,
[TelemetryProperty.SampleFilters]: this.state.filterTags.types
[TelemetryProperty.SampleFilters]: this.state.filterTags.capabilities
.concat(this.state.filterTags.languages)
.concat(this.state.filterTags.techniques)
.concat(this.state.filterTags.technologies)
.join(","),
[TelemetryProperty.Layout]: this.state.layout,
},
Expand All @@ -308,9 +308,9 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
[TelemetryProperty.TriggerFrom]: triggerFrom,
[TelemetryProperty.SampleAppName]: sample.id,
[TelemetryProperty.SearchText]: this.state.query,
[TelemetryProperty.SampleFilters]: this.state.filterTags.types
[TelemetryProperty.SampleFilters]: this.state.filterTags.capabilities
.concat(this.state.filterTags.languages)
.concat(this.state.filterTags.techniques)
.concat(this.state.filterTags.technologies)
.join(","),
[TelemetryProperty.Layout]: this.state.layout,
},
Expand Down
Loading

0 comments on commit 38325a3

Please sign in to comment.